/* --- CONFIGURATION --- */
:root {
  --site-width: 960px;
  --sidebar-width: 235px;
  --header-height: 160px;
  --content-padding-left-right: 22px;
  --mobile-header-height: 60px;
  --height-for-back-to-top: 50px;
  --background: #f6f6f6;
  --primary-green: #2e7d32;
  --swv-red: #ee1847;
  --anim-speed: 0.35s;
  --menu-level1-border-width: 21px;
  --menu-level1-border-color: #879da9;
  --menu-level1-border-color-hover: #779c5a;
  --menu-level1-bg: #a3b2ba;
  --menu-level1-bg-hover: #c3e0a4;
  --menu-level2-bg: #acbcc4;
  --menu-level2-bg-hover: #cce5b2;
  --menu-font-color: #fff;
  --menu-font-color-hover: #2a6000;
  --menu-item-font-size: 0.9375rem;
  --h2-color: #6d835b;
  --paragraph-color: #686868;
  --paragraph-font-size: 0.9375rem;
  --link-hover-bg: #f0f4e3;
  --scrollbar-track-color: #e5eccd;

  /* Z-Index Scale (100 steps per layer for flexibility) */
  --z-base:           1;       /* Normal content flow */
  --z-back-to-top:    100;     /* back to top */
  --z-sidebar:         900;    /* Sidebars */
  --z-fixed:          1000;    /* Fixed headers / Sidebars */
  --z-hamburger:      1100;    /* Hamburger */
  --z-modal-backdrop: 2000;    /* Overlay background */
  --z-modal:          2001;    /* Modal content */
  --z-tooltip:        3000;    /* Tooltips / Notifications */
}

/* --- BASE --- */
html {
  scroll-behavior: smooth;
}

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

body {
  font-family: Verdana, Tahoma, Helvetica, sans-serif;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--background) url(../images/bg/body-bg.jpg) repeat-x left bottom;
}

/*
Buttons inherit the `font-family` from
their parent (like `body`) when you
explicitly set `font-family: inherit` on
them. This overrides the browser's
default user-agent stylesheet, which
assigns specific fonts to form controls
like buttons to ensure consistent
appearance across platforms.
*/
button, input, select {
  font-family: inherit;
}

/* --- MODERN SCROLLBAR STYLING --- */

/* Target the content area and sidebar specifically to avoid affecting the browser UI */
.content,
.sidebar {

  /* 1. Firefox (Modern Standard) */
  scrollbar-width: thin; /* Options: auto, thin, none */
  
  /* Syntax: thumb color, track color */
  scrollbar-color: var(--menu-level1-border-color-hover) var(--scrollbar-track-color); 
}

/* 2. Chrome, Safari, Edge (Webkit) */
.content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}

.content::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color); /* Color of the tracking area */
  border-radius: 5px;
}

.content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--menu-level1-border-color-hover); /* Uses your defined green variable */
  border-radius: 5px;
  border: 2px solid var(--scrollbar-track-color); /* Creates padding around the thumb */
}

/* Hover effect for the thumb (Webkit only) */
.content::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #3b4e2d; /* darker green on hover */
}

/* --- TYPOGRAPHY --- */
.content h1 {
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 2.1rem;
  text-align: left;
  text-indent: 0;
  letter-spacing: 1px;
  color: var(--menu-level1-border-color-hover);
  padding: 0 0 10px 0;
  margin: 10px 0 0 0;
}

.content h1 .maintitle {
  font-weight: normal;
  color: #adc49c;
}

.content h2 {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 1.5rem;
  text-align: left;
  text-indent: 0;
  color: var(--h2-color);
  padding: 1px;
  margin: 20px 0 0 0;
}

.content p {
  margin: 2px 0 14px 0;
  font-size: var(--paragraph-font-size);
  line-height: 1.375rem;
  color: var(--paragraph-color);
  text-align: justify;   /* Justified text looks better with hyphenation, optional */

  /* Enable automatic hyphenation */
  -webkit-hyphens: auto; /* Safari, Chrome (old), iOS */
  -ms-hyphens: auto;     /* Edge (old) */
  hyphens: auto;         /* Standard for modern browsers */

  /* Recommended settings */
  overflow-wrap: break-word; /* Emergency break for extremely long words */
}

.content p.important {
  color: var(--swv-red);
}

.content p a,
.content table a {
  color: var(--menu-level1-border-color-hover);
  text-decoration: none;
  border-bottom: 1px solid #2a6000;
  transition: background-color var(--anim-speed) ease;
}

.content p a:hover,
.content table a:hover {
  background-color: var(--link-hover-bg);
}

.swv-list .active {
  font-style: italic;
}

.swv-list li {
  font-size: var(--paragraph-font-size);
}

.swv-list a {
  text-decoration: none;
  border-bottom: none;
  color: var(--paragraph-color);
  transition: background-color var(--anim-speed) ease;
}

.swv-list a:hover {
  background-color: var(--link-hover-bg);
}

/* --- TABLE --- */
.content table th, .content table td, {
  font-size: var(--paragraph-font-size);
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

/* --- Base style for all screens --- */
.swv-table-1, .swv-table-2 {
  width: auto;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.8);
}

.swv-table-1 thead tr {
  background-color: var(--menu-level1-border-color-hover);
  color: #ffffff;
  text-align: left;
}

.swv-table-1 th,
.swv-table-1 td,
.swv-table-2 td {
  vertical-align: top;
  padding: 12px 15px;
  border-bottom: 1px solid #dddddd;
  font-size: var(--paragraph-font-size);
}

.swv-table-1 td,
.swv-table-2 td {
  color: var(--paragraph-color);
}

.impressum .swv-table-1 tr td:first-child  {
  font-weight: bold;
}

.swv-table-2 tr td:first-child {
  font-size: 1.125rem;
  color: var(--h2-color);
}

.swv-table-2 tr td:first-child  span {
  display: block;
  font-size: 0.75rem;
}

/* Zebra stripes for better readability */
.swv-table-1 tbody tr:nth-of-type(even),
.swv-table-2 tbody tr:nth-of-type(even) {
  background-color: rgba(243, 243, 243, 0.8);
}

/* Hover effect when hovering over a row */
.swv-table-1 tbody tr:hover,
.swv-table-2 tbody tr:hover {
  background-color: #f1f1f1;
  cursor: default;
}

.swv-table-1 tbody tr:last-of-type,
.swv-table-2 tbody tr:last-of-type {
  border-bottom: 2px solid var(--menu-level1-border-color-hover);
}

/* --- Responsive design (mobile view) --- */
@media screen and (max-width: 640px) {
  /* Make table, rows, and cells block elements */
  .swv-table-1,
  .swv-table-1 tbody,
  .swv-table-1 tr,
  .swv-table-1 td {
    display: block;
    width: 100%;
  }

  /* Hide table header on mobile (using data-label instead) */
  .swv-table-1 thead {
    display: none;
  }

  /* Style each row like a card */
  .swv-table-1 tr {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* Style table cells */
  .swv-table-1 td {
    text-align: left;
    padding-left: 33%; /* Space for the label on the left side */
    position: relative;
    border-bottom: 1px solid #eee;
  }

    .swv-table-2 tr td:first-child {
      font-size: var(--paragraph-font-size);
      color: var(--paragraph-color);
    }

    .swv-table-2 tr td:first-child  span {
      font-size: var(--paragraph-font-size);
    }

  .swv-table-2 td {
    padding: 4px 2px;
  }

  .swv-table-1 td,
  .swv-table-2 td {
    /* Enable automatic hyphenation */
    -webkit-hyphens: auto; /* Safari, Chrome (old), iOS */
    -ms-hyphens: auto;     /* Edge (old) */
    hyphens: auto;         /* Standard for modern browsers */

    /* Recommended settings */
    overflow-wrap: break-word; /* Emergency break for extremely long words */
  }

  /* Last cell doesn’t need a bottom border */
  .swv-table-1 td:last-child {
    border-bottom: none;
  }

  /* Display label (header) before cell content */
  .swv-table-1 td::before {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: #333;
    content: attr(data-label); /* Pull content from HTML attribute */
  }
}

/* --- FLOATING IMAGES --- */

/* --- Desktop View (default) --- */
figure.image-float {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
/*    
    padding: 5px;
*/
    padding: 0 0 5px 0;
    margin-bottom: 10px;
    
    width: auto;
    height: auto;
    
    display: flex;
    flex-direction: column;
}

figure.image-float img {
    width: auto;
    height: auto;
    display: block;
}

figure.image-float figcaption {
    font-size: 0.8rem;
    color: #555;
    text-align: center;
    padding-top: 5px;
    margin-top: auto;
}

.float-img-left {
    float: left;
    margin-right: 15px;
}

.float-img-right {
    float: right;
    margin-left: 15px;
}

.float-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Mobile View (responsive) --- */
@media screen and (max-width: 640px) {
    figure.image-float.float-img-left,
    figure.image-float.float-img-right {
        float: none;
        display: block;
        
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }

    figure.image-float {
        width: auto;
        height: auto;
        max-width: 100%;
        display: block;
    }

    figure.image-float img {
        width: auto;
        height: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    
    figure.image-float figcaption {
        background: #eee;
        padding: 5px;
    }
}

/* --- SITE CONTAINER --- */
.site-container {
  width: var(--site-width);
  height: 100vh;
  background: white url('../images/bg/footer-bg.png') no-repeat center bottom;  /* Image centered horizontally, fixed at the bottom */
  background-size: var(--site-width) 100px;  /* Exact size on desktop (matches the 960x100 image) */
  box-shadow: 0 0 15px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- HEADER & HAMBURGER --- */
.main-header {
  z-index: var(--z-fixed);
  height: var(--header-height);
  background-color: var(--background);
  color: white;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  cursor: pointer;
}

.header-logo {
  position: relative;
  display: grid;
  grid-template-columns: 817px 143px;   /* Left: photo width, right: logo width */
  grid-template-rows: 151px 9px;    /* Top row height + bottom bar height */
  width: var(--site-width);             /* Total width (817 + 143) */
  height: var(--header-height);     /* Total height (151 + 9) */
}

/* Left column – photo background */
.header-photo {
  grid-column: 1;
  grid-row: 1;
  background-image: url('../images/bg/header-photo.jpg');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
}

/* Right column – original logo GIF as background */
.header-logo-bg {
  grid-column: 2;
  grid-row: 1;
  background-image: url('../images/bg/header-logo.gif');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
}

/* Bottom bar – spans full width */
.header-bar {
  grid-column: 1 / span 2;        /* Span both columns */
  grid-row: 2;
  background-image: url('../images/bg/header-bar.gif');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: var(--z-hamburger);
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: white;
  margin: 5px 0;
  transition: 0.3s;
}

/* --- LAYOUT BODY --- */
.layout-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* --- SIDEBAR & MENU --- */
.sidebar {
  z-index: var(--z-sidebar);
  width: var(--sidebar-width);
  background: transparent;
/*
  border-right: 1px solid #ddd;
*/
  flex-shrink: 0;
  overflow-y: auto;
  transition: transform 0.3s ease;

  background-image: url('../images/bg/logo-vogtsburg.png');
  background-position: center calc(100% - 100px);
  background-repeat: no-repeat;
}

.side-nav {
  margin-top: 16px;
}

.sidebar-imprint {
  position: relative;
  margin: 26px 0 0 0;
  padding: 8px 10px 8px calc(var(--menu-level1-border-width) + 10px);
  font-size: 0.75rem;
  color: #000;
  background-color: var(--menu-level1-bg-hover);
}

.sidebar-imprint a {
  color: #000;
  text-decoration: none;
  background-color: var(--menu-level1-bg-hover);
  transition: background-color var(--anim-speed) ease;
}

.sidebar-imprint a:hover {
  background-color: #e9edcf;
}

/* Animated Background Hover Effect */
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 2px 10px 2px calc(var(--menu-level1-border-width) + 10px);
  background-color: var(--menu-level1-bg);
  border: none;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  font-size: var(--menu-item-font-size);
  color: var(--menu-font-color);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--anim-speed) ease, color var(--anim-speed) ease;
}

.menu-item::before,
.sidebar-imprint::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--menu-level1-border-width);
  background-color: var(--menu-level1-border-color);
}

.menu-item::before {
  background-image: url('../images/bg/menu-item-bg.png');
  background-position: center center;
  background-repeat: no-repeat;
}

.sidebar-imprint::before {
  background-color: var(--menu-level1-border-color-hover);
}

.menu-item:hover::before {
  background-color: var(--menu-level1-border-color-hover);
}

.menu-item:hover {
  color: var(--menu-font-color-hover);
  background-color: var(--menu-level1-bg-hover);
}

/* Triangle Indicator */
.submenu-toggle::after {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--menu-font-color);
  transition: transform 0.3s;
}

.nav-item.is-open .submenu-toggle::after {
  transform: rotate(180deg);
}

/* Accordion Wrapper */
.submenu-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--anim-speed) ease-in-out;
  overflow: hidden;
}

.nav-item.is-open .submenu-wrapper {
  grid-template-rows: 1fr;
}

.submenu {
  min-height: 0;
  list-style: none;
}

.submenu a {
  display: block;
  padding: 2px 10px 2px calc(var(--menu-level1-border-width) + 20px);
  text-decoration: none;
  color: var(--menu-font-color);
  font-size: var(--menu-item-font-size);
  border-bottom: 1px solid #f9f9f9;
  transition: background-color 0.3s ease;
  background-color: var(--menu-level2-bg);
}

.submenu a:hover {
  color: var(--menu-font-color-hover);
  background-color: var(--menu-level2-bg-hover);
}

.side-nav a.menu-item.active, .side-nav .submenu a.active {
  color: var(--swv-red);
}

/* --- CONTENT --- */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px var(--height-for-back-to-top);
  /* Fixed background image in the top-right corner */
  background: url('../images/bg/content-corner.gif') no-repeat right top;
}

.print-imprint {
  display: none;
}

/* --- BACK TO TOP --- */
.back-to-top {
  position: fixed;
  bottom: 10px;
  /* Positioning explanation:
   * The main page content is horizontally centered and has a maximum width defined by --site-width.
   * The right edge of the content area is therefore at: 50% + (--site-width / 2)
   * The "Back to Top" button is approximately 10rem wide (including its padding, text/arrow label, and any visible scrollbar influence).
   * To align the button's right edge flush with the right edge of the centered content area,
   * we subtract the full button width (10rem) from that position.
   * Result: the button appears just outside the content on the bottom-right corner of the centered block.
   */
  left: calc(50% + (var(--site-width) / 2) - 10rem);
  background: var(--menu-level1-border-color-hover);
  color: white;
  border: none;
  padding: 4px 20px;
  border-radius: 30px;
  /* Initial state: hidden */
  opacity: 0;
  visibility: hidden;
  /* Smooth fade-in and fade-out for both opacity and visibility */
  transition: opacity var(--anim-speed) ease, visibility var(--anim-speed) ease;
  cursor: pointer;
  z-index: var(--z-back-to-top);
}

.back-to-top::first-letter {
  font-size: 250%;
  margin-right: 5px;
  vertical-align: -0.4rem;
}

.mitgliedschaft {
  background: transparent url(../images/bg/membership.gif) no-repeat right 0;    
}

/* Visible state: fully opaque and visible */
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* --- MOBILE PERSISTENT HEADER (hide on scroll down, show on scroll up) --- */

/* Hide the mobile title on desktop (default state) */
.header-content {
  display: none;
}

/* --- RESPONSIVE DESIGN --- */
@media screen and (max-width: 960px) {
  body {
    overflow: auto;
    align-items: flex-start;
  }
  /* --- MOBILE PERSISTENT HEADER (hide on scroll down, show on scroll up) --- */
  /* Fixed header across the full width */
  .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-header-height);
    padding: 0 20px;
    background: var(--menu-level1-border-color-hover) url('../images/bg/main-header-mobile-bg.png') no-repeat top left;
    z-index: var(--z-fixed);
    transition: transform var(--anim-speed) ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
  }

  /* Show the short mobile title (SWV V.K.) only on mobile */
  .header-content {
  display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  .site-title-mobile {
    color: white;
    font-size: 1.75rem;
    font-weight: bold;
    text-decoration: none;
    -webkit-text-stroke: 1px #2a2a2a;
    text-shadow: 
      -1px -1px 0 rgba(0,0,0,0.8),
      1px -1px 0 rgba(0,0,0,0.8),
      -1px 1px 0 rgba(0,0,0,0.8),
      1px 1px 0 rgba(0,0,0,0.8);
  }

  /* Hide the long desktop logo on mobile */
  .header-logo {
    display: none;
  }

  .site-container {
    width: 100%;
    height: auto;
    box-shadow: none;
    background-size: 100% 80px;  /* Width = 100% of viewport, reduce height slightly on small screens */
    background-attachment: fixed; /* Keeps the image stuck to the bottom of the viewport even when scrolling */
  }

  /* Keep hamburger visible and clickable */
  .hamburger {
    display: block;
    z-index: var(--z-hamburger);
  }

  /* scroll behaviour */
  /* Hide header when scrolling down */
  .main-header.hide-on-scroll {
    transform: translateY(-100%);
  }

  /* space under the fixed header */
  .layout-body {
    padding-top: 0;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: var(--mobile-header-height);
    bottom: 0;
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    width: var(--sidebar-width);
    height: calc(100vh - var(--mobile-header-height));
    background-color: rgba(255,255,255,0.9);
    box-shadow: 10px 0 30px rgba(0,0,0,0.2);
    background-image: none;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* When sidebar is open: fade out the mobile title (but keep hamburger visible) */
  body.sidebar-open .main-header .header-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
  }

  /* Push all content down by header height */
  .site-container {
    padding-top: var(--mobile-header-height);   /* Matches mobile header height */
  }

  .side-nav {
    margin-top: 0
  }
  
  .mitgliedschaft  {
    background-image: none;
  }

  .content {
    padding: 0 20px calc(var(--height-for-back-to-top) + 30px);
    overflow-y: visible;
    width: 100%;
    background-image: none;   /* Removes header images and footer image */
    background: white;    /* Ensures pure white background */
  }

  .content h1 {
    margin-top: 5px;
  }

  .content p {
    text-align: left;
  }

  .back-to-top {
  left: auto;
  right: 20px;
  }

  /* Hamburger Animation */
  .sidebar-open .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
  }
  .sidebar-open .hamburger span:nth-child(2) {
  opacity: 0;
  }
  .sidebar-open .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
  }
}

@media screen and (max-height: 760px) {
  .sidebar {
    background-image: none;
  }
}

/* --- PRINT DESIGN --- */
@media print {
  @page {
    size: A4;
    margin: 2cm;
  }
  html, body, .site-container, .layout-body, main {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  html, body {
    background: white;
  }
  /* Remove all custom background images for clean printing */
  .header-photo,
  .header-logo-bg,
  .header-bar,
  .site-container,
  .sidebar,
  .content,
  .mitgliedschaft  {
    background-image: none !important;   /* Removes header images and footer image */
    background: white !important;    /* Ensures pure white background */
  }
  .site-container {
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  .main-header,
  .sidebar,
  .ics-button,
  .back-to-top,
  .gallery-section,
  .modal {
    display: none !important;
  }
  .content {
    padding: 0;
    overflow: visible;
  }
  .content h1,
  .content h1 .maintitle,
  .content h2,
  .content p,
  .content p a,
  .content table a,
  .swv-table-1 td,
  .swv-table-2 td ,
  .swv-table-2 tr td:first-child {
    color: black;
  }
  .content p a,
  .content table a {
    border-bottom: 1px solid #000000;
  }
  .swv-table-1 thead tr {
    background-color: #a4a4a4;
  }
  .swv-table-1 tbody tr:last-of-type,
  .swv-table-2 tbody tr:last-of-type {
    border-bottom: 2px solid #a4a4a4;
  }
  .print-imprint {
    display: block;
    margin-bottom: 30px;
  }
}

/* --- WALKING LIST STYLES --- */
.swv-list {
  list-style: none;
  padding-left: 1.5rem;
}

.swv-list ul {
  list-style: none;
  padding-left: 1.5rem;
}

.swv-list li {
  position: relative;
  margin-bottom: 0.6rem;
  line-height: 1.5;
  cursor: default;
}

/* 1st Level: Dark Gray Diamond */
.swv-list > li::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.55rem;
  width: 18px;
  height: 10px;
  background-color: #444444;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: background-color 0.3s ease;
}

/* 2nd Level: Light Gray Diamond */
.swv-list ul li::before {
  content: "";
  position: absolute;
  left: -1.3rem;  /* je nach Größe anpassen */
  top: 0.45rem;
  width: 14px;
  height: 8px;
  background-color: #bbbbbb;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: background-color 0.3s ease;
}

/* Hover Effect: Turn Diamonds Green */
.swv-list li:hover::before {
  background-color: var(--primary-green);
}

.swv-list li:hover {
  color: var(--primary-green);
  transition: color 0.3s ease;
}

.content img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}