/* ------------------------------------------------------------
   Jan Ryboth Gebäudereinigung – Basis-Styling
   Moderne, schnelle, zugängliche Gestaltung (Mobile-first)
------------------------------------------------------------- */
:root{
  --brand:#1f3c88;      /* tiefes Blau */
  --accent:#e63946;     /* Akzentrot für das Y */
  --ink:#0b132b;        /* Textfarbe */
  --muted:#5c677d;      /* Sekundärtext */
  --bg:#ffffff;         /* Hintergrund */
  --bg-alt:#f6f7fb;     /* Section-Alternate */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.container{width:min(1100px, 92%); margin-inline:auto}

.h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem); margin:0 0 .8rem}
.lead{font-size:clamp(1.05rem, .95rem + .4vw,1.25rem); color:var(--muted)}

.section{padding: clamp(2.2rem, 1.6rem + 2.2vw, 4rem) 0}
.section--alt{background:var(--bg-alt)}

.btn{
  display:inline-block; padding:.8rem 1.1rem; border-radius:12px;
  text-decoration:none; font-weight:600; border:2px solid transparent;
  transition:.2s ease; line-height:1;
}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{border-color:var(--brand); color:var(--brand); background:transparent}
.btn--ghost:hover{background:rgba(31,60,136,.06)}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0; gap:.8rem; font-size:.95rem;
}
.topbar__cta a{margin-left:.4rem}

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .6rem 0 1rem;
  border-bottom:1px solid #eaeef7;
}
.logo{font-weight:800; font-size:1.6rem; letter-spacing:.5px; text-transform:uppercase; color:var(--ink); text-decoration:none}
.logo__r{color:var(--brand)}
.logo__y{color:var(--accent)}
.nav__toggle{display:none; font-size:1.4rem; background:none; border:none; cursor:pointer}
.nav__menu a{
  text-decoration:none; color:var(--ink);
  padding:.6rem .7rem; border-radius:10px; font-weight:600;
}
.nav__menu a:hover{background:rgba(31,60,136,.06)}
@media (max-width: 900px){
  .nav__toggle{display:block}
  .nav__menu{display:none; position:absolute; right:4%; top:110px; background:#fff; padding:.6rem; border-radius:12px; box-shadow:var(--shadow)}
  .nav__menu.open{display:grid}
}

.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
  padding: 2rem 0 1rem;
}
.hero__copy .hero__cta{display:flex; gap:.6rem; margin:1rem 0 1rem}
.hero__bullets{color:var(--muted); display:grid; gap:.25rem; padding-left:1rem}
.hero__media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr;}
}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.2rem}
.card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card>img{width:100%; height:200px; object-fit:cover}
.card__body{padding:1rem}
.card__body h3{margin:0 0 .3rem; font-size:1.15rem}
.card__link{display:inline-block; margin-top:.4rem; font-weight:600; color:var(--brand); text-decoration:none}
.card__link:hover{text-decoration:underline}
@media (max-width:900px){
  .cards{grid-template-columns:1fr}
}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.feature{background:#fff; border:1px solid #e7e7ef; border-radius:12px; padding:1rem}
.feature h3{margin:0 0 .4rem; font-size:1.05rem}
@media (max-width:900px){
  .features{grid-template-columns:1fr}
}

.steps{display:grid; gap:.5rem; padding-left:1rem}

.contact{display:grid; grid-template-columns: .9fr 1.1fr; gap:1.5rem; align-items:start}
.form{background:#fff; border-radius:14px; padding:1rem; box-shadow:var(--shadow)}
.form__row{display:grid; gap:.3rem; margin-bottom:.7rem}
.form__row--check{grid-template-columns:auto 1fr; align-items:start; gap:.6rem}
.form input, .form select, .form textarea{
  width:100%; padding:.7rem .8rem; border:1px solid #cfd6e6; border-radius:10px; font:inherit;
}
.form input:focus, .form select:focus, .form textarea:focus{outline:2px solid rgba(31,60,136,.35); border-color:var(--brand)}
.form__actions{display:flex; align-items:center; gap:1rem}
.form__hint{color:var(--muted); margin:0}
@media (max-width:900px){
  .contact{grid-template-columns:1fr}
}

.map-wrap{border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.map-wrap iframe{width:100%; height:420px; border:0}

.site-footer{background:#0d1b2a; color:#fff; margin-top:2rem}
.footer__grid{display:grid; grid-template-columns: 1.1fr .9fr .6fr; gap:1.2rem; padding:1.6rem 0}
.footer__nav a{color:#c6d0eb; text-decoration:none; margin-right:.8rem}
.footer__nav a:hover{text-decoration:underline}
.logo--footer{color:#fff}
.footer__legal{display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.1); padding:1rem 0}
@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr}
  .footer__legal{flex-direction:column; gap:.6rem; align-items:flex-start}
}

.alt-page .subheader{background:var(--bg-alt); border-bottom:1px solid #eaeef7}
.subheader__inner{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
.breadcrumb a{color:var(--brand); text-decoration:none}
.list{line-height:1.9}