/*
 * OPTIMIERTE CSS-STRUKTUR
 * ----------------------
 *
 * 1. normalize.css - Browser-Konsistenz (beibehalten)
 * 2. base-styles.css - Grundlegendes Styling und Variablen
 * 3. utility-classes.css - Utility-Klassen für Margin, Padding, etc.
 * 4. component-styles.css - Komponenten-spezifisches Styling
 * 5. webflow-classes.css - Webflow-spezifische Klassen (ausgelagert)
 */

/* Dateistruktur-Empfehlung */

/* ==========================================================================
   1. normalize.css (unverändert beibehalten)
   ========================================================================== */

/**
 * modern-normalize v3.0.1 | MIT License
 * Lieber als separate Datei behalten, um einfache Updates zu ermöglichen
 */

/*
Nothing here is what it seems.
But if you're reading this, try function echo24() after the signal arrives.
A mirror never lies. Just reflects.
*/

 

 /* ==========================================================================
   2. base-styles.css
   ========================================================================== */

   :root {
    /* Variablen aus der ursprünglichen client-first.css */
    --link-color--link-primary: var(--base-color-brand--blue);
    --background-color--background-primary: var(--base-color-neutral--black);
    --text-color--text-alternate: var(--base-color-neutral--white);
    --text-color--text-primary: var(--base-color-neutral--black);
    --text-color--text-secondary: var(--base-color-neutral--neutral-darker);
    --background-color--background-success: var(--base-color-system--success-green);
    --text-color--text-success: var(--base-color-system--success-green-dark);
    --border-color--border-primary: var(--base-color-neutral--neutral-lightest);
    --background-color--background-alternate: var(--base-color-neutral--white);
    --background-color--background-secondary: var(--base-color-brand--blue);
    --background-color--background-tertiary: var(--base-color-brand--pink);
    --background-color--background-error: var(--base-color-system--error-red);
    --text-color--text-error: var(--base-color-system--error-red-dark);
    --border-color--border-alternate: var(--base-color-neutral--neutral-darker);
    --background-color--background-warning: var(--base-color-system--warning-yellow);
    --text-color--text-warning: var(--base-color-system--warning-yellow-dark);
    --border-color--border-secondary: var(--base-color-brand--blue);
    --link-color--link-secondary: var(--base-color-neutral--black);
    --link-color--link-alternate: var(--base-color-neutral--white);
    --base-color-brand--blue-light: #d9e5ff;
    --base-color-brand--blue: #2d62ff;
    --base-color-brand--blue-dark: #080331;
    --base-color-brand--pink-light: #ffaefe;
    --base-color-brand--pink: #dd23bb;
    --base-color-brand--pink-dark: #3c043b;
    --base-color-neutral--black: #000;
    --base-color-neutral--white: #fff;
    --base-color-neutral--neutral-lightest: #eee;
    --base-color-neutral--neutral-lighter: #ccc;
    --base-color-neutral--neutral-light: #aaa;
    --base-color-neutral--neutral: #666;
    --base-color-neutral--neutral-dark: #444;
    --base-color-neutral--neutral-darker: #222;
    --base-color-neutral--neutral-darkest: #111;
    --base-color-system--success-green: #cef5ca;
    --base-color-system--success-green-dark: #114e0b;
    --base-color-system--warning-yellow: #fcf8d8;
    --base-color-system--warning-yellow-dark: #5e5515;
    --base-color-system--error-red: #f8e4e4;
    --base-color-system--error-red-dark: #3b0b0b;
    --base-color-system--focus-state: #2d62ff;
  }
  
  /* Grundlegende Element-Styles */
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans, sans-serif;
  }
  
  body {
    margin: 0;
    color: #000;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  /* Typografie-Grundstile */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 700;
  }
  
  h1 {
    font-size: 4rem;
    line-height: 1.1;
  }
  
  h2 {
    font-size: 3rem;
    line-height: 1.2;
  }
  
  h3 {
    font-size: 2rem;
    line-height: 1.2;
  }
  
  h4 {
    font-size: 1.5rem;
    line-height: 1.4;
  }
  
  h5 {
    font-size: 1.25rem;
    line-height: 1.5;
  }
  
  h6 {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  p {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  a {
    color: var(--link-color--link-primary);
  }
  
  /* Listen-Styles */
  ul, ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1.5rem;
  }
  
  li {
    margin-bottom: .25rem;
  }
  
  /* Bilder und Medien */
  img {
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
    border: 0;
  }
  
  /* Formulare und Eingabefelder */
  label {
    margin-bottom: .25rem;
    font-weight: 500;
    display: block;
  }
  
  button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
  }
  
  /* Blockquote und Zitate */
  blockquote {
    border-left: .25rem solid #e2e2e2;
    margin-bottom: 0;
    padding: 0 1.25rem;
    font-size: 1.25rem;
    line-height: 1.5;
  }
  
  /* Rich-Text-Verbesserungen */
  .w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
    margin-top: 0 !important;
  }
  
  .w-richtext > :last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Focus-State für Accessibility */
  *[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
     outline: 0.125rem solid #4d65ff;
     outline-offset: 0.125rem;
  }
  
  /* ==========================================================================
     3. utility-classes.css
     ========================================================================== */
  
  /* Container-Klassen */
  .container-medium,
  .container-small,
  .container-large {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .container-small {
    max-width: 48rem;
  }
  
  .container-medium {
    max-width: 64rem;
  }
  
  .container-large {
    max-width: 80rem;
  }
  
  /* Textausrichtung */
  .text-align-left {
    text-align: left;
  }
  
  .text-align-center {
    text-align: center;
  }
  
  .text-align-right {
    text-align: right;
  }
  
  /* Textfarben */
  .text-color-primary {
    color: var(--text-color--text-primary);
  }
  
  .text-color-secondary {
    color: var(--text-color--text-secondary);
  }
  
  .text-color-alternate {
    color: var(--text-color--text-alternate);
  }
  
  /* Textgrößen */
  .text-size-tiny {
    font-size: .75rem;
  }
  
  .text-size-small {
    font-size: .875rem;
  }
  
  .text-size-regular {
    font-size: 1rem;
  }
  
  .text-size-medium {
    font-size: 1.25rem;
  }
  
  .text-size-large {
    font-size: 1.5rem;
  }
  
  /* Textgewichtung */
  .text-weight-light {
    font-weight: 300;
  }
  
  .text-weight-normal {
    font-weight: 400;
  }
  
  .text-weight-medium {
    font-weight: 500;
  }
  
  .text-weight-semibold {
    font-weight: 600;
  }
  
  .text-weight-bold {
    font-weight: 700;
  }
  
  .text-weight-xbold {
    font-weight: 800;
  }
  
  /* Textstile */
  .text-style-italic {
    font-style: italic;
  }
  
  .text-style-strikethrough {
    text-decoration: line-through;
  }
  
  .text-style-muted {
    opacity: .6;
  }
  
  .text-style-allcaps {
    text-transform: uppercase;
  }
  
  .text-style-nowrap {
    white-space: nowrap;
  }
  
  .text-style-link {
    color: var(--link-color--link-primary);
    text-decoration: underline;
  }
  
  .text-style-quote {
    border-left: .25rem solid #e2e2e2;
    margin-bottom: 0;
    padding: 0 1.25rem;
    font-size: 1.25rem;
    line-height: 1.5;
  }
  
  /* Text-Truncation */
  .text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  
  /* Heading-Stile */
  .heading-style-h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
  }
  
  .heading-style-h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
  }
  
  .heading-style-h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
  }
  
  .heading-style-h4 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
  }
  
  .heading-style-h5 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
  }
  
  .heading-style-h6 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
  }
  
  /* Hintergrundfarben */
  .background-color-primary {
    background-color: var(--background-color--background-primary);
    color: var(--text-color--text-alternate);
  }
  
  .background-color-secondary {
    background-color: var(--background-color--background-secondary);
  }
  
  .background-color-tertiary {
    background-color: var(--background-color--background-tertiary);
  }
  
  .background-color-alternate {
    background-color: var(--background-color--background-alternate);
  }
  
  /* Versteckungsklassen */
  .hide {
    display: none !important;
  }
  
  @media screen and (max-width: 991px) {
    .hide-tablet {
      display: none !important;
    }
  }
  
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape {
      display: none !important;
    }
  }
  
  @media screen and (max-width: 479px) {
    .hide-mobile-portrait,
    .hide-mobile {
      display: none !important;
    }
  }
  
  /* Seitenabstände (kombiniert aus beiden Quellen und optimiert) */
  .margin-0 {
    margin: 0 !important;
  }
  
  .padding-0 {
    padding: 0 !important;
  }
  
  .spacing-clean {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Margin-Klassen */
  .margin-tiny { margin: .125rem; }
  .margin-xxsmall { margin: .25rem; }
  .margin-xsmall { margin: .5rem; }
  .margin-small { margin: 1rem; }
  .margin-custom1 { margin: 1.5rem; }
  .margin-medium { margin: 2rem; }
  .margin-custom2 { margin: 2.5rem; }
  .margin-large { margin: 3rem; }
  .margin-custom3 { margin: 3.5rem; }
  .margin-xlarge { margin: 4rem; }
  .margin-xxlarge { margin: 5rem; }
  .margin-huge { margin: 6rem; }
  .margin-xhuge { margin: 8rem; }
  .margin-xxhuge { margin: 12rem; }
  
  /* Padding-Klassen */
  .padding-tiny { padding: .125rem; }
  .padding-xxsmall { padding: .25rem; }
  .padding-xsmall { padding: .5rem; }
  .padding-small { padding: 1rem; }
  .padding-custom1 { padding: 1.5rem; }
  .padding-medium { padding: 2rem; }
  .padding-custom2 { padding: 2.5rem; }
  .padding-large { padding: 3rem; }
  .padding-custom3 { padding: 3.5rem; }
  .padding-xlarge { padding: 4rem; }
  .padding-xxlarge { padding: 5rem; }
  .padding-huge { padding: 6rem; }
  .padding-xhuge { padding: 8rem; }
  .padding-xxhuge { padding: 12rem; }
  
  /* Direktionale Margins */
  .margin-top {
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .margin-right {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  
  .margin-bottom {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .margin-left {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
  }
  
  .margin-horizontal {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .margin-vertical {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Direktionale Paddings */
  .padding-top {
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .padding-right {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  
  .padding-bottom {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .padding-left {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .padding-horizontal {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .padding-vertical {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Sektionspadding */
  .padding-global {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  
  .padding-section-small {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .padding-section-medium {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  
  .padding-section-large {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  
  /* Spacer für Abstände */
  .spacer-tiny { padding-top: .125rem; width: 100%; }
  .spacer-xxsmall { padding-top: .25rem; width: 100%; }
  .spacer-xsmall { padding-top: .5rem; width: 100%; }
  .spacer-small { padding-top: 1rem; width: 100%; }
  .spacer-medium { padding-top: 2rem; width: 100%; }
  .spacer-large { padding-top: 3rem; }
  .spacer-xlarge { padding-top: 4rem; width: 100%; }
  .spacer-xxlarge { padding-top: 5rem; width: 100%; }
  .spacer-huge { padding-top: 6rem; width: 100%; }
  .spacer-xhuge { padding-top: 8rem; width: 100%; }
  .spacer-xxhuge { padding-top: 12rem; width: 100%; }
  
  /* Alignment-Klassen */
  .align-center {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Max-Width-Klassen */
  .max-width-xxsmall { max-width: 12rem; width: 100%; }
  .max-width-xsmall { max-width: 16rem; width: 100%; }
  .max-width-small { max-width: 20rem; width: 100%; }
  .max-width-medium { max-width: 32rem; width: 100%; }
  .max-width-large { max-width: 48rem; width: 100%; }
  .max-width-xlarge { max-width: 64rem; width: 100%; }
  .max-width-xxlarge { max-width: 80rem; width: 100%; }
  .max-width-full { max-width: none; width: 100%; }
  
  /* Responsive Max-Width */
  @media screen and (max-width: 991px) {
    .max-width-full-tablet { max-width: none; width: 100%; }
  }
  
  @media screen and (max-width: 767px) {
    .max-width-full-mobile-landscape { max-width: none; width: 100%; }
  }
  
  @media screen and (max-width: 479px) {
    .max-width-full-mobile-portrait { max-width: none; width: 100%; }
  }
  
  /* Z-Index-Klassen */
  .z-index-1 {
    z-index: 1;
    position: relative;
  }
  
  .z-index-2 {
    z-index: 2;
    position: relative;
  }
  
  /* Overflow-Klassen */
  .overflow-hidden { overflow: hidden; }
  .overflow-visible { overflow: visible; }
  .overflow-scroll { overflow: scroll; }
  .overflow-auto { overflow: auto; }
  
  /* Pointer-Events-Klassen */
  .pointer-events-auto { pointer-events: auto; }
  .pointer-events-none { pointer-events: none; }
  
  /* Seitenverhältnis-Klassen */
  .aspect-ratio-square {
    aspect-ratio: 1;
    object-fit: cover;
  }
  
  .aspect-ratio-portrait {
    aspect-ratio: 2 / 3;
    object-fit: cover;
  }
  
  .aspect-ratio-landscape {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  
  .aspect-ratio-widescreen {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  
  /* Icon-Größen */
  .icon-1x1-small {
    flex: none;
    width: 1rem;
    height: 1rem;
  }
  
  .icon-1x1-medium {
    width: 2rem;
    height: 2rem;
  }
  
  .icon-1x1-large {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .icon-height-small {
    height: 1rem;
  }
  
  .icon-height-medium {
    height: 2rem;
  }
  
  .icon-height-large {
    height: 3rem;
  }
  
  /* ==========================================================================
     4. component-styles.css
     ========================================================================== */
  
  /* Formular-Komponenten */
  .form_component {
    margin-bottom: 0;
  }
  
  .form_input {
    border: 1px solid var(--border-color--border-primary);
    background-color: rgba(0, 0, 0, 0);
    min-height: 3rem;
    margin-bottom: .75rem;
    padding: .5rem 1rem;
    font-size: 1rem;
  }
  
  .form_input::placeholder {
    color: var(--text-color--text-secondary);
  }
  
  .form_input.is-select-input {
    color: var(--text-color--text-secondary);
  }
  
  .form_input.is-text-area {
    min-height: 8rem;
    padding-top: .75rem;
    font-size: 1rem;
  }
  
  .form_message-success {
    background-color: var(--background-color--background-success);
    color: var(--text-color--text-success);
    padding: 1.25rem;
  }
  
  .form_message-error {
    background-color: var(--background-color--background-error);
    color: var(--text-color--text-error);
    margin-top: .75rem;
    padding: .75rem;
  }
  
  .form_checkbox {
    flex-direction: row;
    align-items: center;
    margin-bottom: .5rem;
    padding-left: 0;
    display: flex;
  }
  
  .form_checkbox-icon {
    border-radius: .125rem;
    width: .875rem;
    height: .875rem;
    margin: 0 .5rem 0 0;
  }
  
  .form_radio {
    flex-direction: row;
    align-items: center;
    margin-bottom: .5rem;
    padding-left: 0;
    display: flex;
  }
  
  .form_radio-icon {
    width: .875rem;
    height: .875rem;
    margin-top: 0;
    margin-left: 0;
    margin-right: .5rem;
  }
  
  /* Button-Komponenten */
  .button {
    background-color: var(--background-color--background-primary);
    color: var(--text-color--text-alternate);
    text-align: center;
    border-radius: .25rem;
    padding: .75rem 1.5rem;
    font-weight: 600;
  }
  
  .button.is-text {
    color: #000;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid rgba(0, 0, 0, 0);
  }
  
  .button.is-small {
    padding: .5rem 1.25rem;
  }
  
  .button.is-large {
    padding: 1rem 2rem;
  }
  
  .button.is-secondary {
    border: 1px solid var(--border-color--border-alternate);
    color: var(--text-color--text-primary);
    background-color: rgba(0, 0, 0, 0);
  }
  
  .button.is-icon {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex;
  }
  
  .button.is-brand {
    background-color: var(--background-color--background-secondary);
  }
  
  .button-group {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  
  /* Navigation */
  .nav_component {
    background-color: #000;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
  }
  
  .nav_container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }
  
  .nav_logo {
    width: 10rem;
  }
  
  .nav_menu_link {
    color: #fff;
    padding: 1rem;
  }
  
  .nav_button {
    padding: 1rem;
  }
  
  .nav_fixed {
    position: absolute;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
  }
  
  /* Rich Text */
  .text-rich-text h1, .text-rich-text h2, .text-rich-text h3, .text-rich-text h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .text-rich-text h5, .text-rich-text h6 {
    margin-top: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .text-rich-text p {
    margin-bottom: 1rem;
  }
  
  .text-rich-text ul, .text-rich-text ol {
    margin-bottom: 1.5rem;
  }
  
  .text-rich-text blockquote {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  
  /* Hero-Sektion */
  .section_hero {
    color: #fff;
    background-color: #000;
    background-image: radial-gradient(circle at 0 100%, rgba(45, 98, 255, .3), rgba(0, 0, 0, 0) 50%), radial-gradient(circle at 100% 60%, rgba(45, 98, 255, .3), rgba(17, 17, 17, 0) 20%), radial-gradient(circle at 100% 100%, rgba(214, 0, 196, .2), rgba(0, 0, 0, 0) 45%);
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    display: flex;
    position: relative;
  }
  
  .hero_content {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    align-content: start;
    justify-content: start;
    align-items: start;
    justify-items: start;
    max-width: 70rem;
    display: grid;
    position: relative;
  }
  
  .hero_image {
    border-radius: 1rem;
    margin-top: 0;
  }
  
  .hero_heading {
    font-size: 4rem;
  }
  
  .hero_grid {
    grid-column-gap: 8rem;
    grid-row-gap: 8rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    display: grid;
  }
  
  /* Spezielle Komponenten und Utility Pages */
  .utility-page_component {
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
  }
  
  .utility-page_wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    text-align: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    max-width: 20rem;
    display: flex;
  }
  
  .utility-page_form {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    display: flex;
  }
  
  .utility-page_image {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Layer-Element */
  .layer {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }
  
  /* ==========================================================================
     5. webflow-classes.css (ausgelagert)
     ========================================================================== */
  
  /**
   * Webflow-spezifische Klassen - ausgelagert
   * 
   * Diese Datei sollte alle Webflow-spezifischen Klassen enthalten (mit w- Präfix)
   * und kann bei Bedarf eingebunden werden.
   * 
   * Du hast gesagt, dass du diese Klassen momentan nicht brauchst, daher
   * habe ich sie in eine separate Datei ausgelagert. Du kannst sie später
   * bei Bedarf wieder einbinden.
   *
   * Beispiel-Klassen, die hier enthalten sein sollten:
   * - w-button
   * - w-container
   * - w-nav
   * - w-form
   * - w-slider
   * usw.
   */
  
  /* ==========================================================================
     Media Queries
     ========================================================================== */
  
  @media screen and (max-width: 991px) {
    h1 {
      font-size: 3rem;
    }
  
    h2 {
      font-size: 2.5rem;
    }
  
    h3 {
      font-size: 1.75rem;
    }
  
    /* Seitenabstände anpassen */
    .padding-xlarge { padding: 3rem; }
    .margin-xlarge { margin: 3rem; }
    .padding-xhuge { padding: 6rem; }
    .padding-xxhuge { padding: 8rem; }
    .padding-huge { padding: 5rem; }
    .margin-large { margin: 2.5rem; }
    .padding-xxlarge { padding: 4rem; }
    .padding-large { padding: 2.5rem; }
    .margin-huge { margin: 5rem; }
    .padding-medium { padding: 1.5rem; }
    .margin-xxlarge { margin: 4rem; }
    .margin-xhuge { margin: 6rem; }
    .margin-medium { margin: 1.5rem; }
    .margin-xxhuge { margin: 8rem; }
  
    /* Spacer anpassen */
    .spacer-huge { padding-top: 5rem; }
    .spacer-medium { padding-top: 1.5rem; }
    .spacer-xhuge { padding-top: 6rem; }
    .spacer-xxhuge { padding-top: 8rem; }
    .spacer-xlarge { padding-top: 3rem; }
    .spacer-large { padding-top: 2.5rem; }
    .spacer-xxlarge { padding-top: 4rem; }
  
    /* Grid-Layouts anpassen */
    .fs-styleguide_2-col {
      grid-column-gap: 2rem;
      grid-row-gap: 2rem;
      grid-template-columns: 1fr;
    }
  
    .fs-styleguide_3-col {
      grid-template-columns: 1fr;
    }
  
    .fs-styleguide_4-col {
      grid-template-columns: 1fr;
    }
  
    .fs-styleguide_1-col {
      grid-column-gap: 2rem;
      grid-row-gap: 2rem;
    }
  
    .fs-styleguide_section {
      grid-column-gap: 2.5rem;
      grid-template-columns: 1fr;
    }
  
    /* Schriftgrößen anpassen */
    .fs-styleguide_heading-medium {
      font-size: 3rem;
    }
  
    .fs-styleguide_heading-header {
      font-size: 4rem;
    }
  
    /* Abschnitt-Abstände anpassen */
    .padding-section-large {
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
  
    .padding-section-medium {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
  
    /* Hero-Sektion anpassen */
    .hero_grid {
      grid-column-gap: 4rem;
      grid-row-gap: 4rem;
      grid-template-columns: 1fr;
    }
  
    .section_hero {
      padding-top: 3rem;
    }
  
    /* Navigation */
    .nav_button {
      color: #fff;
    }
  }
  
  @media screen and (max-width: 767px) {
    h1 {
      font-size: 2rem;
    }
  
    h2 {
      font-size: 2rem;
    }
  
    h3 {
      font-size: 1.5rem;
    }
  
    h4 {
      font-size: 1.25rem;
    }
  
    h5 {
      font-size: 1rem;
    }
  
    h6 {
      font-size: .875rem;
    }
    
    /* 
      SYSTEM.LOG: echo confirmed.
      Pattern anomaly detected in storage.
      Seek the key within what persists beyond refresh.
      — ZENITH.PROTOCOL
    */

    .mirror-signal-7e {
      display: none;
    }
    /* They say the mirror reflects what’s already known — but only if you look inside. */

    

    /* Seitenabstände anpassen */
    .padding-xlarge { padding: 2rem; }
    .margin-xlarge { margin: 2rem; }
    .padding-xhuge { padding: 4rem; }
    .padding-xxhuge { padding: 4.5rem; }
    .padding-huge { padding: 3.5rem; }
    .margin-large { margin: 1.5rem; }
    .padding-xxlarge { padding: 3rem; }
    .padding-large { padding: 1.5rem; }
    .margin-huge { margin: 3.5rem; }
    .padding-medium { padding: 1.25rem; }
    .margin-xxlarge { margin: 3rem; }
    .margin-xhuge { margin: 4rem; }
    .margin-medium { margin: 1.25rem; }
    .margin-xxhuge { margin: 4.5rem; }
  
    /* Spacer anpassen */
    .spacer-huge { padding-top: 3.5rem; }
    .spacer-medium { padding-top: 1.25rem; }
    .spacer-xhuge { padding-top: 4rem; }
    .spacer-xxhuge { padding-top: 4.5rem; }
    .spacer-xlarge { padding-top: 2rem; }
    .spacer-large { padding-top: 1.5rem; }
    .spacer-xxlarge { padding-top: 3rem; }
  
    /* Globale Abstände */
    .padding-global {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  
    /* Schriftgrößen und Stile anpassen */
    .heading-style-h1 {
      font-size: 2.5rem;
    }
  
    .heading-style-h2 {
      font-size: 2rem;
    }
  
    .heading-style-h3 {
      font-size: 1.5rem;
    }
  
    .heading-style-h4 {
      font-size: 1rem;
    }
  
    .heading-style-h5 {
      font-size: .875rem;
    }
  
    .heading-style-h6 {
      font-size: .75rem;
    }
  
    .text-size-large {
      font-size: 1.25rem;
    }
  
    .text-style-nowrap {
      white-space: normal;
    }
  
    /* Abschnitt-Abstände anpassen */
    .padding-section-small {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
  
    .padding-section-medium {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
  
    .padding-section-large {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
  
    /* Styleguide-Elemente anpassen */
    .fs-styleguide_section-header {
      font-size: .875rem;
    }
  
    .fs-styleguide_heading-medium {
      font-size: 2rem;
    }
  
    /* Reihen-Layout anpassen */
    .fs-styleguide_row {
      flex-wrap: wrap;
    }
  }
  
  @media screen and (max-width: 479px) {
    /* Hero anpassen */
    .hero_heading {
      font-size: 2.5rem;
    }
  }