/* Base */
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #cfdedc; /* helles Grau */
  background: #073642; /* Petrolgrün */
}

a, .page-link {
  color: #5ec8c4; /* Cyan/Türkis */
  text-decoration: none;
  text-transform: uppercase; /* Navigation in Versalien */
}

a:hover, .page-link:hover {
  text-decoration: underline;
  color: #fff;
}

/* Container */
.wrapper {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header & Navigation */
.site-header {
  background: transparent;
  border-bottom: 1px solid #0a4a55;
}

.site-header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

.site-title {
  font-size: 22px;
  color: #fff;
}

.site-title:hover { text-decoration: none; }

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-nav .nav-trigger { display: none; }

.site-nav label {
  display: none;
  cursor: pointer;
  padding: 6px;
}

.site-nav .menu-icon svg { display: block; fill: #cfdedc; }

.site-nav .trigger {
  display: flex;
  gap: 16px;
}

.page-link {
  font-weight: 500;
}

/* Mobile nav */
@media (max-width: 720px) {
  .site-nav label { display: inline-block; }
  .site-nav .trigger { 
    display: none; 
    position: absolute;
    right: 0;
    top: 44px;
    background: #073642;
    border: 1px solid #0a4a55;
    border-radius: 4px;
    padding: 10px 12px;
  }
  .site-nav .trigger .page-link { display: block; padding: 10px 0; font-size: 16px; }
  .site-nav .nav-trigger:checked ~ .trigger { display: block; }
}

/* Main page content */
.page-content {
  padding: 24px 0 40px 0;
}

.page-content .wrapper {
  background: transparent;
  padding: 40px 20px;
}

/* Typography */
h1, h2, h3 {
  font-weight: 300;
  color: #ffffff;
  line-height: 1.4;
  margin: 32px 0 24px 0;
  text-transform: uppercase;
}

h1 { font-size: 26px; }
h2, h3 { font-size: 20px; }

p, li, address { margin-bottom: 18px; font-size: 16px; }
address { font-style: normal; }

ul { padding-left: 20px; }

hr {
  border: 0;
  height: 1px;
  background: #0a4a55;
  margin: 24px 0;
}

/* Kontaktblock */
.kontaktblock {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.kontaktblock img {
  max-width: 200px;
  height: auto;
  border-radius: 4px;
}

/* Footer */
.site-footer {
  border-top: 1px solid #0a4a55;
  background: transparent;
  color: #93a1a1;
}

.site-footer .wrapper {
  padding: 24px 20px;
}

.footer-col-wrapper {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
}

footer a { color: #5ec8c4; }
footer a:hover { color: #fff; }
footer p { margin: 0 0 8px 0; }

@media (max-width: 640px) {
  .kontaktblock { flex-direction: column; }
  .kontaktblock img { max-width: 100%; }
}

/* Custom footer alignment */
.site-footer .footer-col-wrapper {
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}
.site-footer .footer-col {
  text-align: left;
  width: 100%;
}

/* Simplified footer: only copyright text, left-aligned */
.site-footer .wrapper {
  text-align: left;
}

/* === Presentation overrides (content unchanged) === */
/* Disable bold appearance without deleting tags */
strong, b { font-weight: inherit; }
/* Mandantenstimmen stars yellow */
.stars { color: yellow; }
/* Hide Leistung icons but keep HTML content intact */
.card-icon, .card-icon svg { display: none !important; }
/* Ensure hero image visible and not over-zoomed */
.hero-banner img {
  display: block;
  width: 100%;
  height: 102vh !important;   /* ca. 15% weniger hoch */
  object-fit: cover !important;
  object-position: top center !important;
}

/* === Hero image full-bleed & responsive === */
.hero-banner { width: 100%; overflow: hidden; border-bottom: 1px solid #0a4a55; }

/* Mandantenstimmen zentriert */
.hero-box h2,
.hero-box figure,
.hero-box figure blockquote,
.hero-box figure figcaption {
  text-align: center;
}

.hero-box figure {
  text-align: center;
  margin: 20px auto;
}

/* Button zentriert mit Trennlinien */
.hero-box .btn-group {
  text-align: center;
  margin: 20px auto;
  padding: 20px 0;
  border-top: 1px solid #0a4a55;
  border-bottom: 1px solid #0a4a55;
}

/* ======= Responsive Enhancements ======= */

/* Desktop/two-column grids by default where appropriate */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.profile-grid {
  display: block; /* einspaltig, volle Breite */
}

/* Tweak card content spacing slightly */
.card-grid .card {
  background: transparent;
  border: 1px solid #0a4a55;
  border-radius: 6px;
  padding: 16px;
}

/* Mobile & tablet adjustments */
@media (max-width: 1024px) {
  .wrapper { max-width: 920px; }
}

/* Tablets and down */
@media (max-width: 768px) {
  /* Hero image dynamic scaling */
  .hero-banner img {
    height: auto !important;
    max-height: 60vh;
  }

  /* Single-column stacks */
  .card-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid, .profile-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Slightly smaller headings */
  h1 { font-size: 22px; }
  h2, h3 { font-size: 19px; }
  body { font-size: 15.5px; }
}

/* Phones */
@media (max-width: 480px) {
  h1 { font-size: 20px; }
  h2, h3 { font-size: 18px; }
  body { font-size: 15px; }
}