/* Dezentes Gruen fuer den Themenbereich 9/11 */
:root {
  --green-soft: #deede3;
  --green-soft-hover: #c9e1d1;
  --green-border: #78a589;
  --green-line: #b7cfbf;
  --green-ink: #294437;
  --green-link: #356f50;
  --green-link-hover: #244f38;
  --green-shadow: rgba(53, 105, 74, 0.12);
}

.green-hero {
  position: relative;
  box-sizing: border-box;
  width: min(92%, 980px);
  margin: 18px auto 24px;
  padding: 24px 34px 22px;
  overflow: hidden;
  text-align: left;
  background: var(--green-soft);
  border-top: 3px solid var(--green-border);
  border-bottom: 1px solid var(--green-line);
  border-radius: 6px;
  box-shadow: 0 8px 20px var(--green-shadow);
}

.green-hero::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -52px;
  width: 150px;
  height: 150px;
  border: 22px solid rgba(120, 165, 137, 0.28);
  border-radius: 50%;
}

.green-hero__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 5px;
  color: var(--green-link);
  font: 700 0.82rem/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.green-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--green-ink);
  font: 700 clamp(1.65rem, 3.1vw, 2.55rem)/1.15 Georgia, "Times New Roman", serif;
}

.green-hero__subtitle {
  position: relative;
  z-index: 1;
  margin: 9px 0 0;
  color: #496052;
  font: 400 1rem/1.45 Arial, Helvetica, sans-serif;
}

td.Bereich,
p.Bereich,
h1.Bereich,
h2.Bereich,
h3.Bereich,
.Bereich2,
.Bereich3,
td[bgcolor="#FEFAC7"],
td[bgcolor="#fefac7"] {
  color: var(--green-ink) !important;
  background: var(--green-soft) !important;
  border-color: var(--green-border) !important;
  border-radius: 6px;
  box-shadow: 0 4px 12px var(--green-shadow);
}

td.Bereich {
  border-top: 2px solid var(--green-border) !important;
  border-bottom: 1px solid var(--green-line) !important;
}

a.linkGreen,
td[bgcolor="#FEFAC7"] a,
td[bgcolor="#fefac7"] a,
font[color="#1C33A5"] a,
font[color="#1c33a5"] a {
  color: var(--green-link) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
}

a.linkGreen:hover,
td[bgcolor="#FEFAC7"] a:hover,
td[bgcolor="#fefac7"] a:hover,
font[color="#1C33A5"] a:hover,
font[color="#1c33a5"] a:hover {
  color: var(--green-link-hover) !important;
  background: var(--green-soft-hover);
}

font[color="#1C33A5"],
font[color="#1c33a5"] {
  color: var(--green-link) !important;
}

.Bereich font[color="#FF8000"],
.Bereich font[color="#ff8000"] {
  color: #ff8000 !important;
}

@media (max-width: 640px) {
  .green-hero {
    width: 94%;
    padding: 19px 22px 18px;
  }
}