*{box-sizing:border-box} body{margin:0;background:#eaf1f8;color:#0f1f35;font-family:Arial,Helvetica,sans-serif;line-height:1.55} a{color:#0b4d86} .site-shell{width:min(1320px,calc(100% - 28px));margin:20px auto 34px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 22px 65px rgba(24,42,70,.14);border:1px solid rgba(255,255,255,.8)}.hero{min-height:340px;background:linear-gradient(90deg,rgba(4,22,48,.88),rgba(4,22,48,.42)),url('../img/banner-armin.jpg') center/cover no-repeat;display:flex;align-items:center;padding:44px 58px;color:#fff}.hero-text{max-width:720px}.eyebrow{display:inline-flex;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 13px;font-weight:800;margin-bottom:12px}.hero h1{font-size:54px;line-height:1.02;margin:0 0 12px;text-shadow:0 3px 18px rgba(0,0,0,.3)}.hero p{font-size:28px;margin:0;font-weight:700;text-shadow:0 3px 14px rgba(0,0,0,.24)}.main-nav{display:flex;gap:8px;flex-wrap:wrap;padding:14px 28px;background:#fff;border-bottom:1px solid #e2e8f0}.main-nav a{text-decoration:none;color:#0f2b4d;font-weight:900;border-radius:999px;padding:10px 15px}.main-nav a:hover,.main-nav a.active{background:#0b4d86;color:#fff}.main-nav .admin-link{margin-left:auto;background:#f4f7fb;border:1px solid #dbe4ef}.notice{margin:22px 36px 0;border-left:6px solid #0b4d86;background:#eef6ff;border-radius:14px;padding:14px 18px;font-weight:800;color:#15385f}.content{padding:34px 42px 42px}.content h2{font-size:38px;line-height:1.15;margin:0 0 14px;color:#102a4c}.content h3{font-size:24px;margin:0 0 9px;color:#123b68}.lead{font-size:20px;color:#40516b}.kicker{display:inline-flex;background:#fff7e2;color:#7b560d;border:1px solid #ecd496;border-radius:999px;padding:7px 13px;font-weight:900;margin-bottom:14px}.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;margin-bottom:30px}.rounded-image,.content-photo{width:100%;border-radius:24px;box-shadow:0 18px 42px rgba(15,35,60,.13);border:1px solid #e4ebf3}.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.btn{display:inline-flex;text-decoration:none;background:#0b4d86;color:#fff!important;border-radius:999px;padding:12px 20px;font-weight:900}.btn.light{background:#fff;color:#0b4d86!important;border:1px solid #ccd9e8}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.card-grid article,.text-card,.contact-box{background:#f8fbff;border:1px solid #dce7f3;border-radius:22px;padding:24px;box-shadow:0 10px 28px rgba(15,35,60,.055)}.image-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}.image-strip img{width:100%;height:340px;object-fit:cover;border-radius:24px;box-shadow:0 14px 34px rgba(15,35,60,.11)}.image-strip.gallery{grid-template-columns:repeat(3,1fr)}.image-strip.gallery img{height:280px}.contact-box a{font-weight:900}.footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px 36px;background:#0b2440;color:#dbeafe}.footer a{color:#fff;font-weight:900}@media(max-width:860px){.site-shell{width:100%;margin:0;border-radius:0}.hero{min-height:280px;padding:32px 24px}.hero h1{font-size:36px}.hero p{font-size:22px}.main-nav .admin-link{margin-left:0}.content{padding:24px 18px}.intro-grid,.card-grid,.image-strip,.image-strip.gallery{grid-template-columns:1fr}.image-strip img,.image-strip.gallery img{height:260px}.notice{margin:18px 18px 0}.footer{padding:20px}}


/* =========================================================
   Banner-Helligkeit Fix
   Entfernt den dunklen Schleier aus dem Header-Banner.
   Die Lesbarkeit bleibt über eine kleine Textbox erhalten,
   nicht über Abdunkelung des gesamten Bildes.
   ========================================================= */
.hero{
  background-image:url('../img/banner-armin.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#dff3ff !important;
}

.hero-text{
  background:rgba(5,31,58,.22);
  border:1px solid rgba(255,255,255,.28);
  border-radius:22px;
  padding:20px 24px;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}

.hero h1,
.hero p,
.eyebrow{
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}

@media(max-width:860px){
  .hero{
    background-position:62% center !important;
  }
  .hero-text{
    padding:16px 18px;
    border-radius:18px;
  }
}


/* =========================================================
   Finale Banner-Feineinstellung
   - Schriftrahmen fast unsichtbar / sehr transparent
   - weisse Schrift mit feiner dunkler Kontur
   ========================================================= */
.hero-text{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

.eyebrow{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

.hero h1,
.hero p,
.eyebrow{
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.32),
     1px -1px 0 rgba(0,0,0,.32),
    -1px  1px 0 rgba(0,0,0,.32),
     1px  1px 0 rgba(0,0,0,.32),
     0    2px 8px rgba(0,0,0,.14) !important;
}


/* =========================================================
   FINAL: Blauer-Himmel-Banner als echtes Bild, kein Abschneiden
   ========================================================= */

.site-shell{
  width:min(1320px,calc(100% - 28px)) !important;
  margin:14px auto 24px !important;
  border-radius:22px !important;
}

/* Wichtig: Banner ist jetzt ein echtes Bild, kein Hintergrund.
   Dadurch wird oben/unten nichts mehr abgeschnitten. */
.hero{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  display:block !important;
  background:none !important;
  overflow:hidden !important;
}

.hero-banner-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border:0 !important;
}

.hero-text{
  display:none !important;
}

.hero::before,
.header-hero::before,
.start-hero::before,
.banner::before{
  display:none !important;
  opacity:0 !important;
}

/* Navigation kompakt und gruen */
.main-nav{
  padding:10px 24px !important;
  gap:8px !important;
}
.main-nav a{
  padding:8px 14px !important;
  font-size:18px !important;
  color:#0f2b4d !important;
}
.main-nav a:hover,
.main-nav a.active,
.btn{
  background:#1c8b49 !important;
  color:#fff !important;
}
.main-nav .admin-link{
  margin-left:auto;
  background:#f7fbf8 !important;
  border:1px solid #cfe4d6 !important;
  color:#1c6a3d !important;
}
.main-nav .admin-link:hover{
  background:#1c8b49 !important;
  color:#fff !important;
  border-color:#1c8b49 !important;
}

.notice{
  margin:18px 32px 0 !important;
  padding:12px 16px !important;
  border-left:6px solid #1c8b49 !important;
  background:#eef8f1 !important;
  color:#1f4d31 !important;
  font-size:17px !important;
}

/* Inhalte kleiner/kompakter */
.content{
  padding:24px 34px 30px !important;
}
.content h2{
  font-size:30px !important;
  margin:0 0 10px !important;
}
.content h3{
  font-size:21px !important;
  margin:0 0 7px !important;
}
.lead{
  font-size:17px !important;
}
.kicker{
  padding:5px 11px !important;
  font-size:14px !important;
  margin-bottom:10px !important;
}
.intro-grid{
  gap:24px !important;
  margin-bottom:22px !important;
}
.card-grid{
  gap:14px !important;
  margin:18px 0 !important;
}
.card-grid article,
.text-card,
.contact-box{
  padding:18px !important;
  border-radius:18px !important;
}
.button-row{
  gap:10px !important;
  margin-top:16px !important;
}
.btn{
  padding:10px 16px !important;
  font-size:15px !important;
}
.btn.light{
  background:#fff !important;
  color:#1c8b49 !important;
  border:1px solid #b7d7c3 !important;
}
.rounded-image,
.content-photo{
  border-radius:18px !important;
}
.image-strip{
  gap:14px !important;
  margin:18px 0 !important;
}
.image-strip img{
  height:240px !important;
  border-radius:18px !important;
}
.image-strip.gallery img{
  height:210px !important;
}

/* Besucherzaehler */
.counter-bar{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 24px;
  background:#f3faf5;
  border-top:1px solid #d7eadc;
}
.counter-item{
  min-width:105px;
  text-align:center;
  background:#fff;
  border:1px solid #cfe4d6;
  border-radius:14px;
  padding:8px 12px;
  box-shadow:0 6px 16px rgba(20,90,50,.06);
}
.counter-item strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  color:#1c8b49;
}
.counter-item span{
  display:block;
  font-size:12px;
  color:#385441;
  font-weight:800;
  margin-top:2px;
}

/* Footer */
a,
.contact-box a{
  color:#1b6b3d;
}
.footer{
  background:#173a28 !important;
  color:#e6f6ea !important;
  padding:16px 30px !important;
  font-size:14px !important;
}
.footer a{
  color:#fff !important;
}
.footer .webdesign-credit{
  width:100%;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:13px;
  color:#cfead7;
  text-align:right;
}
.footer .webdesign-credit a{
  color:#fff !important;
  text-decoration:none;
  font-weight:900;
}

@media(max-width:860px){
  .site-shell{
    width:100% !important;
    margin:0 !important;
    border-radius:0 !important;
  }
  .main-nav .admin-link{
    margin-left:0 !important;
  }
  .content{
    padding:20px 16px 26px !important;
  }
  .content h2{
    font-size:26px !important;
  }
  .intro-grid,
  .card-grid,
  .image-strip,
  .image-strip.gallery{
    grid-template-columns:1fr !important;
  }
  .image-strip img,
  .image-strip.gallery img{
    height:210px !important;
  }
  .notice{
    margin:16px 16px 0 !important;
  }
  .footer{
    padding:16px 18px !important;
  }
  .footer .webdesign-credit{
    text-align:left;
  }
}


/* Kleineres Bild direkt unter dem Banner */
.intro-grid{grid-template-columns:1.35fr .65fr !important; align-items:start !important;}
.intro-grid .rounded-image,
.intro-grid .content-photo{max-width:360px !important; width:100% !important; margin:0 0 0 auto !important; display:block !important;}
.intro-grid .text-card,
.intro-grid .contact-box{max-width:100% !important;}
@media(max-width:860px){
  .intro-grid{grid-template-columns:1fr !important;}
  .intro-grid .rounded-image,
  .intro-grid .content-photo{max-width:100% !important; margin:10px auto 0 !important;}
}