/* ==========================================================================
   Table of Contents
   ==========================================================================
   1. FONT FACES
   2. CSS VARIABLES
   3. RESET & BASE STYLES
   4. UTILITY CLASSES
   5. LAYOUT (Page Container, Grid)
   6. COMPONENTS (Header, Nav, Buttons, Cards, Sections, Footer etc.)
   7. MEDIA QUERIES (Anpassungen für größere Bildschirme)
   ========================================================================== */

/* ==========================================================================
   1. FONT FACES - Minimalistisch!
   ========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; /* Normal */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Bold.woff2") format("woff2");
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-ExtraBold.woff2") format("woff2");
  font-weight: 800; /* ExtraBold */
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
     2. CSS VARIABLES
     ========================================================================== */
:root {
  /* Colors */
  --color-primary: #0052cc;
  --color-secondary: #00c6ff;
  --color-accent: #ffeb3b;
  --color-gradient: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  --color-text-dark: #1e293b; /* Slate 800 */
  --color-text-light: #e2e8f0; /* Slate 200 */
  --color-text-muted: #64748b; /* Slate 500 */
  --color-bg-light: #f1f5f9; /* Slate 100 */
  --color-bg-medium: #e2e8f0; /* Slate 200 - Für Borders etc. */
  --color-bg-dark: #0f172a; /* Slate 900 */
  --color-bg-card: #ffffff;
  --color-success: #10b981; /* Emerald 500 */
  --color-white: #ffffff;
  --color-focus-ring: #38bdf8; /* Sky 500 */

  /* Typography */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-heading: "Raleway", sans-serif;
  --text-base-size: 1.125rem; /* 18px */
  --text-scale-ratio: 1.25; /* Faktor für Schriftgrößen-Hierarchie */
  --line-height-base: 1.7;
  --line-height-heading: 1.2;

  /* Spacing (Basis 1rem = 16px) */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 6rem; /* 96px */

  /* Borders & Shadows */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 15px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-focus-ring: 0 0 0 3px var(--color-focus-ring);

  /* Transitions */
  --transition-base: all 0.2s ease-in-out;

  /* Z-Indexes */
  --z-index-header: 100;
  --z-index-nav-links: 101; /* Muss über dem Header liegen, wenn offen */
  --z-index-skip-link: 110;
}

/* ==========================================================================
     3. RESET & BASE STYLES
     ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base-size);
  line-height: var(--line-height-base);
  color: var(--color-text-dark);
  background-color: var(--color-bg-card);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* Verhindert horizontalen Scroll */
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  font-weight: 800; /* Default ExtraBold Raleway */
  margin-block-start: 0;
  margin-block-end: var(--space-md);
} /* Verwende logische Props */
h1 {
  font-size: calc(
    var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio)
  ); /* ca. 3.4rem */
}
h2 {
  font-size: calc(
    var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  ); /* ca. 2.7rem */
}
h3 {
  font-size: calc(
    var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio)
  ); /* ca. 2.2rem */
}
h4 {
  font-size: calc(
    var(--text-base-size) * var(--text-scale-ratio)
  ); /* ca. 1.7rem */
}
p {
  margin-block-start: 0;
  margin-block-end: var(--space-lg);
  max-width: 65ch; /* Verbessert Lesbarkeit langer Texte */
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
} /* Für Listen, die keine typischen Listenzeichen brauchen */

/* Bessere Standard Fokus-Outline für Barrierefreiheit */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--border-radius-sm);
}
/* Fokussierung für Elemente ohne eigenen Fokus-Stil */
:where(:focus-visible):not(
    :where(.button, .nav-link, .nav-toggle, .logo, .pricing-card a)
  ) {
  /* Standard Fokus-Stil, falls kein spezifischer definiert wurde */
}

/* ==========================================================================
     4. UTILITY CLASSES
     ========================================================================== */
.page-container {
  width: 100%;
  max-width: 1240px; /* Etwas breiterer Container */
  margin-inline: auto; /* Logisches Property für links/rechts margin */
  padding-inline: var(--space-lg); /* 24px Padding links/rechts */
}
/* Utility für vertikalen Abstand zwischen direkten Kind-Elementen */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-lg));
} /* Default 24px, kann überschrieben werden mit --flow-space */
.text-center {
  text-align: center;
}
.text-center p,
.text-center h1,
.text-center h2,
.text-center h3 {
  margin-inline: auto; /* Zentriert auch Absätze etc. */
}
.text-muted {
  color: var(--color-text-muted);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  transform: translateY(-150%);
  transition: transform 0.2s ease-in-out;
  z-index: var(--z-index-skip-link);
  border-bottom-right-radius: var(--border-radius-md);
}
.skip-link:focus {
  transform: translateY(0%);
}

/* ==========================================================================
     5. LAYOUT (Grid System)
     ========================================================================== */
.grid {
  display: grid;
  gap: var(--space-xl); /* Standard-Gap 32px */
}
.grid--2-cols {
  grid-template-columns: 1fr;
} /* Mobile: Eine Spalte */
.grid--3-cols {
  grid-template-columns: 1fr;
}
.grid--4-cols {
  grid-template-columns: repeat(2, 1fr);
} /* Mobile: 2 Spalten */
.grid--center-v {
  align-items: center;
}
.justify-content-center {
  justify-content: center;
}

/* ==========================================================================
     6. COMPONENTS
     ========================================================================== */

/* --- Header & Navigation --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-header);
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-sm); /* 12px oben/unten */
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-text-dark);
}
.logo svg {
  color: var(--color-primary);
}
.logo__badge {
  font-size: 0.7rem;
  padding: 0.1em 0.4em;
  background-color: var(--color-accent);
  color: var(--color-text-dark);
  border-radius: var(--border-radius-sm);
  font-weight: 700;
  font-family: var(--font-body);
  vertical-align: middle;
  margin-left: 2px;
}
.nav-toggle {
  display: none; /* Wird in Media Query sichtbar */
  background: none;
  border: none;
  padding: var(--space-xs);
  cursor: pointer;
  z-index: var(--z-index-nav-links); /* Über den Links */
}
.nav-toggle__icon {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background-color: var(--color-text-dark);
  transition: transform 0.3s ease;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.3s ease, top 0.3s ease;
}
.nav-toggle__icon::before {
  top: -7px;
}
.nav-toggle__icon::after {
  top: 7px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background-color: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  transform: translateY(-7px) rotate(-45deg);
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-sm); /* 12px Abstand */
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-link {
  padding: var(--space-xs) var(--space-sm); /* 8px 12px */
  color: var(--color-text-dark);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-base);
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-primary);
  background-color: var(--color-bg-medium);
  text-decoration: none;
}
.nav-link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
  background-color: var(--color-bg-medium);
}
.nav-button {
  margin-left: var(--space-md);
}

/* --- Buttons --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg); /* 12px 24px */
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
}
.button:hover {
  text-decoration: none; /* Keine Unterstreichung bei Buttons */
}
.button__icon {
  width: 1.2em;
  height: 1.2em; /* Größe relativ zur Schrift */
}
.button__icon--right {
  margin-left: var(--space-xs);
}
.button--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.button--primary:hover,
.button--primary:focus-visible {
  background-color: #003d99;
  border-color: #003d99;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.button--gradient {
  background: var(--color-gradient);
  color: var(--color-white);
  border: none;
  background-size: 200% auto;
  box-shadow: 0 5px 15px rgba(0, 82, 204, 0.2);
}
.button--gradient:hover,
.button--gradient:focus-visible {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 82, 204, 0.3);
}
.button--outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.button--outline-primary:hover,
.button--outline-primary:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.button--outline-light {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.button--outline-light:hover,
.button--outline-light:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-text-dark);
}
.button--light {
  background-color: var(--color-white);
  color: var(--color-primary);
} /* Für dunkle Hintergründe */
.button--light:hover,
.button--light:focus-visible {
  background-color: var(--color-bg-medium);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.button--large {
  padding: var(--space-md) var(--space-xl); /* 16px 32px */
  font-size: 1.1rem;
}
.button--full-width {
  width: 100%;
  display: flex;
}

/* --- Sections --- */
.section {
  padding-block: var(--space-3xl); /* 64px oben/unten */
}
.section--contrast {
  background-color: var(--color-bg-light);
}
.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}
.section--dark p,
.section--dark li {
  color: var(--color-text-light);
}
.section__title {
  margin-bottom: var(--space-sm);
}
.section__subtitle {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  margin-top: calc(var(--space-sm) * -1);
  margin-bottom: var(--space-2xl);
  max-width: 70ch;
}
.section--dark .section__subtitle {
  color: var(--color-text-light);
  opacity: 0.85;
}

/* --- Hero Section --- */
.hero-section {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  padding-block-start: var(--space-3xl);
  padding-block-end: var(--space-4xl);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.hero-section::before {
  /* Optional: Subtle background pattern */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    var(--color-text-dark) 0.5px,
    transparent 0.5px
  );
  background-size: 25px 25px;
  opacity: 0.1;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
}
.hero__title {
  color: var(--color-white);
  font-size: calc(
    var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio) * 1.1
  ); /* Noch etwas größer */
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: var(--space-md);
}
.hero__subtitle {
  color: var(--color-text-light);
  opacity: 0.9;
  font-size: 1.3rem;
  margin-bottom: var(--space-xl);
}
.hero__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.hero__image-wrapper {
  margin-inline: auto;
  max-width: 1000px; /* Maximale Breite des Bildcontainers */
}
.hero__image {
  border-radius: var(--border-radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Solution Section --- */
.solution__headline {
  font-size: 1.5rem; /* Kleiner als H2 */
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
.checklist {
  list-style: none;
  padding: 0;
  margin-block-end: var(--space-xl);
}
.checklist li {
  position: relative;
  padding-left: 2em;
  margin-bottom: var(--space-sm);
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
  font-size: 1.2em;
  top: -0.1em;
}
.solution__image-wrapper {
  text-align: center;
}
.solution__image {
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
}

/* --- Features Section --- */
.feature-highlight {
  padding-block: var(--space-2xl);
  border-block-end: 1px solid var(--color-bg-medium);
  margin-block-end: var(--space-2xl);
}
.feature-highlight__icon-wrapper {
  display: inline-block;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}
.feature-highlight__title {
  font-size: 1.75rem;
  font-weight: 700;
}
.feature-highlight__image {
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
}
.feature-points {
  list-style: none;
  padding: 0;
}
.feature-points li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: var(--space-xs);
}
.feature-points li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.2em;
}
.features-grid {
  margin-block-start: var(--space-2xl);
}
.feature-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}
.feature-box__icon {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 0.2em;
}
.feature-box__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-block-end: var(--space-xs);
}
.feature-box p {
  margin-block-end: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* --- Privacy Section --- */
.privacy-card {
  text-align: center;
}
.privacy-card__icon {
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}
.privacy-card__title {
  font-size: 1.1rem;
  font-weight: 700;
}
.privacy-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: none;
}

/* --- Demo Section --- */
.video-placeholder {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
}
.video-placeholder__link {
  display: block;
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-placeholder__link:hover .video-placeholder__play-icon {
  transform: scale(1.1);
}
.video-placeholder__image {
  display: block;
  width: 100%;
}
.video-placeholder__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}
.video-placeholder__caption {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

/* --- Pricing Section --- */
.pricing-card {
  border: 1px solid var(--color-bg-medium);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-bg-card);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--transition-base);
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.pricing-card--highlighted {
  border: 3px solid var(--color-primary);
  position: relative; /* Für Badge */
  transform: scale(1.03);
  z-index: 1;
}
.pricing-card__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background-color: var(--color-accent);
  color: var(--color-text-dark);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
}
.pricing-card__header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-bg-medium);
  text-align: center;
}
.pricing-card--highlighted .pricing-card__header {
  background: var(--color-gradient);
  color: var(--color-white);
  border-bottom: none;
}
.pricing-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}
.pricing-card--highlighted .pricing-card__title {
  color: var(--color-white);
}
.pricing-card__description {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}
.pricing-card--highlighted .pricing-card__description {
  color: var(--color-white);
  opacity: 0.9;
}
.pricing-card__price {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-block: var(--space-xl);
  text-align: center;
}
.pricing-card__price small {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.pricing-card__features {
  padding: 0 var(--space-lg);
  margin-block: var(--space-lg);
  flex-grow: 1;
  list-style: none;
}
.pricing-card__features li {
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: 1.8em;
  font-size: 0.95rem;
}
.pricing-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-secondary);
  font-weight: bold;
}
.pricing-card__features li.feature--disabled {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.pricing-card__features li.feature--disabled::before {
  color: var(--color-text-muted);
  opacity: 0.7;
}
.pricing-card__footer {
  padding: var(--space-lg);
  margin-top: auto;
}
.pricing-footer-note {
  margin-top: var(--space-xl);
  font-size: 0.9rem;
}

/* --- Testimonials Section --- */
.testimonial-card {
  text-align: center;
}
.testimonial-card__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-inline: auto;
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}
.testimonial-card__quote {
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.testimonial-card__quote p {
  max-width: 50ch;
  margin-inline: auto;
} /* Kürzere Zeilen für Zitate */
.testimonial-card__cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--color-text-dark);
  font-size: 0.9rem;
}

/* --- CTA Section --- */
.cta-section {
  background: var(--color-gradient);
  color: var(--color-white);
}
.cta-section__title {
  color: var(--color-white);
  font-size: 2.5rem; /* Etwas kleiner als H2 */
}
.cta-section__subtitle {
  color: var(--color-white);
  opacity: 0.9;
  font-size: 1.2rem;
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

/* --- Footer --- */
.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-muted);
  padding-block: var(--space-xl);
  font-size: 0.9rem;
}
.site-footer a {
  color: var(--color-secondary);
}
.site-footer a:hover {
  color: var(--color-white);
}
.site-footer__copyright time {
  /* Nichts spezielles nötig */
}
.site-footer__disclaimer small {
  font-size: 0.8rem;
}
.site-footer__links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}
.site-footer__links a {
  text-decoration: underline;
}

/* ==========================================================================
     7. MEDIA QUERIES (Anpassungen für größere Bildschirme)
     ========================================================================== */

/* Tablet und größer */
@media (min-width: 768px) {
  :root {
    --text-base-size: 1.125rem; /* Basis bleibt gleich oder leicht erhöhen */
  }
  h1 {
    font-size: calc(
      var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) *
        var(--text-scale-ratio) * var(--text-scale-ratio) * 1.2
    ); /* ~4.1rem */
  }
  h2 {
    font-size: calc(
      var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) *
        var(--text-scale-ratio) * 1.1
    ); /* ~3rem */
  }

  .grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-section {
    padding-block-start: var(--space-4xl);
  }
  .hero__cta-buttons {
    gap: var(--space-lg);
  }

  .section {
    padding-block: var(--space-4xl);
  } /* Mehr Padding auf Desktop */

  .nav-toggle {
    display: block; /* Hamburger Icon sichtbar */
  }
  .main-nav ul {
    display: none; /* Menü standardmäßig versteckt */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md) 0;
    gap: 0;
    z-index: var(--z-index-nav-links);
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
  }
  .main-nav ul.is-active {
    display: flex; /* Menü einblenden */
  }
  .nav-link {
    display: block;
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    font-size: 1.1rem;
  }
  .nav-link:hover,
  .nav-link:focus-visible {
    background-color: var(--color-bg-light);
  }
  .nav-link[aria-current="page"] {
    background-color: var(--color-bg-light);
  }
  .nav-button {
    margin: var(--space-md) var(--space-lg);
  } /* Button im mobilen Menü zentrieren */
}

/* Großer Desktop */
@media (min-width: 1024px) {
  .nav-toggle {
    display: none; /* Hamburger Icon wieder verstecken */
  }
  .main-nav ul {
    display: flex; /* Menü wieder nebeneinander */
    position: static;
    background-color: transparent;
    box-shadow: none;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: var(--space-sm);
    border-radius: 0;
  }
  .nav-link {
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    font-size: 0.95rem;
  }
  .nav-link:hover,
  .nav-link:focus-visible {
    background-color: var(--color-bg-medium);
  }
  .nav-link[aria-current="page"] {
    background-color: var(--color-bg-medium);
  }
  .nav-button {
    margin-left: var(--space-md);
    margin-top: 0;
    margin-bottom: 0;
  } /* Button wieder normal positionieren */

  .pricing-grid {
    gap: var(--space-xl);
  } /* Mehr Abstand zwischen Karten */
  .testimonials-grid {
    gap: var(--space-xl);
  }
}