/* --------------------------------------------------------------
/* =Variable
-------------------------------------------------------------- */
:root {
  --font-primary: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Standardfarben (Ursprüngliches Schwarz/Weiß) */
  --text-primary: rgba(0,0,0,0.9);
  --text-secondary: rgba(0,0,0,0.6);
  --text-tertiary: rgba(255,255,255,0.9);
  --bg-primary: rgba(255,255,255,1);
  --bg-secondary: rgba(248,248,248,1);
  --bg-tertiary : rgba(0,0,0,1);

  --border: rgba(0,0,0,0.1);

  --font-size-small: 12px;
  --font-size-regular:14px;
  --font-size-large: 20px;

  --radius-large: 12px;
  --radius-regular: 8px;
  --radius-small: 4px;
  --radius-zero: 0px;


  --spacer-small: 2vh;
  --spacer-medium: 6vh;
  --spacer-large: 12vh;

  .red-mode { /* ALTER RED MODE */
    --text-primary: rgba(255,0,0,0.9);
    --text-secondary: rgba(255,0,0,0.6);
    --bg-primary: rgba(255,200,200,1);
    --bg-secondary: rgba(255,180,180,1);
    --border: rgba(255,0,0,0.2);
  }

  /* NEUER BLUE MODE (Hellblau-Verlauf) */
  .blue-mode { 
    /* Hintergrundfarben zur Verwendung (fallback oder für Komponenten) */
    --bg-primary: var(--blue-gradient-start); 
    --bg-secondary: rgba(215,235,250,1); 
    
    /* Text: Dunkel für Kontrast auf hellem Hintergrund */
    --text-primary: rgba(0,0,80,0.9); /* Dunkelblau */
    --text-secondary: rgba(0,0,80,0.6); /* Gedämpftes Dunkelblau */
    --text-tertiary: rgba(255,255,255,0.9); 
    --border: rgba(0,0,80,0.15); 
  }
  
  /* Allgemeine Verlaufsvariablen (STANDARD: Sehr Hellgrau/Weiß zu Weiß) */
  --white-gradient-start: #ECEEED; /* Sehr helles Grau-Weiß (fast unsichtbar) */
  --white-gradient-end: #FFFFFF; /* Reines Weiß Endfarbe */
  
 /* NEUER BLUE MODE (Sehr heller Hintergrund, dunkler Text) */
  .white-mode { 
    /* Hintergrundfarben (fallback oder für Komponenten) */
    --bg-primary: var(--blue-gradient-start); 
    --bg-secondary: #F5F5F5; /* Subtiler Grauton für sekundäre Flächen */
    
    /* Textfarben: Schwarz und Weiß (für Kontrast auf dunklen/hellen Elementen) */
    --text-primary: rgba(0,0,0,0.9); /* Schwarz (Header, Haupttext) */
    --text-secondary: rgba(0,0,0,0.6); /* Gedämpftes Schwarz (Sekundärtext) */
    --text-tertiary: rgba(255,255,255,1); /* Weiß (für Buttons/Elemente auf dunklem bg) */
    --border: rgba(0,0,0,0.1); 
  }
   
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ... (Ursprüngliche Dunkelmodus-Farben) ... */
  }

  .red-mode { /* ALTER RED MODE (Dark) */
    --text-primary: rgba(255,200,200,1);
    --text-secondary: rgba(255,200,200,0.9);
    --bg-primary: rgba(255,0,0,1);
    --bg-secondary: rgba(220,0,0,1);
    --border: rgba(255,200,200,0.2);
  }
  
  /* Verlaufsvariablen im Dark Mode (Anpassung: Dunkelgrau zu Schwarz) */
  --white-gradient-start: #1A1A1A; /* Sehr dunkles Grau Startfarbe */
  --white-gradient-end: #000000; /* Reines Schwarz Endfarbe */

  /* NEUER BLUE MODE - DUNKEL (Subtiler Verlauf) */
  .white-mode { 
    /* Hintergrundfarben zur Verwendung */
    --bg-primary: var(--blue-gradient-start); 
    --bg-secondary: #0A0A0A;

    /* Text: Für maximalen Kontrast */
    --text-primary: rgba(255, 255, 255, 1);
    --text-secondary: rgba(200, 210, 240, 0.7);
    --text-tertiary: rgba(255,255,255,0.9); 
    --border: rgba(255, 255, 255, 0.15);
  }
}

/* --------------------------------------------------------------
/* =Global
-------------------------------------------------------------- */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0 !important;
  text-decoration: none;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga' 1, 'calt' 1;
}
body {
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.015em;
  font-weight: 500;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
/*-webkit-text-size-adjust: 100%;*/
  font-family: var(--font-primary);
  font-size: var(--font-size-regular);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  touch-action: manipulation;
}

/* --------------------------------------------------------------
/* NEUE REGELN FÜR DEN FARBVERLAUF UND TRANSPARENZ
-------------------------------------------------------------- */

/* 1. WICHTIG: Überschreiben Sie die Body-Hintergrundfarbe mit dem Farbverlauf, wenn .blue-mode aktiv ist */
body.white-mode {
    /* WICHTIG: Hier muss der Verlauf definiert werden, um die oben definierte background: var(--bg-primary); zu überschreiben */
    background: linear-gradient(
        to bottom,
        var(--white-gradient-start), /* Hellblau oder Dunkelblau (je nach Media Query) */
        var(--white-gradient-end)    /* Weiß oder Schwarz (je nach Media Query) */
    );
    min-height: 100vh;
}

/* 2. Machen Sie Header, Main und Footer transparent, damit der Body-Verlauf durchscheint */
.white-mode header,
.white-mode main,
.white-mode footer {
    background-color: transparent; 
}

/* --------------------------------------------------------------
/* = Regular borders
-------------------------------------------------------------- */
.border-all-around {
  border: 1px solid var(--border);
}
.border-top {
  border-top: 1px solid var(--border);
}
.border-bottom {
  border-bottom: 1px solid var(--border);
}
.border-left {
  border-left: 1px solid var(--border);
}
.border-right {
  border-right: 1px solid var(--border);
}

/* --------------------------------------------------------------
/* = Layout utilities
-------------------------------------------------------------- */
.auto-margins {
  margin: auto;
}

/* --------------------------------------------------------------
/* = Show/hide
-------------------------------------------------------------- */
.show-on-desktop-only {
  display: block;
}
.show-on-mobile-only {
  display: none;
}

@media screen and (max-width: 821px) {
  .show-on-desktop-only {
    display: none;
  }
  .show-on-mobile-only {
    display: block;
  }
}

/* --------------------------------------------------------------
/* = Image
-------------------------------------------------------------- */
.fluid-img {
  display: block !important; /* Block-Level erzwingen */
    width: 100% !important; /* 100% der 50%-Breite des Containers */
    height: auto;
  border-radius: var(--radius-zero);
  overflow: hidden;
}
figure {
  padding: 0;
  margin: 0;
}
figcaption {
  margin-top: var(--spacer-small);
}
video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-large);
  overflow: hidden;
}

/* --------------------------------------------------------------
/* = Max width / line length
-------------------------------------------------------------- */
.max-width-400 {
  max-width: 400px;
}
.max-width-600 {
  max-width: 600px;
}

/* --------------------------------------------------------------
/* = Box
-------------------------------------------------------------- */
.box.small {
  padding: 16px;
}
.box.small.radius {
  border-radius: var(--radius-regular);
}
.box.large {
  padding: 24px;
}
.box.large.radius {
  border-radius: var(--radius-large);
}

/* --------------------------------------------------------------
/* = Background
-------------------------------------------------------------- */
.bg-primary {
  background-color: var(--bg-primary);
}
.bg-secondary {
  background-color: var(--bg-secondary);
}

/* --------------------------------------------------------------
/* = Button
-------------------------------------------------------------- */
.button {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--radius-regular);
}
.button.primary {
  border: 1px solid var(--text-primary);
  background: var(--text-primary);
  color: var(--bg-primary);
}
.button.primary:hover {
  opacity: .8;
}
.button.secondary {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
}
.button.secondary:hover {
  border-color: var(--border-darker);
  background: var(--bg-secondary);
}
.button.small {
  padding: 4px 16px;
  font-size: var(--font-size-small);
}
.button.regular {
  padding: 6px 20px;
  font-size: var(--font-size-regular);
}

/* --------------------------------------------------------------
/* = Label
-------------------------------------------------------------- */
.label {
  display: inline-block;
  color: var(--text-primary);
  line-height: 100%;
  opacity: 1;
  border-radius: 999px;
  vertical-align: baseline;
}
.label.small {
  font-size: var(--font-size-small);
  padding: 4px 8px;
}
.label.regular {
  font-size: var(--font-size-regular);
  padding: 8px 16px;
}
.label.primary.border {
  border: 1px solid var(--text-primary);
}
.label.secondary.border {
  border: 1px solid var(--border);
}
.label.primary.filled {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.label.secondary.filled {
  background: var(--border);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------
/* = Type utilities
-------------------------------------------------------------- */
.text-color-primary {
  color: var(--text-primary);
}
.text-color-secondary {
  color: var(--text-secondary);
}

.text-align-right {
  text-align: right;
}
.text-align-center {
  text-align: center;
}

.line-height-100 {
  line-height: 100%;
}

.uppercase {
  text-transform: uppercase;
}
.captialize:first-letter {
  text-transform: uppercase;
}

.text-small {
  font-size: var(--font-size-small);
}
.text-regular {
  font-size: var(--font-size-regular);
}
.text-large {
  font-size:  var(--font-size-large);
  width: 100%;
  line-height: 140%;
}

/* --------------------------------------------------------------
/* = Opacity
-------------------------------------------------------------- */
.opacity-75 {
  opacity: 0.75;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-25 {
  opacity: 0.25;
}

/* --------------------------------------------------------------
/* =Type
-------------------------------------------------------------- */
h1 {
  font-size: var(--font-size-large);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.04em;
}
h2, h3, h4, h5, h6 {
  font-size: var(--font-size-regular);
  line-height: 1.2;
  font-weight: 500;
}

p {
  margin: 0;
  font-size: var(--font-size-regular);
  line-height: 1.6;
  display: block;
  hyphens: none;
  -webkit-hyphenate-character: "-";
  
}
a {
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
a.block-link {
  display: block;
  position: relative;
}
ul {
  margin-bottom: 24px;
  padding: 20px;
  list-style: none;
  font-size: var(--font-size-regular);
  color: var(--text-secondary);
}
ul li {
  margin-bottom: 20px;
}
ul li:before {
  display: inline-block;
  content: "-";
  width: 1em;
  margin-left: -1em;
}
p a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: underline;
  text-decoration-color: var(--text-secondary);
  text-underline-offset: 0.1rem;
}
p a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  text-decoration-color: var(--text-primary);
}
hr {
  border-top: 1px solid var(--border);
  background: transparent;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  margin: 5vh 0;
}
code {
  padding: .2em .4em;
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
  color: var(--text-primary);
  background-color: var(--border);
  border-radius: var(--radius-small);
}
blockquote {
  margin: 4vh 0;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-regular);
  color: var(--text-secondary);
  background: var(--border);
  padding: 2vh;
  letter-spacing: -0.04em;
  border-radius: var(--radius-regular);
}
.the-content blockquote p {
  margin: 0;
}
pre {
  margin: 2vh 0;
  padding: 24px;
  font-size: var(--font-size-small);
  background-color: var(--bg-secondary);
  font-family: monospace;
  white-space: pre;
  overflow-x: auto;
  display: block;
  height: auto;
  width: 100%;
  border-radius: var(--radius-small);
}
pre code {
  font-size: var(--font-size-small);
  background-color: var(--bg-secondary);
  font-family: monospace;
  white-space: pre;
  overflow-x: auto;
  display: block;
  height: auto;
  width: 100%;
  border-radius: var(--radius-small);
}
label {
  margin: 0;
  font-size: var(--font-size-regular);
  line-height: 1.6;
  margin-bottom: 4px;
  display: block;
  hyphens: auto;
  -webkit-hyphenate-character: "-";
  margin-top: var(--spacer-small);
}
input, select {
  display: block;
  width: 100%;
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--font-primary);
  border-radius: var(--radius-regular);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 24px top 50%;
  background-size: 0.65rem auto;
}
input[type=submit] {
  display: block;
  cursor: pointer;
  border: 1px solid var(--text-primary);
  background: var(--text-primary);
  color: var(--bg-primary);
  margin-top: var(--spacer-small);
}


/* --------------------------------------------------------------
/* = Spacing
-------------------------------------------------------------- */
.no-margin {
  margin: 0;
}
.no-margin-top {
  margin-top: 0;
}
.no-margin-bottom {
  margin-bottom: 0;
}

.large-margin-bottom {
  margin-bottom: var(--spacer-large);
}
.large-margin-top {
  margin-top: var(--spacer-large);
}
.medium-margin-bottom {
  margin-bottom: var(--spacer-medium);
}
.medium-margin-top {
  margin-top: var(--spacer-medium);
}
.small-margin-bottom {
  margin-bottom: var(--spacer-small);
}
.small-margin-top {
  margin-top: var(--spacer-small);
}

.no-padding {
  margin: 0;
}
.no-padding-top {
  padding-top: 0;
}
.no-padding-bottom {
  padding-bottom: 0;
}

.large-padding-bottom {
  padding-bottom: var(--spacer-large);
}
.large-padding-top {
  padding-top: var(--spacer-large);
}
.medium-padding-bottom {
  padding-bottom: var(--spacer-medium);
}
.medium-padding-top {
  padding-top: var(--spacer-medium);;
}
.small-padding-bottom {
  padding-bottom: var(--spacer-small);
}
.small-padding-top {
  padding-top: var(--spacer-small);
}

.padded-section {
  padding: var(--spacer-large) 0;
}