/* ==================================================
   Custom CSS – kontrolliert responsive (wie Vorlage, nicht zu breit)
   ================================================== */

* { box-sizing: border-box; }

/* ------------------------------------------
   1) Karte / Panel: skaliert leicht je Monitor
      - wächst ein bisschen auf großen Screens
      - schrumpft auf kleineren
      - wird NIE extrem breit
   ------------------------------------------ */
:root{
  /* Karte: min / ideal / max */
  --card-w: clamp(680px, 52vw, 820px);

  /* Bild links: min / ideal / max */
  --img-w: clamp(300px, 26vw, 380px);

  /* Text-Padding: min / ideal / max */
  --pad-l: clamp(2.2rem, 2.4vw, 3.0rem);
  --pad-r: clamp(1.4rem, 1.8vw, 2.2rem);

  /* Offset für den „grünen Streifen“ wie Vorlage */
  --off-x: 5rem;
  --off-y: 2rem;
}

/* Karte + graues Panel immer identisch breit */
.maincard,
.bg {
  width: var(--card-w) !important;
}

/* „Vorlagen“-Offset behalten */
.bg {
  margin-left: calc(-1 * var(--off-x)) !important;
  margin-top:  calc(-1 * var(--off-y)) !important;
}

/* ------------------------------------------
   2) Layout: Bild fix, Text flexibel
   ------------------------------------------ */
.content {
  display: flex !important;
  gap: clamp(1.6rem, 2vw, 2.2rem) !important;
  min-width: 0 !important;
}

.image {
  flex: 0 0 var(--img-w) !important;
}

/* Text: weiter nach innen + kein Überlauf */
.links {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  padding-left: var(--pad-l) !important;
  padding-right: var(--pad-r) !important;
}

/* Kein Buchstaben-Umbruch */
.links a, .links li, .links p, .links h2, .links h3 {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Suchleiste unten etwas bündiger */
.search {
  margin-top: 0 !important;
  padding-bottom: 0.6rem !important;
}

/* ------------------------------------------
   3) Mobile: Bild weg, Karte fast volle Breite
   ------------------------------------------ */
@media (max-width: 900px) {
  .image { display: none !important; }

  :root{
    --card-w: 94vw;
    --pad-l: 1.6rem;
    --pad-r: 1.6rem;
  }
}