/* ------------------------------
   Design-Tokens
--------------------------------*/
:root {
  --bg-solid: #56c044;      /* grüner Vollton-Hintergrund      */
  --accent  : #D5048A;      /* Banner & Footer                 */
  --text    : #000;
  --card-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* ------------------------------
   Reset & Basis
--------------------------------*/
*,
*::before,
*::after { box-sizing:border-box; margin:0; padding:0; }

html, body{ height:100%; font-family:Arial, sans-serif; }

body{
  display:flex;
  flex-direction:column;
  background:var(--bg-solid);
  color:var(--text);
}

/* ------------------------------
   Banner
--------------------------------*/
header{
  width:100%;
  background:var(--accent);
  color:#fff;
  text-align:center;
  padding:3rem 1rem;
  border-bottom-left-radius:2rem;
  border-bottom-right-radius:2rem;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}

header *, header a{ color:#fff; text-decoration:none; }

nav ul{
  list-style:none;
  display:flex;
  gap:1.5rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1.5rem;
}

/* ------------------------------
   Intro-Abschnitt (ohne weiße Box)
--------------------------------*/
.intro{
  margin:4rem auto;
  max-width:1200px;
  padding:0 2rem;
}

/* Bild links, Text rechts (vertikal mittig) */
.intro-row{
  display:flex;
  align-items:center;     /* mittig am Bild ausrichten */
  justify-content:center; /* zentriert im Container    */
  flex-wrap:wrap;         /* umbrechen bei kleineren Breiten */
  gap:2rem;
}

/* Bild ~20 % kleiner */
.photo{
  flex:0 0 480px;
  max-width:480px;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:var(--card-shadow);
}

.photo img{ width:100%; height:auto; display:block; }

/* Caption rechts neben dem Bild */
.caption-side{
  flex:1 1 300px;         /* darf sich anpassen */
  font-size:1.5rem;
  line-height:1.4;
  text-align:left;
  color:var(--text);
  overflow-wrap:anywhere; /* bricht lange Wörter */
}

/* Botschaft unter Bild+Text */
.message{
  margin:3rem auto 0;
  max-width:800px;
  font-size:1.25rem;
  line-height:1.8;
  text-align:center;
}

.message strong{ color:var(--accent); }

/* Responsive – stapeln unter 900 px */
@media (max-width:900px){
  .intro-row{
    flex-direction:column;
  }
  .caption-side{
    text-align:center;
  }
}

/* ------------------------------
   Karten (nur Unterseiten)
--------------------------------*/
.legal{
  background:#fff;
  border-radius:1rem;
  box-shadow:var(--card-shadow);
  max-width:800px;
  margin:4rem auto;
  padding:2rem 1.5rem;
  line-height:1.8;
}

/* ------------------------------
   Footer – Sticky & modern
--------------------------------*/
main{ flex:1; }

footer{
  width:100%;
  background:var(--accent);
  color:#fff;
  text-align:center;
  font-size:.9rem;
  padding:1.5rem 1rem 2.5rem;
  border-top-left-radius:2rem;
  border-top-right-radius:2rem;
  box-shadow:0 -6px 20px rgba(0,0,0,.15);
}

footer a{ color:#fff; text-decoration:none; }