/* Design nach der CODA-Webseite (www.coda.de), Rubrikfarbe „Musik“ */
:root {
  --papier: #faf9f2;
  --karte: #fdfcf7;
  --linie: #7c7d79;
  --linie-hell: #d9d6cb;
  --text: #333333;
  --gedaempft: #6b6a64;
  --markierung: #f55216;
  --flaeche: #f1eeda;
  --akzent: #1e6b45;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
  --sans: Verdana, "DejaVu Sans", Geneva, Tahoma, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font: 0.875rem/1.65 var(--sans); }
a { color: var(--akzent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--markierung); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: .5rem; padding: .4rem .8rem; background: var(--karte); border: 1px solid var(--linie); }
.sprung:focus { left: .5rem; z-index: 2; }

.seite { max-width: 920px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; border-inline: 1px solid var(--linie); }

.kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; padding: 1rem 1.25rem 0; border-bottom: 1px solid var(--linie); }
.marke { font: 600 1.35rem/1 var(--serif); letter-spacing: .08em; color: var(--akzent); padding-bottom: .7rem; }
.marke span { font-weight: 400; color: var(--gedaempft); letter-spacing: .04em; }
.marke:hover { text-decoration: none; }
.kopf ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin: 0; padding: 0; }
.kopf nav a { display: block; padding: .3rem 0 .45rem; border-bottom: 5px solid transparent; font: 1rem/1.2 var(--serif); letter-spacing: .03em; color: #222; }
.kopf nav a:hover { text-decoration: none; border-bottom-color: var(--linie-hell); }
.kopf nav a[aria-current="page"] { border-bottom-color: var(--markierung); }

.banner { position: relative; margin: 2px 2px 0; border-bottom: 5px solid var(--markierung); line-height: 0; }
.banner img { width: 100%; aspect-ratio: 758 / 197; object-fit: cover; display: block; }
.hero-title { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); margin: 0; text-align: right; font: 600 clamp(1.6rem, 6vw, 3.6rem)/1 var(--serif); letter-spacing: .12em; color: #fff; text-shadow: 4px 4px 8px rgba(0,0,0,.45); }
.hero-title span { display: block; margin-top: .4em; font-size: .36em; font-weight: 400; letter-spacing: .25em; }

main { flex: 1; padding: 2rem 1.25rem 3rem; }
.text { max-width: 42rem; }
.titel { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem; font: 400 1.05rem/1 var(--serif); letter-spacing: .35em; color: var(--akzent); }
.titel span::before { content: "{ "; color: var(--markierung); letter-spacing: .1em; }
.titel span::after { content: " }"; color: var(--markierung); letter-spacing: .1em; }
.titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
h2 { font: 600 1.15rem/1.3 var(--serif); color: var(--akzent); margin: 2rem 0 .6rem; }
.gruss { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 1em; }
p { margin: 0 0 1em; }
hr { width: 65%; margin: 1.5rem 0; border: 0; border-top: 1px solid var(--linie); }
address { font-style: normal; }

/* Filter */
.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem 1rem; align-items: end; margin: 0 0 1rem; padding: 1rem 1.1rem; background: var(--karte); border: 1px solid var(--linie-hell); }
.filter label { display: block; font-weight: bold; margin-bottom: .25rem; }
.filter input, .filter select { width: 100%; padding: .45rem .55rem; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--linie-hell); border-radius: 0; }
.filter input:focus, .filter select:focus { border-color: var(--akzent); outline: 2px solid var(--markierung); outline-offset: 1px; }
.btn-secondary { padding: .5rem .9rem; font: bold .85rem/1.2 var(--sans); color: var(--akzent); background: var(--papier); border: 1px solid var(--akzent); border-radius: 0; cursor: pointer; }
.btn-secondary:hover { background: var(--akzent); color: #fff; }
.treffer { margin: 0 0 1.5rem; color: var(--gedaempft); }

/* Liste der Orte */
.land { margin: 0 0 1.75rem; }
.land h2 { margin: 0 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--linie-hell); }
.orte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.ort { padding: .9rem 1.1rem 1rem; background: var(--flaeche); border: 1px solid var(--linie-hell); border-left: 4px solid var(--akzent); }
.ort h3 { margin: 0 0 .1rem; font: 600 1.1rem/1.3 var(--serif); color: var(--akzent); }
.ort .lokal { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1rem; }
.ort dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; }
.ort dt { color: var(--gedaempft); }
.ort dd { margin: 0; }
.ort .fehlt { color: var(--gedaempft); font-style: italic; }
.ort .web { display: inline-block; margin-top: .5rem; }
.ort .stand { margin: .6rem 0 0; font-size: .75rem; color: var(--gedaempft); }
.pille { display: inline-block; margin-left: .35rem; padding: 0 .5rem; border-radius: 999px; font-size: .72rem; line-height: 1.5; vertical-align: .1em; background: rgba(30,107,69,.1); color: var(--akzent); }
.pille.offen { background: rgba(124,125,121,.15); color: var(--gedaempft); }
.leer { padding: 1rem 1.1rem; border: 1px solid var(--linie-hell); border-left: 4px solid var(--markierung); background: var(--karte); }

.hinweis { margin-top: 2rem; padding: .9rem 1.1rem; background: var(--karte); border: 1px solid var(--linie-hell); border-left: 4px solid var(--akzent); }
.hinweis p:last-child { margin: 0; }

.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin: 0 1.25rem; padding: .6rem 0 1.5rem; border-top: 1px solid var(--linie); box-shadow: 0 -11px 0 -10px var(--linie); font-size: .8rem; color: var(--gedaempft); }
.fuss p { margin: 0; }
.fuss a { color: var(--gedaempft); }
.fuss .links a + a::before { content: " · "; color: var(--gedaempft); }

@media (max-width: 760px) {
  .seite { border-inline: 0; }
  .kopf { padding: .8rem 1rem 0; }
  main { padding: 1.5rem 1rem 2.5rem; }
  .fuss { margin: 0 1rem; }
}

/* Karte */
.karte { margin: 0 0 1.5rem; padding: 1rem 1.1rem 1.1rem; background: var(--karte); border: 1px solid var(--linie-hell); }
.karte h2 { margin: 0 0 .3rem; }
.karte-erkl { max-width: 46rem; margin: 0 0 .75rem; font-size: .8rem; color: var(--gedaempft); }
.karte-flaeche { border-block: 1px solid var(--linie-hell); }
.karte-flaeche svg { display: block; width: 100%; height: auto; }
.k-land path { fill: var(--flaeche); stroke: var(--karte); stroke-width: 1.2; stroke-linejoin: round; }
.k-land path.heim { fill: #e9e3c6; }
.k-ring circle { fill: none; stroke: var(--linie); stroke-width: .7; stroke-dasharray: 2 4; }
.k-ring text { font: 11px var(--sans); fill: var(--gedaempft); }
.k-ort { cursor: pointer; outline: none; }
.k-ort circle { fill: var(--akzent); stroke: var(--karte); stroke-width: 1.5; }
.k-ort.offen circle { fill: var(--karte); stroke: var(--gedaempft); }
.k-ort.start circle { fill: var(--markierung); }
.k-ort:hover circle, .k-ort:focus-visible circle { stroke: var(--markierung); stroke-width: 3; }
.k-ort.start:hover circle, .k-ort.start:focus-visible circle { stroke: var(--text); }
.k-namen text { paint-order: stroke; stroke: var(--karte); stroke-width: 3px; stroke-linejoin: round; }
.k-namen .name { font: 13px var(--serif); fill: var(--text); }
.k-namen .start-name { font-weight: 600; fill: var(--akzent); }
.k-namen .zeit { font: 10.5px var(--sans); fill: var(--gedaempft); }
.k-ort.aus, .k-namen .aus { opacity: .25; }
.karte-info { min-height: 1.65em; margin: .5rem 0 0; }
.karte-quelle { margin: .2rem 0 0; font-size: .7rem; color: var(--gedaempft); }
.schmal .k-namen .name { font-size: 11.5px; }
.schmal .k-ring text { font-size: 10px; }