/* Text-Utilities (präfix gc- zur Konfliktvermeidung) */
.gc-body { font-size: 1rem; line-height: 1.6; }
.gc-lead { font-size: 1.125rem; line-height: 1.7; }

.gc-h1 { font-size: 2.25rem; line-height: 1.2; font-weight: 800; }
.gc-h2 { font-size: 1.875rem; line-height: 1.25; font-weight: 700; }
.gc-h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; }

/* Skalierbare Textgrößen */
.gc-text-xxs { font-size: 0.65rem; }
.gc-text-xs  { font-size: 0.75rem; }
.gc-text-sm  { font-size: 0.875rem; }
.gc-text-base{ font-size: 1rem; }
.gc-text-lg  { font-size: 1.125rem; }
.gc-text-xl  { font-size: 1.25rem; }
.gc-text-2xl { font-size: 1.5rem; }
.gc-text-3xl { font-size: 1.875rem; }
.gc-text-4xl { font-size: 2.25rem; }
.gc-text-5xl { font-size: 3rem; }

/* Line-Height Defaults */
.gc-text-xxs,
.gc-text-xs,
.gc-text-sm,
.gc-text-base,
.gc-text-lg,
.gc-text-xl { line-height: 1.6; }

.gc-text-2xl,
.gc-text-3xl,
.gc-text-4xl,
.gc-text-5xl { line-height: 1.25; }

/* Optional: Weights */
.gc-thin { font-weight: 300; }
.gc-normal { font-weight: 400; }
.gc-bold  { font-weight: 700; }

/* Globale Responsive-Regeln (wir überschreiben einige Tailwind-Utilities bewusst mit !important) */

/* Laptop: < 1440px */
@media (max-width: 1440px) {
  /* Breite Container schmaler machen */
  .w-3\/5,
  .w-2\/4,
  .w-1\/3,
  .w-4\/12,
  .w-5\/13 {
    width: 70% !important;
  }

  /* Typografie Laptop (Tailwind-Textklassen leicht verkleinern) */
  .text-4xl { font-size: 1.5rem  !important; line-height: 1.35 !important; }
  .text-3xl { font-size: 1.4rem  !important; line-height: 1.35 !important; }
  .text-2xl { font-size: 1.3rem  !important; line-height: 1.35 !important; }
  .text-xl  { font-size: 1.0rem !important; line-height: 1.5 !important; }
  .text-m  { font-size: 0.95rem !important; line-height: 1.6 !important; }
}

/* Laptop: < 1100px */
@media (max-width: 1100px) {
  /* Breite Container schmaler machen */
  .w-3\/5,
  .w-2\/4,
  .w-1\/3,
  .w-4\/12,
  .w-5\/13 {
    width: 80% !important;
  }

  /* Typografie Laptop (Tailwind-Textklassen weiter verkleinern) */
  .text-4xl { font-size: 1.4rem  !important; line-height: 1.35 !important; }
  .text-3xl { font-size: 1.3rem  !important; line-height: 1.35 !important; }
  .text-2xl { font-size: 1.2rem  !important; line-height: 1.35 !important; }
  .text-xl  { font-size: 0.9rem !important; line-height: 1.5 !important; }
  .text-m  { font-size: 0.85rem !important; line-height: 1.6 !important; }
}

/* Tablet: < 888px (unter lg) */
@media (max-width: 888px) {
  /* kleiner Seitenrand links/rechts */
  html, body { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }
  body { padding-inline: 12px !important; }

  /* Abstände etwas reduzieren */
  .abst { margin-top: 70px !important; }

  /* Navbar kompakter */
  .navbar-links { gap: 1rem !important; }
  .navbar-logo { width: auto !important; margin: 0 !important; }
  .navbar .navbar-logo img { height: 5.5rem !important; /* Feste Höhe für Tablet-Logo */ }

  /* Breite Container schmaler machen */
  .w-3\/5,
  .w-2\/4,
  .w-1\/3,
  .w-4\/12,
  .w-5\/13 {
    width: 90% !important;
  }

  /* Typografie Tablet (Tailwind-Textklassen verkleinern) */
  .text-5xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
  .text-4xl { font-size: 1.5rem  !important; line-height: 1.25 !important; }
  .text-3xl { font-size: 1.375rem!important; line-height: 1.3 !important; }
  .text-2xl { font-size: 1.2rem  !important; line-height: 1.35 !important; }
  .text-xl  { font-size: 1.05rem !important; line-height: 1.5 !important; }
  .text-lg  { font-size: 1rem    !important; line-height: 1.55 !important; }
  .text-base{ font-size: 0.92rem !important; line-height: 1.6 !important; }
  .text-sm  { font-size: 0.8rem  !important; line-height: 1.6 !important; }
  .text-xs  { font-size: 0.7rem  !important; line-height: 1.6 !important; }

  /* Fallback für nackte Überschriften ohne Klassen */
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.2rem !important; }

  /* Kachel-/Feature-Bilder (Guide, News, Collection, Hall of Fame) kleiner */
  main a img,
  .abst a img,
  .grid a img,
  .tiles img,
  .cards img {
    width: clamp(150px, 28vw, 220px) !important;
    height: auto !important;
  }

  /* Footer in Spalten zwingen (starke Overrides) */
  footer, .footer, #footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }
  footer.flex, .footer.flex, #footer.flex { display: flex !important; }
  footer.flex-row, .footer.flex-row, #footer.flex-row { flex-direction: column !important; }
  footer .flex-row, .footer .flex-row, #footer .flex-row { flex-direction: column !important; }
  footer > .flex, .footer > .flex, #footer > .flex { flex-direction: column !important; }
  footer > *, .footer > *, #footer > * { width: 100% !important; }

  /* Spezifisch für das Website-Menü für 2x2 Grid */
  .website-menu-container {
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: center !important;
  }
  .website-menu-container > .w-4\/14 {
    width: calc(50% - 1rem) !important;
  }

  .hide-on-small-screen {
    display: none !important;
  }
}

/* Mobile: < 425px (unter sm) */
@media (max-width: 425px) {
  /* größerer Seitenrand links/rechts */
  html, body { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }
  body { padding-inline: 16px !important; }

  /* Navbar untereinander und kleiner */
  .navbar-links { flex-wrap: wrap !important; justify-content: center !important; gap: 0.75rem !important; }
  .navbar-logo { margin: 0 !important; width: 3rem !important; }
  .navbar .navbar-logo img { height: 3.5rem !important; /* Feste Höhe für Tablet-Logo */ }

  /* Abstände */
  .abst { margin-top: 40px !important; }

  /* Breite Container auf volle Breite */
  .w-3\/5,
  .w-2\/4,
  .w-1\/3,
  .w-4\/12,
  .w-5\/13 {
    width: 100% !important;
  }

  /* Reihen in Content-Bereichen untereinander stacken (Ausnahme für das Menü) */
  .abst .flex-row,
  .w-3\/5 > .flex-row:not(.website-menu-container),
  .w-2\/4 .flex-row {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Horizontalen Abstand in vertikale Abstände umwandeln */
  .space-x-15, .space-x-25, .space-x-35 { column-gap: 0 !important; row-gap: 1rem !important; }

  /* Bilder generell responsiv */
  img { max-width: 100% !important; height: auto !important; }

  /* Typografie Mobile (deutlich kleiner) */
  .text-5xl { font-size: 1.25rem    !important; line-height: 1.2 !important; }
  .text-4xl { font-size: 1.15rem  !important; line-height: 1.25 !important; }
  .text-3xl { font-size: 0.85rem    !important; line-height: 1.3 !important; }
  .text-2xl { font-size: 0.75rem !important; line-height: 1.35 !important; }
  .text-xl  { font-size: 0.75rem   !important; line-height: 1.5 !important; }
  .text-lg  { font-size: 0.65rem    !important; line-height: 1.55 !important; }
  .text-base{ font-size: 0.65rem  !important; line-height: 1.6 !important; }
  .text-sm  { font-size: 0.6rem   !important; line-height: 1.6 !important; }
  .text-xs  { font-size: 0.6rem    !important; line-height: 1.6 !important; }

  /* Fallback für nackte Überschriften ohne Klassen */
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Kachel-/Feature-Bilder noch kleiner */
  main a img,
  .abst a img,
  .grid a img,
  .tiles img,
  .cards img {
    width: clamp(120px, 42vw, 180px) !important;
    height: auto !important;
  }

  /* Footer als Spalte, mittig (starke Overrides) */
  footer, .footer, #footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }
  footer.flex, .footer.flex, #footer.flex { display: flex !important; }
  footer.flex-row, .footer.flex-row, #footer.flex-row { flex-direction: column !important; }
  footer .flex-row, .footer .flex-row, #footer .flex-row { flex-direction: column !important; }
  footer > .flex, .footer > .flex, #footer > .flex { flex-direction: column !important; }
  footer > *, .footer > *, #footer > * { width: 100% !important; }
}