:root{
  --bg:#f5f5f5;
  --surface:#ffffff;
  --text:#333;
  --muted:#555;
  --brand:#b22222;         /* Bordeaux-Rot */
  --brand-hover:#8d1b1b;
  --accent:#006400;        /* Dunkelgrün */
  --soft:#e0f2e0;          /* zartes Grün */
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.10);
  --container-w: min(100%, 60rem);
}

/* Reset/Grundlagen */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* Layout */
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.container{
  width:var(--container-w);
  margin-inline:auto;
  padding:1.25rem;
}

/* Header / Nav */
.site-header{
  background:var(--surface);
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:50;
}

.logo{
  font-weight:800;
  color:var(--brand);
  letter-spacing:.2px;
}

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.site-nav ul{
  list-style:none;
  display:flex;
  gap:.25rem;
  background:var(--brand);
  border-radius:999px;
  padding:.25rem;
  margin:0;
}

.site-nav a{
  color:#fff;
  font-weight:600;
  padding:.55rem 1rem;
  border-radius:999px;
  display:block;
}

.site-nav a[aria-current="page"]{
  background:#fff;
  color:var(--brand);
}

.site-nav a:hover{
  background:var(--brand-hover);
}

/* mobile nav button */
.nav-toggle{
  display:none;
  background:var(--brand);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:.6rem .8rem;
  font-weight:700;
}

/* Inhalt */
main.container{
  background:var(--surface);
  margin-top:1.25rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

h1{
  color:var(--brand);
  margin:0 0 1rem 0;
}

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.card{
  background:#fff;
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:1rem 1.25rem;
}
.card h3{margin-top:0}
/* ===========================
   LEISTUNGEN – Einheitliche Bildgröße
   =========================== */
.card img {
  width: 100%;
  height: 220px;              /* einheitliche Höhe für alle Bilder */
  object-fit: cover;          /* schneidet überstehende Ränder sauber ab */
  border-radius: 10px 10px 0 0; /* oben leicht abgerundet, passt zum Card-Design */
  display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}


/* Über mich – Bild rechts, Text links */
.about-content{
  display:flex;
  align-items:flex-start;
  gap:1.25rem;
  flex-wrap:wrap; /* Sicherheitsnetz bei mittleren Breiten */
}

.about-text{
  flex:1 1 55%;
  min-width:17rem;
}

.about-image{
  flex:1 1 40%;
  min-width:14rem;
  margin:0;
}

.about-image img{
  width:100%;
  height:auto;
  border-radius:10px;
  object-fit:cover;
}

.fact-box{
  background:var(--soft);
  padding:1rem;
  border-left:4px solid var(--brand);
  border-radius:8px;
  margin-top:1rem;
}

figure{margin:0}

/* Kontaktformular */
.contact-form{
  display:grid;
  gap:.9rem;
  max-width:36rem;
}
.contact-form label{
  display:grid;
  gap:.5rem;
  font-weight:600;
}
.contact-form input,
.contact-form textarea{
  border:1px solid #ddd;
  border-radius:8px;
  padding:.7rem .8rem;
  font:inherit;
}
.contact-form button{
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:.75rem 1rem;
  font-weight:700;
  cursor:pointer;
}
.contact-form button:hover{filter:brightness(.95)}

/* Footer */
.site-footer{
  color:var(--muted);
  text-align:center;
  padding:2rem 0;
}

/* Responsive */
@media (max-width: 960px){
  .cards{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 768px){
  .site-header .container{flex-wrap:wrap}
  .nav-toggle{display:inline-block}
  .site-nav ul{
    display:none;
    flex-direction:column;
    background:#fff;
    border-radius:12px;
    padding:.5rem;
    box-shadow:var(--shadow);
  }
  .site-nav ul.open{display:flex}
  .site-nav a{color:var(--brand)}
  .site-nav a[aria-current="page"]{background:var(--brand);color:#fff}

  .cards{grid-template-columns:1fr}

  /* Über mich: untereinander auf Mobil */
  .about-content{flex-direction:column}
  .about-image, .about-text{min-width:auto;flex:1 1 auto}
}

/* Sicherheitsnetz gegen horizontales Scrollen */
html, body{overflow-x:hidden}