:root {
  /* Stellschrauben */
  --accent: #ffffff;           /* Rahmen-/Akzentfarbe (blau) #3b82f6 */
  --card: rgb(31, 31, 31);             /* HEX: #1f1f1f Kartenhintergrund */
  --bg: #000;                  /* Bühnenhintergrund */
  --text: #eef3f9;             /* Primärtext */
  --muted: #b8c3d3;            /* Sekundärtext */
  --radius: 0.8vmin;             /* Rundungen */
  --gap: 3vmin;                /* Grid-Abstand */
  --pad: 3vmin;                /* Innenabstand der Karte */

  /* Bildsteuerung */
  --image-width: 40vw;
  --image-height: 40vmin;
  --image-object-fit: contain;   /* cover | contain */
}

* { 
  box-sizing: border-box;
  font-family: "Montserrat"; 
}

html, body { height: 100%; margin: 0; }

body {
  display: grid;
  place-items: center;
  background: var(--bg);
}

/* === Karte / Layout === */
.wrapper {
  display: grid;
  grid-template-columns: 0.8fr 1fr;           /* Bild : Text Verhältnis */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "title title"
    "image text";
  gap: var(--gap);
  width: 100%;
  height: 100%;
  background: var(--card);
  padding: var(--pad);
  color: var(--text);
}

/* === Titelbereich === */
.title {
  grid-area: title;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2vmin 2vmin;
  background: black;
  /*rgba(255,255,255,0.03)*/
  border-radius: var(--radius);
  height: 30vmin;
}
h1 {
  margin: 0;
  font-size: 6vmin;
  font-weight: 700;
}

/* === Bildbereich === */
.image {
  grid-area: image;
  display: grid;
  place-items: center;
  background: black;
  border-radius:var(--radius);
 
}
.image > img {
  width: var(--image-width);
  height: var(--image-height);
  object-fit: var(--image-object-fit);
  display: block;
  border-radius: var(--radius);
}

/* === Textbereich === */
.text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5vmin 2vmin;
  background: black;            
  border-radius: var(--radius);
/* rgba(255,255,255,0.03) */
}
p {
  margin: 0;
  font-size: 4.5vmin;
  color: var(--text);
  hyphens: auto;
}