/*
   =====================================================
    Freiwillige Feuerwehr Grasberg
   =====================================================
*/

:root{
  --brand-red: #CC0605;
  --brand-red-dark: #AB2524;
  --brand-blue-1: #0e1d4a;
  --brand-blue-2: #1d3b88;
  --brand-blue-3: #2f58c6;
  --brand-blue-4: #7696FD;
  --text-on-dark: #ffffff;
  --text-dark: #1f2430;
  --text-muted: #6f7a8a;
  --brand-light-red: #E19094;
  --container-max: 1200px;
  --background-color: #f6f7fb;

  --font-family-title: 'Open Sans', sans-serif;
}

/* Base reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 "Open Sans", sans-serif;
  color:var(--text-dark);
  background:var(--background-color);
}

/* =====================================================
   START: ffw-grasberg_mobile.css (mobile-first Styles)
   ===================================================== */

/* ---------------------------------------------
   Global containers (Contao)
   --------------------------------------------- */
#wrapper {
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#container {
  flex: 1;
}

#container > .inside,
#extended_header > .inside,
#extended_footer > .inside,
#main > .inside {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.content-headline {
  margin: 0
}

/* ---------------------------------------------
   HERO / HEADER
   --------------------------------------------- */
#extended_header {
  position: relative;
  pointer-events: none;
  margin-top: 0;
}

#extended_header .inside {
  width: 100%;
  pointer-events: auto;
  z-index: 2;
}

#title_picture_desktop, #teaser, #slogan, #welcome_title, #statistic {
  display: none;
}

#title_site {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 50px; /* Platz für den Burger → anpassen falls nötig */
  background-color: var(--brand-red);
  color: var(--text-on-dark);
  justify-content: center;
  font-size: small;
  font-weight: normal;
  min-width: 100%;
  min-height: 50px;
  box-shadow: 0 16px 32px -8px rgba(12, 12, 13, 0.4);
}

#title_picture {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1rem;
  background: var(--brand-blue-4);
}

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

/* ---------------------------------------------
   TOP NAV (inside header)
   --------------------------------------------- */
/* Grundstyles */
#navigation {
  position: relative;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#navigation .invisible {
  position: absolute;
  left: -9999px;
}

/* Reset / Basis */
#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation a,
#navigation strong.active,
#navigation strong.forward.trail.submenu {
  text-decoration: none;
  display: block;
}


/* -----------------------------
   Hamburger (mobile-first)
   ----------------------------- */

/* Checkbox unsichtbar machen */
.nav-toggle {
  position: absolute;
  left: -9999px;
}

/* Hamburger-Icon */
.nav-toggle-label {
  position: absolute;
  left: 10px; /* Abstand zum linken Rand */
  top: 8em;
  transform: translateY(-50%);
  z-index: 50; /* über allem */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
  padding: 10px;
  box-sizing: content-box;
}

.nav-toggle-label span {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: #333;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Mobile: Menü standardmäßig zu */
#navigation .level_1 {
  display: none;
  flex-direction: column;
  background: #fff;
}

/* Wenn Checkbox angehakt -> Menü anzeigen
   (input.nav-toggle ~ nav#navigation .level_1) */
.nav-toggle:checked ~ #navigation .level_1 {
  display: flex;
}

/* Mobile: Einträge vertikal */
#navigation .level_1 > li > a,
#navigation .level_1 > li > strong.active,
#navigation .level_1 > li > strong.forward.trail.submenu {
  padding: 12px 16px;
  color: #333;
}

#navigation .level_1 > li > a:hover,
#navigation .level_1 > li > a:focus {
  background: #f3f3f3;
}

/* Active-Item */
#navigation .level_1 > li > strong.active,
#navigation .level_1 > li > strong.forward.trail.submenu {
  background: var(--text-muted);
  color: #fff;
}

/* Submenüs mobile einfach untereinander anzeigen */
#navigation .level_2 {
  display: block;
  padding-left: 16px;
  background: #fafafa;
  border-top: 1px solid #eee;
}

#navigation .level_2 a,
#navigation .level_2 strong.active {
  padding: 10px 16px;
  font-size: 0.95rem;
  color: #333;
  font-weight: normal;
}

#navigation .level_2 a:hover,
#navigation .level_2 a:focus {
  background: #ececec;
}

#navigation .level_2 strong.active {
  color: var(--brand-red);
  border-left: 3px solid var(--brand-red);
  font-weight: 600;
}

/* Hamburger-Animation (optional) */
.nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.img-left-floated img {
  margin-left: 0;
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
  display: inline; /* Überschreibt das 'block' von oben, damit der Text daneben passt */
}

.media--left figure {
  margin: 0 0 1rem;
}

.media--left img {
  float: none;
  display: block;
  margin: 0 auto 1rem;
}

.media--right figure {
  margin: 0 0 1rem;
}

.media--right img {
  float: none;
  display: block;
  margin: 0 auto 1rem;
}

.media--above img {
  float: inherit;
  margin: 0 1.5rem 1rem 0;
}

.media--below {
  display: flex;
  flex-direction: column;
}

.media--below figure {
  order: 2;
  margin: 1rem 0 0 0;
}

.media--below .rte {
  order: 1;
}

.media--below img {
  float: none;
}

.negative-margin-top {
  margin-top: -1em;
}

/* ---------------------------------------------
   MAIN CONTENT
   --------------------------------------------- */

/* --- Content-Text Card (nur im Main-Bereich) --- */
#main .content-text {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
}

/* --- Headings --- */
#main .content-text h1 {
  font-size: 1.35rem;
  color: var(--brand-blue-1);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--brand-red);
  line-height: 1.3;
}

#main .content-text h2 {
  font-size: 1.25rem;
  color: var(--brand-blue-1);
  margin: 1.5rem 0 0.75rem;
  line-height: 1.3;
}

#main .content-text h3 {
  font-size: 1.15rem;
  color: var(--brand-blue-1);
  font-weight: 700;
  margin: 2rem 0 0.75rem;
  padding: 0;
  border: none;
  line-height: 1.3;
}

#main .content-text h3 strong {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

#main .content-text h4 {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin: 2rem 0 0.5rem;
  padding: 0;
  border: none;
  line-height: 1.3;
}

/* --- Paragraphs --- */
#main .content-text .rte p {
  color: var(--text-dark);
  line-height: 1.7;
  margin: 0 0 1rem;
}

/* --- p.p4: normaler Text (Sub-Header-Style jetzt auf h4) --- */

/* --- Lists --- */
#main .content-text .rte ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#main .content-text .rte ul li {
  background: var(--background-color);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--brand-blue-3);
}

#main .content-text .rte ul li p {
  margin: 0;
  line-height: 1.6;
}

/* --- Person tables (mobile: stacked cards) --- */
#main .content-text .rte table {
  width: 100%;
  border-collapse: collapse;
}

#main .content-text .rte tbody {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#main .content-text .rte tr {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--background-color);
  border-radius: 10px;
  padding: 0.75rem;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s, transform 0.2s;
}

#main .content-text .rte tr:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

#main .content-text .rte td {
  display: block;
  padding: 0;
}

#main .content-text .rte td:first-child {
  flex-shrink: 0;
  width: 64px;
}

#main .content-text .rte td img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#main .content-text .rte td:last-child {
  flex: 1;
  min-width: 0;
}

#main .content-text .rte td p {
  margin: 0;
  line-height: 1.6;
}

#main .content-text .rte td p a {
  color: var(--brand-blue-3);
  text-decoration: none;
  word-break: break-all;
}

#main .content-text .rte td p a:hover {
  color: var(--brand-red);
  text-decoration: underline;
}

/* --- Responsive Table (Bild + Text, nie über content-text hinaus) --- */
#main .content-text .rte table.responsive_table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
}

#main .content-text .rte table.responsive_table tbody {
  display: block;
}

#main .content-text .rte table.responsive_table tr {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0.75rem;
  background: var(--background-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#main .content-text .rte table.responsive_table tr:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#main .content-text .rte table.responsive_table td {
  display: block;
  padding: 0;
  width: 100%;
}

#main .content-text .rte table.responsive_table td:first-child {
  width: 100%;
  flex-shrink: 0;
}

#main .content-text .rte table.responsive_table td img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
  display: block;
}

#main .content-text .rte table.responsive_table td:last-child {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem 1rem;
}

#main .content-text .rte table.responsive_table td p {
  margin: 0 0 0.5rem;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#main .content-text .rte table.responsive_table td ul {
  margin: 0;
}

@media (min-width: 768px) {
  #main .content-text .rte table.responsive_table tr {
    flex-direction: row;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
  }

  #main .content-text .rte table.responsive_table td:first-child {
    width: 300px;
    flex-shrink: 0;
  }

  #main .content-text .rte table.responsive_table td img {
    width: 300px;
    height: auto;
    border-radius: 8px;
  }

  #main .content-text .rte table.responsive_table td:last-child {
    padding: 0;
  }

  #main .content-text .rte table.responsive_table td p {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  #main {
    margin-top: 2.25rem;
    min-height: 100%;
  }
}

/* ---------------------------------------------
   FOOTER (mobile = gestapelt & zentriert)
   --------------------------------------------- */
#extended_footer {
  background: var(--brand-light-red);
  color: var(--text-dark);
  padding: 1.5rem 1rem;
  margin-top: 1rem;
}

#extended_footer .inside {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* obere Linkzeile */
#legal_links {
  text-align: center;
}

#legal_links .rte td {
  text-align: center;
  font-weight: normal;
  color: var(--text-dark);
  padding: .25rem .5rem;
}

/* untere Zeile */
#copyright,
#social-media {
  display: flex;
  align-items: center;
}

#extended_footer .mod_article.block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#copyright .rte {
  flex: 1;
  text-align: center;
}

/* mobile */
#copyright p {
  margin: 0;
  line-height: 1.4;
  font-size: 0.95rem;
}

#social-media {
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: center;
}

/* mobile */

#social-media img {
  display: block;
  width: 22px;
  height: 22px;
  filter: brightness(0);
  transition: opacity .2s ease-in-out;
}

#social-media a:hover img {
  opacity: .5;
}

/* Container der unteren Zeile */
#extended_footer .content-text:last-of-type {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------------------------------------------
   Utility helpers
   --------------------------------------------- */

.font-white {
  color: #fff !important
}

.blued {
  outline: 0;
}

/* ===== PATCH: Teaser-Video als Header-Hintergrund + Blautönung ===== */
#extended_header #teaser {
  position: absolute;
  inset: 0;
  margin: 0;
  max-width: none;
  border-radius: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

#extended_header #teaser figure {
  height: 100%;
  margin: 0
}

#extended_header #teaser video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  display: none; /* mobile: Video-Hintergrund ebenfalls aus */
}

#teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-blue-4);
  z-index: 2;
  pointer-events: none;
}

#slogan {
  display: none;
}

#welcome_title {
  margin-top: .25rem
}

#title_picture {
  position: relative; /* FIX: Relative Position hinzufügen */
  z-index: 10; /* FIX: Hoher z-index um über dem teaser zu sein */
}

/* ---------------------------------------------
   FORM (mobile-first)
   --------------------------------------------- */
.ce_form {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
}

.ce_form h1 {
  font-size: 1.4rem;
  margin: 0 0 1.25rem;
  color: var(--brand-blue-1);
}

.ce_form .formbody {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ce_form .widget label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.35rem;
}

.ce_form .widget label .mandatory {
  color: var(--brand-red);
  margin-left: 2px;
}

.ce_form .widget input.text,
.ce_form .widget textarea.textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1.5px solid #cfd5e0;
  border-radius: 8px;
  background: #f9fafb;
  color: var(--text-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ce_form .widget input.text:focus,
.ce_form .widget textarea.textarea:focus {
  outline: none;
  border-color: var(--brand-blue-3);
  box-shadow: 0 0 0 3px rgba(47, 88, 198, 0.15);
  background: #fff;
}

.ce_form .widget textarea.textarea {
  resize: vertical;
  min-height: 120px;
}

.ce_form .widget-submit {
  margin-top: 0.5rem;
}

.ce_form .widget-submit .submit {
  display: inline-block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--brand-red);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.ce_form .widget-submit .submit:hover {
  background: var(--brand-red-dark);
}

.ce_form .widget-submit .submit:active {
  transform: scale(0.98);
}

.ce_form .widget-submit .submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------------------------------------------
   NEWS LIST empty state (mobile-first)
   --------------------------------------------- */
.mod_newslist p.empty {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------------------------------------------
   EVENT LIST (mobile-first)
   --------------------------------------------- */
.mod_eventlist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mod_eventlist .event {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--brand-red);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mod_eventlist .event h1 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--brand-blue-1);
  line-height: 1.3;
}

.mod_eventlist .event .info {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mod_eventlist .event .info::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236f7a8a'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.mod_eventlist .event .location {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mod_eventlist .event .location::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236f7a8a'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.mod_eventlist .event .ce_text {
  margin: 0.25rem 0 0;
}

.mod_eventlist .event .ce_text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dark);
  line-height: 1.5;
}

/* Event-Karte mit Bild: Bild links, Rest rechts */
.mod_eventlist .event:has(.image_container) {
  position: relative;
  padding-left: calc(80px + 1.25rem + 0.75rem);
  min-height: calc(80px + 1.25rem + 1rem);
}

.mod_eventlist .event .ce_text .image_container {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  margin: 0;
}

.mod_eventlist .event .ce_text .image_container.float_left {
  float: none;
}

.mod_eventlist .event .ce_text img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* ---------------------------------------------
   DOWNLOAD (mobile-first) – Card-Design wie News/Events
   --------------------------------------------- */
.content-download {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--brand-red);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.content-download figure {
  order: -1;
  margin: 0;
  flex-shrink: 0;
}

.content-download img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
}

.content-download a {
  color: var(--brand-blue-1);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.content-download a:hover {
  color: var(--brand-red);
  text-decoration: underline;
}

/* ---------------------------------------------
   TAG CHAIN (mobile-first)
   --------------------------------------------- */
.tag-chain {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-chain-item {
  display: inline-flex;
}

.tag-chain-item a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-blue-1);
  background: #e8ecf4;
  border-radius: 999px;
  text-decoration: none;
  pointer-events: none;
}

/* ---------------------------------------------
   TAG CLOUD (mobile-first) – gleicher Style wie tag-chain
   --------------------------------------------- */
.tagcloud ul.cloud {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.tagcloud ul.cloud li {
  display: inline-flex;
}

.tagcloud ul.cloud li a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-blue-1);
  background: #e8ecf4;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0;
}

.tagcloud ul.cloud li a::after {
  content: attr(title);
  font-size: 0.8rem;
}

.tagcloud ul.cloud li.active a {
  background: var(--brand-red);
  color: #fff;
}

.tagcloud .reset a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: #e8ecf4;
  border-radius: 999px;
  text-decoration: none;
  border: 1px dashed var(--text-muted);
}

/* =====================================================
   ENDE: ffw-grasberg_mobile.css
   ===================================================== */

/* =====================================================
   START: ffw-grasberg_desktop.css (Desktop-Overrides)
   ===================================================== */

@media (min-width: 768px) {

  #extended_header:has(#header_collapsed) {
    min-height: 12rem;
    transition: min-height 0.3s ease;
  }
  #header_collapsed {
    background-color: var(--brand-red);
    height: 10vh;
  }

  #title_picture {
    display: none !important;
  }

  #title_picture_desktop, #teaser, #slogan, #welcome_title, #statistic {
    display: flex;
  }

  /* Logos und Schlagworte im Header */
  #title_picture_desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
    z-index: 5;
    order: 1; /* Logos nach oben */
  }

  #title_picture_desktop figure {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* Logos links und rechts positionieren */
  #title_picture_desktop figure::before,
  #title_picture_desktop figure::after {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Das Bild (Slogan) in die Mitte */
  #title_picture_desktop figure img {
    order: 2;
    height: auto;
    width: 100%;
  }

  #title_site {
    position: fixed;
    left: 0;
    top: 0;

    min-width: 4rem !important;
    height: 25rem !important;
    box-sizing: border-box;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0;
    z-index: 9999;
    background-color: var(--brand-red);
    color: #fff;
    transform: rotate(180deg);
  }

  #title_site span {
    display: block;
    font-family: var(--font-family-title), sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    text-transform: none;
    letter-spacing: 1px;
  }

  /* Hamburger und Checkbox komplett verstecken */
  .nav-toggle,
  .nav-toggle-label {
    display: none !important;
  }

  /* Hauptmenü horizontal erzwingen */
  .mod_navigation ul.level_1,
  #navigation ul.level_1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    background: transparent;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 10;
  }

  #navigation {
    order: 3; /* Navigation direkt unter Logos */
  }

  /* Die Hauptpunkte nebeneinander */
  .mod_navigation ul.level_1 > li,
  #navigation ul.level_1 > li {
    display: block !important;
    position: relative; /* Wichtig für die Positionierung des Dropdowns */
    flex: 0 1 auto;
  }

  /* Links und aktive Punkte stylen */
  .mod_navigation .level_1 > li > a,
  .mod_navigation .level_1 > li > strong.active,
  .mod_navigation .level_1 > li > strong.forward.trail.submenu,
  #navigation .level_1 > li > a,
  #navigation .level_1 > li > strong.active,
  #navigation .level_1 > li > strong.forward.trail.submenu {
    padding: 10px 15px;
    white-space: nowrap;
    color: #fff;
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
  }

  /* Individuelle Icons können hier gesetzt werden, wenn die Dateien existieren */
  .mnu_home > a::before,
  .mnu_home > strong.active::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .mnu_aktuelles > a::before,
  .mnu_aktuelles > strong.active::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
  }

  .mnu_termine > a::before,
  .mnu_termine > strong.active::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .mnu_ortswehren > a::before,
  .mnu_ortswehren > strong.active::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_405_123)'%3E%3Cpath d='M9.93066 15.3262C9.93066 11.7227 15.0625 9.34473 15.0625 5.41406C15.0625 3.11426 13.4023 1.11719 13.1533 1C13.1729 1.16113 13.1826 1.32715 13.1826 1.48828C13.1826 5.98535 6 9.00293 6 14.6035C6 17.0352 7.57227 18.4707 9.24707 19.8916C12.4258 22.1719 13.0605 23.3779 13.0605 24.1201C13.0605 24.6133 12.8262 24.9502 12.8262 25.209C13.4658 24.3936 13.6758 23.6514 13.6807 22.9434C13.6807 21.498 12.6211 20.1943 11.5225 18.7197C10.7412 17.6309 9.93066 16.6396 9.93066 15.3262ZM19.9551 13.4219C19.3643 10.1602 16.1465 7.34766 15.3311 7.03027L15.5264 7.38184C15.6436 7.63086 15.6924 7.91406 15.6924 8.2168C15.6924 10.3994 13.0459 13.6465 12.9287 13.915C12.8213 14.1641 12.7725 14.4277 12.7725 14.6865C12.7725 15.668 13.5146 16.7422 13.6465 16.7422C13.7637 16.7422 16.4102 14.0371 16.4834 12.46C16.7959 13.0312 16.9277 13.5635 16.9277 14.0908C16.9277 16.1025 14.8867 18.8223 14.8867 18.8223C14.8867 19.3887 16.4443 21.4199 16.6201 21.4199C16.6689 21.4199 16.7275 21.3516 16.7764 21.3027C18.627 19.3838 20.0625 17.1523 20.0625 14.623C20.0625 14.2324 20.0283 13.832 19.9551 13.4219Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_405_123'%3E%3Crect width='25' height='25' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
  }

  .mnu_nachwuchs > a::before,
  .mnu_nachwuchs > strong.active::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_405_60)'%3E%3Cpath d='M9.85936 3.40332C9.85936 1.46167 11.4333 -0.112305 13.375 -0.112305C15.3166 -0.112305 16.8906 1.46167 16.8906 3.40332C16.8906 5.34492 15.3166 6.91895 13.375 6.91895C11.4333 6.91895 9.85936 5.34492 9.85936 3.40332ZM22.2923 3.47036C21.6822 2.86016 20.6928 2.86016 20.0827 3.47036L15.8528 7.7002H10.8972L6.66732 3.47036C6.05717 2.86016 5.06781 2.86016 4.45765 3.47036C3.84745 4.08057 3.84745 5.06987 4.45765 5.68008L9.07811 10.3005V23.3252C9.07811 24.1881 9.77767 24.8877 10.6406 24.8877H11.4219C12.2848 24.8877 12.9844 24.1881 12.9844 23.3252V17.8564H13.7656V23.3252C13.7656 24.1881 14.4652 24.8877 15.3281 24.8877H16.1094C16.9723 24.8877 17.6719 24.1881 17.6719 23.3252V10.3005L22.2923 5.68003C22.9025 5.06982 22.9025 4.08057 22.2923 3.47036Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_405_60'%3E%3Crect width='25' height='25' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .mnu_abteilungen > a::before,
  .mnu_abteilungen > strong.active::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.0546 18.025L12.4598 22.8014C12.3467 22.85 12.2248 22.875 12.1017 22.875C11.9785 22.875 11.8567 22.85 11.7435 22.8014L2.14832 18.025C1.953 17.9274 1.953 17.7672 2.14832 17.6691L4.44617 16.5275C4.5595 16.4789 4.68151 16.4539 4.80481 16.4539C4.92811 16.4539 5.05012 16.4789 5.16345 16.5275L11.7435 19.799C11.8566 19.8478 11.9785 19.8729 12.1017 19.8729C12.2249 19.8729 12.3467 19.8478 12.4598 19.799L19.0399 16.5275C19.1532 16.4789 19.2751 16.4539 19.3983 16.4539C19.5215 16.4539 19.6435 16.4789 19.7567 16.5275L22.0546 17.6715C22.2523 17.7672 22.2523 17.9274 22.0546 18.025ZM22.0546 11.3585L19.7567 10.2145C19.6435 10.1659 19.5215 10.1409 19.3983 10.1409C19.2751 10.1409 19.1532 10.1659 19.0399 10.2145L12.4598 13.4899C12.3466 13.5382 12.2248 13.5631 12.1017 13.5631C11.9786 13.5631 11.8567 13.5382 11.7435 13.4899L5.16345 10.2145C5.05012 10.1659 4.92811 10.1409 4.80481 10.1409C4.68151 10.1409 4.5595 10.1659 4.44617 10.2145L2.14832 11.3585C1.953 11.4562 1.953 11.6168 2.14832 11.7155L11.7435 16.4909C11.8567 16.5394 11.9785 16.5645 12.1017 16.5645C12.2248 16.5645 12.3467 16.5394 12.4598 16.4909L22.0546 11.7155C22.2523 11.6168 22.2523 11.4567 22.0546 11.3585ZM2.14832 5.80579L11.743 10.2145C11.9733 10.3048 12.2291 10.3048 12.4594 10.2145L22.0546 5.80579C22.2499 5.71497 22.2499 5.56702 22.0546 5.47669L12.4594 1.06849C12.2293 0.97717 11.9731 0.97717 11.743 1.06849L2.14832 5.47669C1.95056 5.56702 1.95056 5.71497 2.14832 5.80579Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .mnu_kontakt > a::before,
  .mnu_kontakt > strong.active::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_405_129)'%3E%3Cpath d='M24.5264 10.1914C24.7168 10.04 25 10.1816 25 10.4209V20.4062C25 21.7002 23.9502 22.75 22.6562 22.75H2.34375C1.0498 22.75 0 21.7002 0 20.4062V10.4258C0 10.1816 0.27832 10.0449 0.473633 10.1963C1.56738 11.0459 3.01758 12.125 7.99805 15.7432C9.02832 16.4951 10.7666 18.0771 12.5 18.0674C14.2432 18.082 16.0156 16.4658 17.0068 15.7432C21.9873 12.125 23.4326 11.041 24.5264 10.1914ZM12.5 16.5C13.6328 16.5195 15.2637 15.0742 16.084 14.4785C22.5635 9.77637 23.0566 9.36621 24.5508 8.19434C24.834 7.97461 25 7.63281 25 7.27148V6.34375C25 5.0498 23.9502 4 22.6562 4H2.34375C1.0498 4 0 5.0498 0 6.34375V7.27148C0 7.63281 0.166016 7.96973 0.449219 8.19434C1.94336 9.36133 2.43652 9.77637 8.91602 14.4785C9.73633 15.0742 11.3672 16.5195 12.5 16.5Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_405_129'%3E%3Crect width='25' height='25' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .mod_navigation .level_1 > li > a:hover,
  .mod_navigation .level_1 > li:hover > a,
  #navigation .level_1 > li > a:hover,
  #navigation .level_1 > li:hover > a {
    background: rgba(255, 255, 255, 0.1);
  }

  /* DROPWDOWN (Level 2) */
  .mod_navigation ul.level_2,
  #navigation ul.level_2 {
    position: absolute;
    top: 100%; /* Direkt unter dem Hauptpunkt */
    left: 0;
    display: none !important; /* Initial ausblenden */
    min-width: 250px;
    background: #ffffff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    margin: 0;
    padding: 5px 0;
    list-style: none;
    border-top: 3px solid var(--brand-blue-4); /* Optische Trennung */
  }

  /* Unterpunkte untereinander */
  .mod_navigation ul.level_2 li,
  #navigation ul.level_2 li {
    display: block;
    width: 100%;
    padding: 0;
  }

  .mod_navigation ul.level_2 a,
  .mod_navigation ul.level_2 strong.active,
  #navigation ul.level_2 a,
  #navigation ul.level_2 strong.active {
    color: var(--text-dark) !important;
    padding: 10px 20px;
    display: block;
    text-align: left;
    background: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    font-weight: normal;
  }

  .mod_navigation ul.level_2 strong.active,
  #navigation ul.level_2 strong.active {
    color: var(--brand-red) !important;
    border-left: 3px solid var(--brand-red);
    font-weight: 600;
  }

  .mod_navigation ul.level_2 a:hover,
  #navigation ul.level_2 a:hover {
    background: #f5f5f5 !important;
    color: var(--brand-red) !important;
  }

  /* Dropdown beim Hover über das LI des Hauptpunkts einblenden */
  .mod_navigation ul.level_1 > li:hover > ul.level_2,
  #navigation ul.level_1 > li:hover > ul.level_2 {
    display: block !important;
  }

  #slogan {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 2.2rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    position: relative;
    z-index: 5;
    order: 3;
  }

  #welcome_title {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 2rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    position: relative;
    z-index: 5;
    order: 4;
  }

  #statistic {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--brand-red);
    color: #fff;
    padding: 15px;
    font-size: 1.1rem;
    margin: auto 0 0; /* Am unteren Rand ausrichten, h3-Default-Margin entfernen */
    width: 100%;
    position: relative;
    z-index: 5;
    order: 5;
  }

  #statistic::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* ===== PATCH: Teaser-Video als Header-Hintergrund + Blautönung ===== */
  #extended_header,
  #extended_header .inside,
  #extended_header .mod_article {
    /*background: transparent !important;*/
  }

  #extended_header {
    position: relative;
    overflow: visible;
    min-height: 37.5rem; /* 600px bei 16px Basis */
    display: flex;
    flex-direction: column;
  }

  #extended_header .inside,
  #extended_header .mod_article {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
  }

  #extended_header .inside {
    max-width: none;
    padding: 0;
  }

  #extended_header #teaser {
    position: absolute;
    inset: 0;
    margin: 0;
    max-width: none;
    border-radius: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  #teaser figure {
    height: 100%;
    width: 100%;
    margin: 0
  }

  #extended_header #teaser video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    z-index: 1;
    position: relative;
  }

  #extended_header #teaser img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    z-index: 1;
    position: relative;
  }

  #extended_header #teaser::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--brand-blue-4) 0%, var(--brand-blue-4) 70%, var(--brand-blue-4) 100%);
    mix-blend-mode: multiply;
    z-index: 2;
    pointer-events: none;
  }

  #main {
    margin-top: 2.25rem;
    min-height: 100%;
  }

  /* --- Media float (desktop) --- */
  .media--left figure {
    float: left;
    margin: 0 1.5rem 1rem 0;
  }

  .media--left img {
    float: none;
    display: block;
    margin: 0;
  }

  .media--right figure {
    float: right;
    margin: 0 0 1rem 1.5rem;
  }

  .media--right img {
    float: none;
    display: block;
    margin: 0;
  }

  /* --- Content-Text Card (desktop) --- */
  #main .content-text {
    padding: 2.5rem 3rem;
    max-width: 900px;
    margin-inline: auto;
    margin-bottom: 2rem;
  }

  #main .content-text h1 {
    font-size: 1.75rem;
  }

  #main .content-text h2 {
    font-size: 1.5rem;
  }

  #main .content-text h3 {
    font-size: 1.25rem;
  }

  /* --- Person cards: bigger on desktop, no text wrapping --- */
  #main .content-text .rte table {
    max-width: 100%;
  }

  #main .content-text .rte tr {
    padding: 1rem 1.5rem;
    gap: 1.5rem;
  }

  #main .content-text .rte td:first-child {
    width: 80px;
  }

  #main .content-text .rte td img {
    width: 80px;
    height: 80px;
  }

  #main .content-text .rte td p {
    white-space: nowrap;
  }


  #extended_footer {
    background: var(--brand-red) !important;
    color: #fff !important;
    padding: 2rem 0;
  }

  #extended_footer a {
    color: #fff !important;
  }

  #extended_footer #social-media img {
    filter: brightness(0) invert(1);
  }

  #extended_footer #copyright p {
    font-size: 0.85rem;
    opacity: 0.8;
  }

  #legal_links .rte td {
    color: #fff !important;
  }

  /* ---------------------------------------------
     EVENT LIST (desktop)
     --------------------------------------------- */
  .mod_eventlist {
    max-width: 700px;
    margin-inline: auto;
    gap: 1.25rem;
  }

  .mod_eventlist .event {
    padding: 1.25rem 1.5rem;
  }

  .mod_eventlist .event h1 {
    font-size: 1.2rem;
  }

  .mod_eventlist .event:has(.image_container) {
    padding-left: calc(120px + 1.5rem + 1.25rem);
    min-height: calc(120px + 1.25rem + 1rem);
  }

  .mod_eventlist .event .ce_text .image_container {
    left: 1.5rem;
    top: 1.25rem;
  }

  .mod_eventlist .event .ce_text img {
    width: 120px;
    height: 120px;
  }

  /* ---------------------------------------------
     FORM (desktop)
     --------------------------------------------- */
  .ce_form {
    max-width: 900px;
    margin-inline: auto;
    padding: 2.5rem 3rem;
    margin-bottom: 2rem;
  }

  .ce_form h1 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }

  .ce_form .formbody {
    gap: 1.25rem;
  }

  .ce_form .widget-submit .submit {
    width: auto;
    min-width: 180px;
  }

  .info {
    width: 100%;
    text-align: right;
    font-size: smaller;
  }

  /* --- NEWS LIST empty state (desktop) --- */
  .mod_newslist:has(> p.empty) {
    max-width: 900px;
  }

  .mod_newslist p.empty {
    padding: 2.5rem 3rem;
    margin-bottom: 2rem;
  }

  /* ---------------------------------------------
     NEWS LIST (desktop) – Card-Design wie Events
     --------------------------------------------- */
  .mod_newslist {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 700px;
    margin-inline: auto;
  }

  .mod_newslist .layout_full {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--brand-red);
    overflow: hidden;
  }

  .mod_newslist .layout_full h1 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 0.25rem;
    color: var(--brand-blue-1);
  }

  .mod_newslist .layout_full .info {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
  }

  .mod_newslist .layout_full .media--left figure {
    float: left;
    margin: 0 1.5rem 1rem 0;
  }

  .mod_newslist .layout_full .media--left img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
  }

  .layout_full {
    overflow: auto;
  }

  h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  /* Pagination */
  .pagination {
    text-align: center;
    margin-bottom: 2rem;
  }

  .pagination p {
    margin-bottom: 0.25rem;
  }

  .pagination ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
  }

  .pagination a {
    color: var(--text-dark);
    text-decoration: none;
  }

  .pagination a:hover {
    color: var(--brand-red);
  }

  .pagination .active {
    color: var(--brand-red);
  }

  /* ---------------------------------------------
     DOWNLOAD (desktop) – Card-Design wie News/Events
     --------------------------------------------- */
  .content-download {
    max-width: 700px;
    margin-inline: auto;
    padding: 1.25rem 1.5rem;
  }

  .content-download img {
    width: 120px;
    height: 120px;
  }

  .content-download a {
    font-size: 1.1rem;
  }

  /* ---------------------------------------------
     TAG CHAIN (desktop)
     --------------------------------------------- */
  .tag-chain {
    margin-top: 1rem;
  }

  .tag-chain-item a {
    font-size: 0.85rem;
    padding: 0.3rem 0.9rem;
    transition: background-color 0.2s;
  }

  /* ---------------------------------------------
     TAG CLOUD (desktop)
     --------------------------------------------- */
  .tagcloud ul.cloud li a {
    padding: 0.3rem 0.9rem;
  }

  .tagcloud ul.cloud li a::after {
    font-size: 0.85rem;
  }
}

/* =====================================================
   ENDE: ffw-grasberg_desktop.css
   ===================================================== */