:root {
    /* General Color Variables (Inverted for Dark Theme) */
    --color--black: #ffffff;  /* Light background color */
    --color--white: #1F1E1C;  /* Dark text */
    --color--gray-5: #2c2c2c;  /* Darker gray for soft text */
    --color--gray-20: #333333; /* Dark gray */
    --color--primary-hue: 202;
    --color--primary-saturation: 79%;
    --color--primary-lightness: 50;
    --color--primary-30: red;
    --color--primary-40: red;
    --color--primary-50: red;
    --color--primary-60: red;
    --color--primary-80: red;
    --color-text-neutral-soft: #d1d1d1; /* Soft lighter text */
    --color-text-neutral-medium: #cccccc; /* Lighter text */
    --color-text-neutral-loud: #ffffff; /* High contrast text */
    --color-text-primary-medium: #ff6347; /* Lighter red for primary text */
    --color-text-primary-loud: #ff4500; /* Darker red for loud primary text */

    /* Background & Content */
    --background-color: #121212;  /* Dark background */
    --content-background-color: #1e1e1e; /* Slightly lighter dark background for content */
    --footer-background-color: #1a1a1a;  /* Very dark footer */
    --header-background-color: #333333; /* Dark header */
    --link-color: rgb(146, 165, 175); /* Red color for links */
    --link-hover-color: red; /* Darker red hover effect for links */
    
    /* Font Colors */
    --font-color-light: #ffffff;  /* White font for main text */
    --font-color-dark: #b3b3b3;  /* Lighter text color for less important content */
    --font-color-muted: #777777; /* Muted text */
    --font-sans: "Metropolis", sans-serif;
    --font-serif: "Lora", serif;

    /* Spacing Variables */
    --sp: 1.125rem; /* Standard spacing unit */
    --sp2: calc(var(--sp) * 2);
    --sp4: calc(var(--sp) * 4);

    /* Container Width */
    --max-width: 90rem;
    --grid-col-count: 12; /* 12-column grid */
    --grid-gap: var(--sp);
    --container-padding: var(--sp);

    /* Border Radius */
    --border-radius: 0.25rem;
    
    /* Scrollbar */
    --scrollbar-width: 0.25rem;  /* Slim scrollbar for dark mode */
}

body {
    background-color: var(--background-color);
    color: var(--font-color-light);
}

html {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--font-color-light);
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

.header, .footer {
    background-color: var(--header-background-color);
}

footer {
    background-color: var(--footer-background-color);
    border-inline-start: var(--footer-background-color) !important;
}

.header-nav {
    background-color: var(--color--gray-5);
    border-block-start: solid var(--color--gray-5) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
    padding-top: var(--sp1)
}
.content {
    background-color: var(--content-background-color);
}

.main-content {
   background-color: var(--content-background-color);
}

.site-branding,.site-header__initial {
    min-width: auto;
    background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--content-background-color) 100%);
}

.site-header__inner,.social-bar {
  background-color: var(--color--gray-5);
}

.site-branding__text,.mobile-nav-button__label {
   display: none;
}

.primary-nav__menu-link,.text-content a:where(:not(.button)) {
    color: rgb(146, 165, 175);
}

.is-active {
    color: #fff;
}

iframe {
    background: #FFFFFF;
}


@media (min-width: 31.25rem) {
  .mobile-buttons {
    margin-block-start: var(--sp1);
  .mobile-nav-button {
    padding-inline-start: calc(var(--sp) * 0.5);
}
}}
@media (min-width: 43.75rem) {
.mobile-buttons {
    margin-block-start: var(--sp2);
}}

a:focus,.primary-nav__menu-link:focus {
    outline: none;
}

.zeile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: flex-start;
}

.spalte {
    flex-grow: 1;
}

.layout--content-medium,
.layout--pass--content-medium > * {
  grid-column: 1 / 20;
  width: 100%;
}

@media (min-width: 43.75rem) {
  .layout--content-medium,
  .layout--pass--content-medium > * {
    grid-column: 2 / 14;
  }
}

@media (min-width: 62.5rem) {
  .layout--content-medium,
  .layout--pass--content-medium > * {
    grid-column: 3 / 13;
  }
}

.view-news .views-view-responsive-grid__item::after {
  position: absolute;
  inset-block-end: 0;
  width: var(--sp3);
  height: 0;
  content: "";
  border-top: solid 2px var(--color--gray-95);
}


.view-news .views-field-uid {
    text-align: right;
}

.views-field-field-cover, .views-field-field-back, .photoswipe {
    display: inline-block;
}

.views-field-field-bilder {
    font-size:0;
}



.view-songs .views-row .views-field-view {
    float: right;
}

.view-diskografie4song .views-row, .view-diskografie4song .view-content{
    display: inline-block;
    margin-top: 17px;
}

h2 {
    scroll-margin-top: 180px
}