:root {
  --sort: #000;
  --hvid: #fff;
  --bredde: 580px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--sort);
  background: var(--hvid);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Fast mobil-app-søjle — vokser ALDRIG med vinduet; hvidt på siderne på desktop */
.app {
  max-width: var(--bredde);
  margin: 0 auto;
  width: 100%;
  padding: 0 18px;
}

/* Logo — zoomet ind på motivet (uden FLAMMEKASTER-teksten), hele motivet synligt */
.logo-wrap {
  display: block;
  width: 205px;
  height: 200px;
  margin: 30px auto 12px;
  overflow: hidden;
}
.logo-wrap img {
  width: 100%;
  transform: scale(1.22) translateY(7%);   /* træk billedet ned i rammen */
  transform-origin: center 54%;
}

/* Navigation — Roboto Condensed, inverteret hover der smelter med bjælken */
nav {
  display: flex;
  justify-content: space-between;   /* knapperne spænder præcis bjælkens bredde */
  align-items: stretch;
  border-bottom: 9px solid var(--sort);
}
nav a {
  flex: 1 1 0;            /* alle 4 knapper lige brede (25% hver) */
  text-align: center;     /* tekst centreret uanset ordlængde */
  font-family: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sort);
  font-size: 19px;
  letter-spacing: 0.05em;
  padding: 9px 4px 13px;
  transition: background 0.12s, color 0.12s;
}
nav a:hover { background: var(--sort); color: var(--hvid); }

/* Artister */
.artister { padding-bottom: 8px; }
.artist-kort {
  display: block;
  text-decoration: none;
  color: var(--sort);
  margin-top: 26px;
}
.artist-billede {
  position: relative;
  width: 100%;
  aspect-ratio: 2.5 / 1;
  overflow: hidden;
  background: #ececec;
}
/* gennemgående sort bjælke ovenpå billedets top — identisk med menu-bjælken */
.artist-billede::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  background: var(--sort);
  z-index: 1;
}
.artist-billede img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* beskær, stræk ALDRIG */
  object-position: center 20%;  /* vis mere af toppen (ansigterne) */
}
.artist-kort h2 {
  font-family: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;                    /* helt tæt op ad billedet */
  padding: 4px 5px;             /* lige meget luft hele vejen rundt */
  display: inline-block;
  transition: background 0.12s, color 0.12s;
}
.artist-kort:hover h2 { background: var(--sort); color: var(--hvid); }

/* Første billede bruger menu-bjælken som sin top-bjælke (undgå dobbelt bjælke) */
.artist-kort:first-child { margin-top: 0; }
.artist-kort:first-child .artist-billede::before { display: none; }

/* Knapper (Work Sans) — sort felt, inverterer på hover */
.knap {
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  display: inline-block;
  background: var(--sort);
  color: var(--hvid);
  text-decoration: none;
  padding: 10px 18px;
  transition: background 0.12s, color 0.12s;
}
.knap:hover { background: var(--hvid); color: var(--sort); box-shadow: inset 0 0 0 1px var(--sort); }

/* Diskografi */
.disko-liste { padding-top: 6px; }
.disko-item {
  display: flex;
  gap: 16px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--sort);
  align-items: flex-start;
}
.disko-cover { width: 150px; flex-shrink: 0; }
.disko-cover a { display: block; cursor: zoom-in; }
.disko-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.disko-info {
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
}
.disko-info .flam {
  font-weight: 700;            /* katalognr: mindre end hovedlinjerne, men bold */
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.disko-info .mars { position: relative; cursor: help; text-decoration: underline dotted; }
.disko-info .mars-tip {
  display: none;
  position: absolute;
  bottom: 135%;
  left: 0;
  background: var(--sort);
  color: var(--hvid);
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 6px 9px;
  z-index: 5;
}
.disko-info .mars:hover .mars-tip { display: block; }
.disko-info .hoved {
  font-weight: 400;            /* ARTIST / TITEL / FORMAT: de 3 store linjer */
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: 0.005em;
}
.disko-info .detalje {
  font-weight: 400;            /* tæt, skruet ned */
  font-size: 11px;
  line-height: 1.4;
  margin-top: 11px;            /* lidt luft inden den tætte del */
  color: #1a1a1a;
}

/* Artist-side */
.artist-side { padding-bottom: 8px; }
.hero-billede {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  background: #ececec;
}
.hero-billede::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  background: var(--sort);
  z-index: 1;
}
.hero-billede img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
/* naturlig højde — tro mod originalfilen, ingen beskæring (Dødens Triumf) */
.hero-billede.naturlig { aspect-ratio: auto; }
.hero-billede.naturlig img { height: auto; object-fit: fill; }
.artist-titel {
  font-family: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 7px 0 16px;
}
.bio {
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7;
}
.bio p { margin-bottom: 12px; }
.presse-baand {
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  background: var(--sort);
  color: var(--hvid);
  text-align: center;
  padding: 12px;
  margin: 20px 0;
}
.videoer { display: flex; flex-direction: column; gap: 12px; }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kontakt { margin-top: 24px; }
.kontakt h3 {
  font-family: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.kontakt p {
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;   /* brødtekst som på det gamle site */
  font-size: 12px;
  line-height: 1.6;
}

/* Koncerter */
.koncerter-side { padding-bottom: 20px; }
.koncert-blok { margin-top: 24px; }
.koncert-titel {
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

/* Shop — midlertidig Google Form-embed indtil den selvbyggede shop er klar */
.shop-side { padding-top: 16px; padding-bottom: 24px; }
.shop-form { width: 100%; height: 2600px; border: 0; }

/* Footer — mail med "fed streg under" (adresse-bjælken); smelter sammen på hover.
   Mail-feltet har SAMME bredde som adresse-bjælken, så de bliver ét sort felt. */
/* footer er UDEN for .app → fuld vinduesbredde, bredere end content-søjlen */
footer { margin-top: 40px; padding: 0 18px 46px; text-align: center; }
.footer-kontakt { display: inline-block; max-width: 100%; }   /* centreret via text-align */
.footer-mail {
  display: block;
  width: 100%;
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sort);
  text-decoration: none;
  padding: 9px 4px;
  transition: background 0.12s, color 0.12s;
}
.footer-mail:hover { background: var(--sort); color: var(--hvid); }
.footer-adresse {
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  background: var(--sort);
  color: var(--hvid);
  font-size: 11px;
  letter-spacing: 0.05em;
  white-space: nowrap;          /* adressen på én linje, centreret */
  padding: 11px 56px;
}
/* på smalle skærme: lad adressen ombryde i stedet for at overflowe */
@media (max-width: 620px) {
  .footer-adresse { white-space: normal; padding: 11px 20px; }
}