/* Version 1-6: existing metal motifs, toned down behind all six topic pages. */
body.has-topic-background { isolation: isolate; }
body.has-topic-background > main { position: relative; z-index: 1; background-color: transparent; }
body.has-topic-background::before {
  content: "";
  position: fixed;
  inset: var(--header-height, 120px) 0 var(--footer-height, 40px);
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), var(--topic-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--topic-opacity, .18);
}
body.has-topic-background .hero-art .art-label { background-color: transparent; }
body.has-topic-background .hero-art .art-project-topics { background-color: transparent; }
@media(max-width:720px) {
  body.has-topic-background::before {
    background-size: auto 100%;
    background-position: var(--mobile-background-position, center) center;
    opacity: .12;
  }
}
body[data-page="start"] { --topic-image: url("assets/hintergruende/2-17-gespiegelt.webp"); --mobile-background-position: 24%; }
body[data-page="leistungen"] { --topic-image: url("assets/hintergruende/2-27.webp"); --mobile-background-position: 34%; }
body[data-page="zusammenarbeit"] { --topic-image: url("assets/hintergruende/2-45-gespiegelt.webp"); --mobile-background-position: 74%; }
body[data-page="projekterfahrung"] { --topic-image: url("assets/hintergruende/2-23-gespiegelt.webp"); --mobile-background-position: 74%; }
body[data-page="ueber-uns"] { --topic-image: url("assets/hintergruende/ueber-uns-hand-ringe.webp"); --mobile-background-position: 10%; }
body[data-page="kontakt"] { --topic-image: url("assets/hintergruende/2-31-gespiegelt.webp"); --mobile-background-position: 73%; }
body[data-page="start"] { --topic-opacity: .14; }

/* Nur den Briefumschlag abschwaechen; gleiche Bildkoordinaten und unveraenderte Zahnraeder. */
body.has-topic-background[data-page="kontakt"]::before {
  background-image: linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), url("assets/hintergruende/kontakt-brief-dezent.svg"), var(--topic-image);
}


/* Hand und Ringe als unveraendertes Motiv rechts unten ueber der Fusszeile. */
body.has-topic-background[data-page="ueber-uns"]::before {
  background-image: linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), url("assets/hintergruende/ueber-uns-hand-ringe-ausschnitt.svg");
  background-size: cover, min(42vw, 560px) auto;
  background-position: center, left 12px bottom 4px;
}
@media(max-width:720px) {
  body.has-topic-background[data-page="ueber-uns"]::before {
    background-size: cover, min(80vw, 440px) auto;
    background-position: center, left 8px bottom 4px;
  }
}


/* Grundflaeche passend zum dunklen Schiefergrau hinter Hand und Ringen. */
body[data-page="ueber-uns"] { background-color: #424a52; }
body.has-topic-background[data-page="ueber-uns"]::before {
  background-image: linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), url("assets/hintergruende/ueber-uns-hand-ringe-ausschnitt.svg");
}



/* Puzzleteile gezielt abschwaechen, Zahnraeder und Gesamtdeckkraft beibehalten. */
body.has-topic-background[data-page="zusammenarbeit"]::before {
  background-image: linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), url("assets/hintergruende/zusammenarbeit-puzzle-dezent.svg"), var(--topic-image);
}

/* Gespiegelte Waben gezielt zuruecknehmen, Zahnraeder links erhalten. */
body.has-topic-background[data-page="projekterfahrung"]::before {
  background-image: linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), url("assets/hintergruende/projekterfahrung-waben-dezent.svg"), var(--topic-image);
}

body.has-topic-background[data-page="leistungen"]::before { opacity: .09; }
@media(max-width:720px) { body.has-topic-background[data-page="leistungen"]::before { opacity: .07; } }

/* Test: ein durchgehendes Startseitenmotiv auch hinter Kopf- und Fusszeile. */
body.has-topic-background[data-page="start"]::before { inset: 0; }
body[data-page="start"] > .header,
body[data-page="start"] > footer.wrap {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* Version 1-7: durchgehende Hintergrundbilder auf allen sechs Themenseiten. */
body.has-topic-background::before { inset: 0; }
body.has-topic-background > .header,
body.has-topic-background > footer.wrap {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* Scrollende Texte werden durch deckende Leisten verdeckt.
   Das Hintergrundmotiv bleibt mit der Ansicht synchron ausgerichtet. */
body[data-page="leistungen"] > .header,
body[data-page="leistungen"] > footer.wrap,
body[data-page="projekterfahrung"] > .header,
body[data-page="projekterfahrung"] > footer.wrap {
  background-color: #424a52;
  background-image: var(--bar-background);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body[data-page="leistungen"] {
  --bar-background: linear-gradient(rgba(66,74,82,.91), rgba(66,74,82,.91)), linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), var(--topic-image);
}
body[data-page="projekterfahrung"] {
  --bar-background: linear-gradient(rgba(66,74,82,.82), rgba(66,74,82,.82)), linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), url("assets/hintergruende/projekterfahrung-waben-dezent.svg"), var(--topic-image);
}
@media(max-width:720px) {
  body[data-page="leistungen"] { --bar-background: linear-gradient(rgba(66,74,82,.93), rgba(66,74,82,.93)), linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), var(--topic-image); }
  body[data-page="projekterfahrung"] { --bar-background: linear-gradient(rgba(66,74,82,.88), rgba(66,74,82,.88)), linear-gradient(90deg, rgba(66,74,82,.52), rgba(66,74,82,.25) 62%, rgba(66,74,82,.12)), url("assets/hintergruende/projekterfahrung-waben-dezent.svg"), var(--topic-image); }
  body[data-page="leistungen"] > .header,
  body[data-page="leistungen"] > footer.wrap,
  body[data-page="projekterfahrung"] > .header,
  body[data-page="projekterfahrung"] > footer.wrap {
    background-size: auto 100vh;
    background-position: var(--mobile-background-position, center) center;
  }
}

/* Rechtliche Seiten: sehr dezente Motive, mit deckenden synchronen Leisten. */
body[data-legal-background="impressum"] { --topic-image: url("assets/hintergruende/impressum.webp"); }
body[data-legal-background="datenschutz"] { --topic-image: url("assets/hintergruende/datenschutz.webp"); }
body.has-topic-background[data-page="rechtliches"]::before { opacity: .07; }
body.has-topic-background[data-page="rechtliches"] > .header,
body.has-topic-background[data-page="rechtliches"] > footer.wrap {
  background-color: #424a52;
  background-image: linear-gradient(rgba(66,74,82,.93),rgba(66,74,82,.93)), linear-gradient(90deg,rgba(66,74,82,.52),rgba(66,74,82,.25) 62%,rgba(66,74,82,.12)),var(--topic-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media(max-width:720px) {
  body.has-topic-background[data-page="rechtliches"]::before { opacity: .05; background-size: cover; background-position: center; }
  body.has-topic-background[data-page="rechtliches"] > .header,
  body.has-topic-background[data-page="rechtliches"] > footer.wrap {
    background-image: linear-gradient(rgba(66,74,82,.95),rgba(66,74,82,.95)), linear-gradient(90deg,rgba(66,74,82,.52),rgba(66,74,82,.25) 62%,rgba(66,74,82,.12)),var(--topic-image);
  }
}

/* Einheitlicher Scrollschutz auf ALLEN Seiten, inklusive kurzer Seiten auf Mobilgeraeten. */
body.has-topic-background {
  --bar-scene-opacity: .18;
  --bar-scene-images: linear-gradient(90deg,rgba(66,74,82,.52),rgba(66,74,82,.25) 62%,rgba(66,74,82,.12)),var(--topic-image);
  --bar-scene-size: cover;
  --bar-scene-position: center;
}
body[data-page="start"] { --bar-scene-opacity: .14; }
body[data-page="leistungen"] { --bar-scene-opacity: .09; }
body[data-page="zusammenarbeit"] { --bar-scene-images: linear-gradient(90deg,rgba(66,74,82,.52),rgba(66,74,82,.25) 62%,rgba(66,74,82,.12)),url("assets/hintergruende/zusammenarbeit-puzzle-dezent.svg"),var(--topic-image); }
body[data-page="projekterfahrung"] { --bar-scene-images: linear-gradient(90deg,rgba(66,74,82,.52),rgba(66,74,82,.25) 62%,rgba(66,74,82,.12)),url("assets/hintergruende/projekterfahrung-waben-dezent.svg"),var(--topic-image); }
body[data-page="kontakt"] { --bar-scene-images: linear-gradient(90deg,rgba(66,74,82,.52),rgba(66,74,82,.25) 62%,rgba(66,74,82,.12)),url("assets/hintergruende/kontakt-brief-dezent.svg"),var(--topic-image); }
body[data-page="ueber-uns"] {
  --bar-scene-images: linear-gradient(90deg,rgba(66,74,82,.52),rgba(66,74,82,.25) 62%,rgba(66,74,82,.12)),url("assets/hintergruende/ueber-uns-hand-ringe-ausschnitt.svg");
  --bar-scene-size: cover,min(42vw,560px) auto;
  --bar-scene-position: center,left 12px bottom 4px;
}
body[data-page="rechtliches"] { --bar-scene-opacity: .07; }
body.has-topic-background[data-page] > .header,
body.has-topic-background[data-page] > footer.wrap {
  background-color: #424a52;
  background-image: linear-gradient(rgba(66,74,82,calc(1 - var(--bar-scene-opacity))),rgba(66,74,82,calc(1 - var(--bar-scene-opacity)))),var(--bar-scene-images);
  background-size: cover,var(--bar-scene-size);
  background-position: center,var(--bar-scene-position);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media(max-width:720px) {
  body.has-topic-background { --bar-scene-opacity: .12; --bar-scene-size: auto 100vh; --bar-scene-position: var(--mobile-background-position,center) center; }
  body[data-page="leistungen"] { --bar-scene-opacity: .07; }
  body[data-page="rechtliches"] { --bar-scene-opacity: .05; --bar-scene-size: cover; --bar-scene-position: center; }
  body[data-page="ueber-uns"] { --bar-scene-size: cover,min(80vw,440px) auto; --bar-scene-position: center,left 8px bottom 4px; }
}