/* --- 1. Font-Definitionen (Lokal) --- */
      /* montserrat-regular - latin */
      @font-face {
        font-display: swap;
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 400;
        src: url("../fonts/montserrat-v30-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }
      /* montserrat-italic - latin */
      @font-face {
        font-display: swap;
        font-family: "Montserrat";
        font-style: italic;
        font-weight: 400;
        src: url("../fonts/montserrat-v30-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }
      /* montserrat-700 - latin */
      @font-face {
        font-display: swap;
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 700;
        src: url("../fonts/montserrat-v30-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }
      /* montserrat-800 - latin */
      @font-face {
        font-display: swap;
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 800;
        src: url("../fonts/montserrat-v30-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }

      /* space-grotesk-regular - latin */
      @font-face {
        font-display: swap;
        font-family: "Space Grotesk";
        font-style: normal;
        font-weight: 400;
        src: url("../fonts/space-grotesk-v21-latin-regular.woff2")
          format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }
      /* space-grotesk-700 - latin */
      @font-face {
        font-display: swap;
        font-family: "Space Grotesk";
        font-style: normal;
        font-weight: 700;
        src: url("../fonts/space-grotesk-v21-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }

      /* --- 2. Grund- und Farbstile (Variablen für einfache Anpassung) --- */
      :root {
        --color-background: #b1b3b6; /* Sehr helles, modernes Grau */
        --color-surface: #ffffff; /* Weiß für Inhaltsboxen */
        --color-text: #1a1a1a; /* Fast Schwarz für Text */
        --color-text-light: #555; /* Helleres Grau für Sekundärtext */
        --color-border: #e0e0e0; /* Dünne Trennlinien */
        --color-accent: #00e676; /* Leuchtendes Signal-Grün als Akzent */
        --secondary-accent: #d65d5d; /* Sekundärer Akzent in Rot */

        --font-heading: "Montserrat", sans-serif;
        --font-body: "Space Grotesk", sans-serif;
      }

      /* --- 3. Allgemeine Styles --- */
      body {
        font-family: var(--font-body);
        line-height: 1.7;
        margin: 0;
        padding: 0;
        background-color: var(--color-background);
        background-image: url(../images/gggrain.svg);
        background-attachment: fixed;
        background-size: cover;
        color: var(--color-text);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .container {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
      }

      /* --- 4. Typografie --- */
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: var(--font-heading);
        font-weight: 800;
        color: #000;
        margin-bottom: 0.75em;
      }

      a {
        font-weight: 600;
        color: var(--secondary-accent);
        text-decoration: none;
        transition: color 0.2s ease;
      }
      a:hover {
        color: var(--color-accent);
      }
      /* --- 5. Spezifische Komponenten-Styles --- */
      /* Header */
      header {
        padding: 40px 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .header-content {
        display: flex;
        align-items: center;
        gap: 25px;
      }

      .header-content img {
        max-width: 100%;
        height: auto;
        display: block;
        padding: 1rem;
        box-sizing: border-box; /* KORREKTUR: Verhindert, dass Padding die Gesamtbreite erhöht und zum Überlaufen führt */
      }

      header h1 {
        margin: 0;
        font-size: clamp(2em, 5vw, 3em); /* Responsive Schriftgröße */
        line-height: 1.1;
      }

      /* Hero Section (Main Call to Action) */
      .hero {
        text-align: center;
        background-color: var(--color-surface);
        padding: 50px 30px;
        border-radius: 6px;
        border: 1px solid var(--color-border);
        margin-bottom: 40px;
      }

      .hero h2 {
        font-size: clamp(1.8em, 6vw, 2em);
        margin-top: 0;
      }

      .hero p {
        font-size: 1.2em;
        color: var(--color-text-light);
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
      }

      /* Call to Action Button */
      .cta-button {
        display: inline-block;
        background-color: var(--color-accent);
        color: #000;
        padding: 15px 35px;
        font-family: var(--font-heading);
        font-size: 1.1em;
        font-weight: 700;
        text-decoration: none;
        border-radius: 4px;
        transition: transform 0.2s ease, background-color 0.2s ease;
        margin-top: 20px;
      }

      .cta-button:hover {
        background-color: var(--secondary-accent);
        transform: translateY(-3px);
        color: #000;
      }

      /* Content Sections */
      .content-section {
        background-color: var(--color-surface);
        padding: 40px;
        margin-bottom: 30px;
        border-radius: 6px;
        border: 1px solid var(--color-border);
      }

      .content-section h2 {
        border-bottom: 3px solid var(--color-accent);
        padding-bottom: 15px;
        margin-top: 0;
        font-size: 1.8em;
      }

      /* Tutorial Steps Styling */
      .tutorial-steps {
        list-style: none;
        padding-left: 0;
        counter-reset: step-counter;
      }

      .tutorial-steps li {
        counter-increment: step-counter;
        margin-bottom: 30px;
        padding-left: 55px;
        position: relative;
      }

      .tutorial-steps li::before {
        content: counter(step-counter);
        position: absolute;
        left: 0;
        top: 0;
        width: 38px;
        height: 38px;
        background-color: var(--color-accent);
        color: #000;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1.2em;
      }

      .tutorial-steps h3 {
        font-size: 1.3em;
        margin: 0 0 5px 0;
        color: var(--color-text);
      }

      /* Features List */
      .features-list {
        list-style-type: none;
        padding-left: 0;
      }

      .features-list li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 12px;
      }

      .features-list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 2px;
        color: var(--color-accent);
        font-size: 1.2em;
        font-weight: bold;
      }

      strong {
        font-weight: 700;
      }

      .partner-logos {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        margin-top: 30px;
        flex-wrap: wrap;
        margin-top: 50px;
      }

      .partner-logos img {
        max-width: 100%;
        height: auto;
        flex-shrink: 1; /* Allows images to shrink if needed */
        max-height: 80px; /* Optional: set consistent height */
      }

      /* Footer */
      footer {
        text-align: center;
        padding: 0px 20px;
        font-size: 0.9em;
        color: #f3f1f1;
        background-color: rgba(31, 30, 30, 0.7);
      }

      footer p {
        margin: 0;
      }