/* ==================================================================
   konzertsaal.at — Stylesheet
   Kühles Graphit, gedämpftes Messing. Der Notenlinien-Strich als
   wiederkehrendes Zeichen.
   Spectral (Auszeichnung) · Inter (Text) · IBM Plex Mono (Marken)
   ================================================================== */

/* ---------- Schriften, lokal ausgeliefert ---------- */
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/spectral-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/spectral-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/spectral-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/spectral-latin-ext-400-italic.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/spectral-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/spectral-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/inter-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/inter-latin-ext-400-italic.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Grundwerte ---------- */
:root{
  --paper:#F2F3F1;
  --paper-2:#E5E7E4;
  --ink:#14181A;
  --ink-2:#1C2225;
  --ink-soft:#3A4145;
  --grey:#63696C;
  --grey-dark:#8E9694;
  --line:#D4D7D3;
  --line-dark:#333A3D;
  --brass:#7A5C2B;
  --brass-light:#C79A52;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1280px;
  --narrow:720px;
  --pad:clamp(1.15rem,4.5vw,4rem);
}

*,*::before,*::after{box-sizing:border-box}

/* Farbschema festnageln. Ohne diese Angaben dunkelt iOS die Seite
   im Dunkelmodus eigenmächtig ab und die Schrift verschwindet.
   Deshalb bekommt jeder Abschnitt seinen eigenen Grund. */
html{-webkit-text-size-adjust:100%;color-scheme:light;background:var(--paper);scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1}
main{background:var(--paper);color:var(--ink);display:block}
section{background:var(--paper);color:var(--ink);padding-block:clamp(3.2rem,7.5vw,6.5rem)}
section.dark{background:var(--ink);color:var(--paper)}
section.tone{background:var(--paper-2);color:var(--ink)}
section.hero{padding:0;background:var(--ink);color:var(--paper)}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:var(--narrow)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--ink);color:var(--paper);padding:.7rem 1rem}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media(max-width:900px){
  .prose p,.prose li,.prose h3,.lead{hyphens:auto;-webkit-hyphens:auto}
}
.card,.card p,.spec td,.foot li{overflow-wrap:break-word}

/* ---------- Das Zeichen: Notenlinien ---------- */
/* Fünf Haarlinien im Abstand einer Notenzeile. Erscheint als Trenner
   unter Abschnittsüberschriften und einmal unter dem Kopfbild. */
.stave{height:17px;border:0;margin:0;
  background-image:repeating-linear-gradient(to bottom,
    currentColor 0,currentColor 1px,transparent 1px,transparent 4px);
  opacity:.22}
.stave--short{max-width:150px}

/* ---------- Kopfzeile ---------- */
.top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.4rem}
.mark{font-family:var(--serif);font-weight:500;font-size:1.06rem;letter-spacing:.05em;white-space:nowrap}
.mark span{color:var(--brass)}
.nav{display:none;gap:1.7rem;align-items:center}
.nav a{font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  padding-bottom:.25rem;border-bottom:1px solid transparent;white-space:nowrap;transition:border-color .2s}
.nav a:hover{border-color:var(--brass)}
.nav a[aria-current="page"]{border-color:currentColor}
.lang{display:flex;gap:.35rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;margin:0}
.lang a{opacity:.65;transition:opacity .2s}   /* darunter reicht der Kontrast nicht */
.lang a:hover{opacity:1}
.lang a[aria-current="true"]{opacity:1;color:var(--brass)}
.lang span{opacity:.25}

.burger{width:2.75rem;height:2.75rem;display:grid;place-items:center;background:none;border:0;
  cursor:pointer;margin-right:-.6rem;color:inherit;padding:0}
.burger i{display:block;width:22px;height:1px;background:currentColor;position:relative;transition:background .25s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1px;
  background:currentColor;transition:transform .25s}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
@media(min-width:1040px){.burger{display:none}.nav{display:flex}}

.drawer{position:fixed;inset:0;z-index:40;background:var(--ink);color:var(--paper);
  padding:5rem var(--pad) 3rem;opacity:0;pointer-events:none;transition:opacity .28s;overflow-y:auto}
.drawer.is-open{opacity:1;pointer-events:auto}
.drawer a{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.38;padding:.2rem 0}
.drawer .grp{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-dark);margin:1.9rem 0 .5rem}
.drawer .lang{margin-top:2.2rem}
.drawer .lang a[aria-current="true"]{color:var(--brass-light)}
.drawer .lang a{display:inline;font-family:var(--mono);font-size:.8rem;padding:0}

/* ---------- Kopfbereich Startseite ---------- */
.hero__in{position:relative;padding-block:clamp(5rem,15vw,9.5rem) clamp(3.2rem,8vw,5rem)}
.hero .kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-light);margin:0 0 1.6rem}
.hero h1{font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(2.15rem,6.2vw,4.4rem);line-height:1.08;letter-spacing:-.015em;
  max-width:19ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--brass-light)}
.hero .stave{margin:clamp(2rem,5vw,3rem) 0 clamp(1.6rem,4vw,2.4rem);max-width:210px;opacity:.4}
.hero .lead{font-size:clamp(1rem,1.7vw,1.14rem);color:#C9CDCB;max-width:58ch;margin:0}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2rem,5vw,2.8rem)}

/* Bildplatz. Sobald ein Foto vorliegt, genügt es, die Datei unter
   /assets/img/hero.jpg abzulegen und im HTML das Attribut
   data-bild="1" auf <section class="hero"> zu setzen. */
.hero[data-bild="1"]{background:#0A0D0E}
.hero[data-bild="1"] .hero__bg{position:absolute;inset:0;overflow:hidden}
.hero[data-bild="1"] .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:.5}
@media(max-width:700px){.hero[data-bild="1"] .hero__bg img{object-position:50% 32%}}
.hero[data-bild="1"] .hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,26,.82) 0%,rgba(20,24,26,.55) 45%,rgba(20,24,26,.92) 100%)}
.hero[data-bild="1"] .hero__in{z-index:2}

/* ---------- Seitenkopf der Unterseiten ---------- */
.pagehead{padding-block:clamp(2.4rem,6vw,4.2rem) clamp(1.2rem,3vw,2rem)}
.pagehead .kick{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin:0}
.pagehead h1{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.012em;
  font-size:clamp(2rem,5.6vw,3.6rem);margin:.85rem 0 0;max-width:23ch;text-wrap:balance}
.pagehead .sub{margin:1.1rem 0 0;font-size:clamp(1rem,1.9vw,1.16rem);color:var(--grey);max-width:56ch}
.pagehead .stave{margin-top:clamp(1.6rem,4vw,2.4rem);max-width:150px;color:var(--brass);opacity:.5}

/* ---------- Abschnittsüberschriften ---------- */
.head{margin-bottom:2.2rem}
.head__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.75rem}
/* Der Notenlinien-Strich bleibt kurz: ein Zeichen, kein Balken. */
.head .stave{max-width:104px;color:var(--brass);opacity:.55}
section.dark .head .stave{color:var(--brass-light);opacity:.5}
.head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.15rem);
  margin:0;line-height:1.12;text-wrap:balance}
.head__row a{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);flex:none;border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .2s,border-color .2s}
.head__row a:hover{color:var(--brass);border-color:var(--brass)}
section.dark .head__row a{color:#C0C5C3;border-bottom-color:var(--line-dark)}
section.dark .head__row a:hover{color:var(--brass-light);border-color:var(--brass-light)}
.sub-h{font-family:var(--serif);font-weight:500;font-size:clamp(1.22rem,2.6vw,1.6rem);
  margin:2.6rem 0 .8rem;line-height:1.22}

/* ---------- Fließtext ---------- */
.prose{max-width:68ch;overflow-wrap:break-word}
.prose p{margin:0 0 1.15rem;color:var(--ink-soft)}
.prose p.lead{font-family:var(--serif);font-size:clamp(1.14rem,2.4vw,1.42rem);line-height:1.48;color:var(--ink)}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}
.prose ul{margin:0 0 1.35rem;padding-left:1.05rem}
.prose li{margin-bottom:.42rem;color:var(--ink-soft)}
.prose a:not(.btn):not(.more){border-bottom:1px solid var(--brass);transition:color .2s}
.prose a:not(.btn):not(.more):hover{color:var(--brass)}
section.dark .prose p,section.dark .prose li{color:#C9CDCB}
section.dark .prose strong,section.dark .prose p.lead{color:var(--paper)}
section.dark .prose a:not(.btn):not(.more){border-color:var(--brass-light)}
section.dark .prose a:not(.btn):not(.more):hover{color:var(--brass-light)}

.more{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s}
.more:hover{color:var(--brass)}
section.dark .more:hover{color:var(--brass-light)}
.btn{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;border:1px solid currentColor;padding:.85rem 1.55rem;
  transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--fill{background:var(--brass);border-color:var(--brass);color:#fff}
.btn--fill:hover{background:var(--brass-light);border-color:var(--brass-light);color:var(--ink)}
section.dark .btn:hover,.hero .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
section.dark .btn--fill:hover,.hero .btn--fill:hover{background:var(--brass-light);border-color:var(--brass-light);color:var(--ink)}

/* ---------- Leistungsverzeichnis ---------- */
.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
section.dark .services{border-color:var(--line-dark)}
.services li{border-bottom:1px solid var(--line);padding-block:clamp(1.6rem,3.5vw,2.3rem)}
section.dark .services li{border-color:var(--line-dark)}
.services .row{display:grid;grid-template-columns:1fr;gap:.7rem}
@media(min-width:860px){
  .services .row{grid-template-columns:4.5rem 20rem 1fr;gap:0 2.6rem;align-items:start}
}
.services .idx{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);padding-top:.5rem;margin:0}
section.dark .services .idx{color:var(--brass-light)}
.services h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.8vw,1.62rem);
  margin:0;line-height:1.2}
.services p{margin:0;color:var(--ink-soft);max-width:52ch}
section.dark .services p{color:#C0C5C3}
.services .more{margin-top:.9rem}

/* ---------- Ablauf in Schritten ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding:0 0 2.1rem 3.6rem;counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.15rem;
  font-family:var(--mono);font-size:.72rem;color:var(--brass);letter-spacing:.06em}
.steps li::after{content:"";position:absolute;left:.9rem;top:1.9rem;bottom:.35rem;width:1px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{font-family:var(--serif);font-weight:500;font-size:1.18rem;margin:0 0 .35rem;line-height:1.3}
.steps p{margin:0;color:var(--ink-soft);max-width:56ch}

/* ---------- Umfangsliste (Komplettproduktion) ---------- */
.chain{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;padding:0;list-style:none}
.chain li{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
  border:1px solid var(--line);padding:.5rem .8rem;color:var(--ink-soft)}
section.dark .chain li{border-color:var(--line-dark);color:#C0C5C3}

/* ---------- Karten (Kontakt, Partner, Ausstattung) ---------- */
.cards{display:grid;gap:1px;background:transparent;margin-top:2rem}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--paper);padding:clamp(1.4rem,3vw,2rem);box-shadow:0 0 0 1px var(--line)}
section.tone .card{background:var(--paper)}
.card h3{font-family:var(--serif);font-weight:500;font-size:1.16rem;margin:0 0 .6rem;line-height:1.25}
.card p{margin:0 0 .45rem;color:var(--ink-soft);font-size:.94rem}
.card p:last-child{margin-bottom:0}
.card .meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.7rem}
.card a{border-bottom:1px solid var(--brass)}
.card a:hover{color:var(--brass)}

/* ---------- Ausstattungstabelle ---------- */
.spec{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.94rem}
.spec th,.spec td{text-align:left;padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.spec th{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass);width:12rem;padding-right:2rem}
.spec td{color:var(--ink-soft)}
@media(max-width:640px){
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:auto}
  .spec th{border:0;padding-bottom:.2rem}
  .spec td{padding-top:0}
}

/* ---------- Zitatblock / Hinweis ---------- */
.note{border-left:2px solid var(--brass);padding:.2rem 0 .2rem 1.3rem;margin:2rem 0;
  font-family:var(--serif);font-size:1.06rem;color:var(--ink-soft);max-width:60ch}

/* ---------- Aufruf ---------- */
.cta__in{display:grid;gap:1.6rem;align-items:end}
@media(min-width:860px){.cta__in{grid-template-columns:1fr auto}}
.cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.8vw,2.4rem);
  margin:0;line-height:1.14;max-width:24ch;text-wrap:balance}
.cta p{margin:.9rem 0 0;color:#C0C5C3;max-width:52ch}

/* ---------- Fußzeile ---------- */
.foot{background:var(--ink);color:#B8BEBB;padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.88rem}
.foot__grid{display:grid;gap:2.2rem}
@media(min-width:760px){.foot__grid{grid-template-columns:1.3fr 1fr 1fr}}
.foot h4,.foot .foot__h{font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-dark);margin:0 0 .9rem;font-weight:400;line-height:1.4}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.42rem;line-height:1.5}
.foot a:hover{color:var(--brass-light)}
.foot strong{color:var(--paper);font-weight:500}
.foot__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  margin:2.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.05em;color:var(--grey-dark)}
.foot__legal a:hover{color:var(--brass-light)}

/* ---------- Bewegung ---------- */
/* Die Einblendung greift nur, wenn JavaScript läuft. Ohne die Klasse .js
   bleibt der Inhalt sichtbar — sonst wäre die Seite ohne JavaScript leer. */
html.js .rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
html.js .rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .rise{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media(hover:none){
  .nav a:hover,.more:hover,.card a:hover{color:inherit}
}

/* ==================================================================
   Ostasiatische Sprachen
   Für Chinesisch, Japanisch und Koreanisch werden keine Webfonts
   geladen — vollständige CJK-Schriften wiegen mehrere Megabyte.
   Stattdessen die Systemschriften, die auf jedem Gerät vorhanden
   sind, das diese Sprachen liest. Spectral, Inter und Plex Mono
   bleiben vorangestellt und greifen für lateinische Wörter
   (Neumann, Sony ZV-1, Konzertsaal.at).
   ================================================================== */
html[lang|="zh"]{
  --serif:"Spectral","Songti SC","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:"Plex Mono","PingFang SC","Microsoft YaHei",ui-monospace,monospace;
}
html[lang="ja"]{
  --serif:"Spectral","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  --mono:"Plex Mono","Hiragino Sans","Yu Gothic",ui-monospace,monospace;
}
html[lang="ko"]{
  --serif:"Spectral","Nanum Myeongjo","Noto Serif KR","Apple SD Gothic Neo",serif;
  --sans:"Inter","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --mono:"Plex Mono","Apple SD Gothic Neo","Malgun Gothic",ui-monospace,monospace;
}
/* Silbentrennung ergibt im CJK-Satz keinen Sinn; Zeilen dürfen dafür
   an jeder Stelle brechen, und der Zeilenabstand wird etwas größer. */
html[lang|="zh"] body,html[lang="ja"] body,html[lang="ko"] body{line-height:1.85}
html[lang|="zh"] .prose p,html[lang="ja"] .prose p,html[lang="ko"] .prose p,
html[lang|="zh"] .prose li,html[lang="ja"] .prose li,html[lang="ko"] .prose li{
  hyphens:none;-webkit-hyphens:none;line-break:strict;overflow-wrap:anywhere}
html[lang|="zh"] h1,html[lang="ja"] h1,html[lang="ko"] h1,
html[lang|="zh"] h2,html[lang="ja"] h2,html[lang="ko"] h2{line-height:1.35;letter-spacing:0}
html[lang|="zh"] .hero h1,html[lang="ja"] .hero h1,html[lang="ko"] .hero h1{
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.32}
html[lang|="zh"] .pagehead h1,html[lang="ja"] .pagehead h1,html[lang="ko"] .pagehead h1{
  font-size:clamp(1.7rem,4.4vw,2.9rem);line-height:1.34;max-width:26ch}
html[lang|="zh"] .kick,html[lang="ja"] .kick,html[lang="ko"] .kick,
html[lang|="zh"] .nav a,html[lang="ja"] .nav a,html[lang="ko"] .nav a,
html[lang|="zh"] .idx,html[lang="ja"] .idx,html[lang="ko"] .idx,
html[lang|="zh"] .card .meta,html[lang="ja"] .card .meta,html[lang="ko"] .card .meta,
html[lang|="zh"] .spec th,html[lang="ja"] .spec th,html[lang="ko"] .spec th{
  text-transform:none;letter-spacing:.06em}
html[lang|="zh"] .nav a,html[lang="ja"] .nav a,html[lang="ko"] .nav a{font-size:.82rem}
html[lang|="zh"] .chain li,html[lang="ja"] .chain li,html[lang="ko"] .chain li{letter-spacing:0}
/* Kursive existiert im chinesischen, japanischen und koreanischen Schriftsatz
   nicht; der Browser würde die Zeichen bloß schräg stellen. Daher aufrecht. */
html[lang|="zh"] em,html[lang="ja"] em,html[lang="ko"] em{font-style:normal}
html[lang|="zh"] .hero h1 em,html[lang="ja"] .hero h1 em,html[lang="ko"] .hero h1 em{font-style:normal}

/* ---------- Sprachwahl mit fünf Sprachen ---------- */
.lang{flex-wrap:wrap}
.lang a{padding:0 .1rem}
.lang--full{gap:.7rem;font-size:.78rem;font-family:var(--sans);margin:0}
.lang--full a{opacity:.72}
.lang--full a[aria-current="true"]{opacity:1}
@media(max-width:400px){
  .top__in{gap:.5rem}
  .mark{font-size:.98rem}
  .lang{font-size:.62rem;gap:.25rem}
}
.foot__lang{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline;
  margin:2.4rem 0 0;font-size:.82rem}
.foot__lang span{font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-dark)}
.foot__lang a{color:#B8BEBB}
.foot__lang a:hover{color:var(--brass-light)}
.foot__legal{margin-top:1.6rem}

/* Sehr lange deutsche Komposita dürfen auf schmalen Geräten umbrechen. */
@media(max-width:520px){
  h1,h2,h3,.hero h1,.pagehead h1{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* Nach dem Seitenkopf darf der erste Abschnitt näher heranrücken. */
.pagehead + section{padding-top:clamp(1.8rem,4vw,3.2rem)}

/* ---------- Menü auf kleinen und niedrigen Bildschirmen ----------
   Mit sechs Sprachen bricht die Sprachzeile auf schmalen Geräten um.
   Auf niedrigen Bildschirmen (iPhone SE) rückt daher alles zusammen,
   damit das Menü ohne Scrollen vollständig sichtbar bleibt. */
.lang--full{row-gap:.55rem}
@media(max-height:720px){
  .drawer{padding-top:4.2rem;padding-bottom:2.2rem}
  .drawer a{font-size:1.42rem;line-height:1.3}
  .drawer .grp{margin:1.3rem 0 .4rem}
  .drawer .lang{margin-top:1.5rem}
}
@media(max-height:600px){
  .drawer{padding-top:3.9rem}
  .drawer a{font-size:1.25rem;line-height:1.28}
  .drawer .grp{margin:1rem 0 .35rem}
  .drawer .lang{margin-top:1.1rem}
}