/* CODA / SHEPPER pipe – Startseite für www.coda.de
   Gestaltung nach der CODA-Webseite (coda.css): Papierton, feine Linien, orange Markierung. */

:root {
  --papier: #faf9f2;
  --linie: #7c7d79;
  --linie-hell: #d9d6cb;
  --text: #333333;
  --gedaempft: #6b6a64;
  --markierung: #f55216;
  --markierung-text: #b83a0c;
  --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);
}

img { max-width: 100%; height: auto; }

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; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--akzent); color: #fff; padding: .5rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

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

/* ---------- Kopf ---------- */
.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);
}

/* „CODA / SHEPPER pipe“ – fette Teile wie „CODA“ in „CODA multimedia“ */
.marke {
  padding-bottom: .7rem;
  font: 400 1.35rem/1 var(--serif);
  letter-spacing: .04em;
  color: var(--gedaempft);
}
.marke b { font-weight: 600; letter-spacing: .08em; color: var(--akzent); }
.marke .trenner { margin: 0 .35em; color: var(--linie); }
.marke { margin: 0; }
.marke a { color: inherit; }
.marke a:hover { text-decoration: none; }
.marke a:hover b { color: var(--markierung-text); }

.kopf nav { flex-basis: 100%; }
.kopf ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 1.1rem;
  margin: 0;
  padding: 0;
}

.kopf nav a,
.kopf nav button {
  display: block;
  padding: .3rem 0 .45rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font: 600 1rem/1.2 var(--serif);
  letter-spacing: .03em;
  color: #111;
  cursor: pointer;
}
.kopf nav a:hover, .kopf nav button:hover { text-decoration: none; border-bottom-color: var(--linie-hell); }
.kopf nav a[aria-current="page"] { border-bottom: 5px solid var(--markierung); }
.kopf nav a[aria-current="page"]::before { content: "{ "; color: var(--markierung); font-weight: 400; }
.kopf nav a[aria-current="page"]::after  { content: " }"; color: var(--markierung); font-weight: 400; }

/* Strich und „Informationen“ ganz rechts */
.kopf nav .rechts {
  margin-left: auto;
  padding-left: 1.1rem;
  border-left: 1px solid var(--linie);
}

/* ---------- Inhalt ---------- */
main {
  flex: 1;
  padding: 2.5rem 1.25rem 3rem;
}

.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); }

/* Zwei große Kästen mit dem grünen Titelbild */
.ziele {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.ziel {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linie);
  border-bottom: 5px solid var(--markierung);
  background: #1f4d17;
  color: #fff;
  font: inherit;
  text-align: left;
  line-height: 0;
  cursor: pointer;
}
.ziel img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 30% 50%;
}
.ziel .name {
  position: absolute;
  right: 6%;
  bottom: 12%;
  margin: 0;
  font: 600 clamp(1.6rem, 4.2vw, 2.4rem)/1.1 var(--serif);
  letter-spacing: .06em;
  text-align: right;
  text-shadow: 3px 3px 7px rgba(0, 0, 0, .55);
}
.ziel .unter {
  display: block;
  margin-top: .45em;
  font-size: .42em;
  font-weight: 400;
  letter-spacing: .3em;
}
a.ziel:hover, button.ziel:hover { text-decoration: none; border-color: var(--akzent); }
.ziel:hover img { filter: brightness(1.08); }

/* Animierte Karikaturen (SVG): Ausschnitt so wählen, dass die Musiker zu sehen sind */
.ziel img.bild-pub { object-position: 50% 62%; background: #f6f0e3; }
.ziel img.bild-ueben { object-position: 50% 58%; background: #f6f0e3; }

/* Dunkler Schleier unten rechts, damit die weiße Schrift auf den hellen Bildern lesbar bleibt */
.ziel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top left, rgba(20, 25, 15, .32) 0%, rgba(20, 25, 15, .13) 30%, rgba(20, 25, 15, 0) 60%);
  pointer-events: none;
}
.ziel .name { z-index: 1; }
.ziel .hinweis { z-index: 2; }

/* Hinweis „In Arbeit“ auf dem Kasten Session-Tunes */
.ziel .hinweis {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  padding: .55rem 1.1rem;
  border: 1px solid var(--linie-hell);
  background: var(--papier);
  color: var(--markierung-text);
  font: 600 1rem/1.3 var(--serif);
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.ziel.offen .hinweis { opacity: 1; }

.hinweis-zeile { margin: 1.25rem 0 0; color: var(--gedaempft); font-size: .8rem; }

/* ---------- Informationen ---------- */
.text { max-width: 42rem; }
.text p { margin: 0 0 1em; }
h2 { font: 600 1.2rem/1.3 var(--serif); color: var(--akzent); margin: 2rem 0 .75rem; }
address { font-style: normal; margin-bottom: 1rem; }
.entwurf {
  margin: 0 0 2rem;
  padding: .75rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-hell);
  color: var(--markierung-text);
}
.entwurf p { margin: 0 0 .8em; }
.entwurf p:last-child { margin-bottom: 0; }
.entwurf a { color: var(--akzent); text-decoration: underline; }

/* ---------- Fuß ---------- */
.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); }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 760px) {
  .seite { border-inline: 0; }
  .kopf { padding: .8rem 1rem 0; }
  .marke { font-size: 1.15rem; }
  .kopf ul { gap: 0 .9rem; }
  .kopf nav a, .kopf nav button { font-size: .95rem; }
  .kopf nav .rechts { padding-left: .9rem; }
  main { padding: 1.5rem 1rem 2.5rem; }
  .ziele { grid-template-columns: 1fr; gap: 1rem; }
  .ziel img { aspect-ratio: 2 / 1; }
  .ziel .name { font-size: 1.8rem; }
  .fuss { margin: 0 1rem; }
}

@media print {
  .kopf nav, .fuss a { display: none; }
  .seite { border: 0; }
}