:root{
  --bg: #f4f7fb;
  --card: #ffffff;
  --accent: #183257;
  --text: #183257;
  --muted: #575756;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(2,8,23,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
               Noto Sans, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

/* ---------- Links im Content ---------- */
.content a,
p a,
ul a {
  color: var(--muted);
  text-decoration: none;
}
.content a:hover,
p a:hover,
ul a:hover {
  text-decoration: underline;
}

/* ---------- Haupt-Container ---------- */
.wrap{
  max-width:1250px;
  margin-inline:auto;
  padding: clamp(16px, 2.5vw, 28px);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Unterseiten schmäler */
.subpage .wrap{
  max-width:820px;
}

/* ---------- Hero-Layout (Startseite) ---------- */
.hero{
  display:grid;
  grid-template-columns: 1fr minmax(420px,45%);
  gap: clamp(12px,4vw,20px);
  align-items: stretch;           /* beide Spalten gleiche Höhe */
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---------- Bildbereich mit Logo ---------- */
.hero-media{
  position:relative;
  overflow:hidden;
  min-height:560px;
}
.hero-media img.bg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Logo im Bild oben links */
.hero-media .brand-logo{
  position:absolute;
  top:40px;
  left:0;
  width:300px;
  height:auto;
  z-index:5;
}

/* ---------- Rechte Content-Spalte ---------- */
.card{
  position: relative;
  background: transparent;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding: clamp(28px, 3.2vw, 36px);
  padding-top: clamp(28px, 4vw, 48px);
}

/* ---------- Unterseiten-Content ---------- */
.subpage .content{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(28px, 3vw, 36px);
  padding-top: clamp(40px, 4vw, 60px);
  margin-top: clamp(12px, 2vw, 24px);
}

/* ---------- Typografie ---------- */
h1 {
  font-size: clamp(24px, 3.4vw, 32px);
  color: var(--accent);
  line-height: 1.2;
  font-weight: bold;
}
h2{
  font-size: clamp(20px, 2.8vw, 28px);
  color: var(--accent);
  margin:0 0 20px 0;
  font-weight: normal;
}
p{color:var(--muted)}
ul {margin:0; padding-left:20px; color:var(--muted);}
li {margin-bottom:4px;}

/* ---------- Kontakt mit Icons ---------- */
.icon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 18px;
}
.contact{
  margin-top:12px;
  display:grid;
  grid-template-columns: auto 1fr;
  gap:8px 12px;
  align-items:center;
  font-size:15px;
}
.contact a{
  color: var(--accent);
  text-decoration:none;
}
.contact a:hover{
  text-decoration: underline;
}

/* ---------- Footer ---------- */
footer{
  display:flex;
  justify-content:flex-end;
  gap:22px;
  margin-top:20px;
  font-size:14px;
  color:var(--muted);
}
footer a{
  color:inherit;
  text-decoration:none;
}
footer a:hover{
  text-decoration:underline;
}

/* ---------- Responsive ---------- */

/* ---------------------------------
   Unter 980px: einspaltiges Layout
------------------------------------*/
@media (max-width:980px){
  .hero {
    grid-template-columns: 1fr;        /* einspaltig */
  }
  .hero-media {
    min-height: 380px;                 /* etwas kleinere Höhe */
  }
  .hero-media .brand-logo {
    width: 300px;
    top: 20px;
    left: 20px;
  }
	
}

/* ---------------------------------
   Sehr kleine Geräte (max 600px)
------------------------------------*/
@media (max-width:600px){
  .hero-media .brand-logo {
    width: 100%;
    top: 0;
    left: -2px;
  }
}

/* ---------------------------------
   Smartphones im Querformat
   (max 900px Breite + landscape)
------------------------------------*/
@media (max-width:900px) and (orientation: landscape) {

  /* Layout anpassen: Bild nicht unnötig strecken */
  .hero {
    align-items: start;
  }

  /* Hero-Bild im Querformat niedriger setzen */
  .hero-media {
    height: 400px;      /* feste Höhe */
    max-height: 400px;  /* Sicherheit */
    min-height: 400px;  /* bleibt konsistent */
  }

  /* Bildausschnitt nach unten verschieben */
  .hero-media img.bg {
    object-position: center 0%;  /* 30 % von oben */
  }


}

/* ---------- Basisschrift ---------- */
body {
  font-size: 17px;   /* Standard: Hochformat & Desktop */
}

/* ---------- Querformat Smartphones ---------- */
@media (max-width:900px) and (orientation: landscape) {
  body {
    font-size: 75% !important; /* im Querformat etwas kleiner */
  }
}


/* ---------- Smartphones im Hochformat ---------- */
@media (orientation: portrait) {
  .hero-media img.bg {
    /* horizontal mittig, vertikal 20 % weiter unten */
    object-position: center 20%;
  }
	
	  /* Hero-Bild im Querformat niedriger setzen */
  .hero-media {
    height: 600px;      /* feste Höhe */
    max-height: 600px;  /* Sicherheit */
    min-height: 600px;  /* bleibt konsistent */
  }
}