// =====================
// style.css (Ergänzungen/Überarbeitung – mobile‑first, moderne Typo, einfache Karten)
// =====================
:root{
--bg:#ffffff;
--fg:#1f2937;
--muted:#6b7280;
--brand:#9cbd3a;
--brand-hover:#587f3c;
--card:#ffffff;
--border:#e5e7eb;
}

/* =====================
   Lokale Schrift – Cormorant Garamond
   ===================== */
@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2"),
    url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("fonts/CormorantGaramond-Italic-VariableFont_wght.woff2") format("woff2"),
    url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}


*{box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;margin:0;background:var(--bg);color:var(--fg);}
img{max-width:100%;height:auto;display:block}


.site-header {
  background: #f6faf5;
  border-bottom: 1px solid #e5e7eb;
}

.header-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.5rem 1rem;
}

.header-left {
  justify-self: start;
}
.logo {
  height: 170px;
  width: auto;
}

.header-center {
  text-align: center;
}
.site-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;          /* kräftiger, stabiler Look */
  font-size: 2.5rem;         /* vorher 1.7rem → jetzt deutlich markanter */
  line-height: 1.1;
  letter-spacing: 1px;
  color: #587f3c;
  margin: 0;
  text-transform: uppercase;
}

.site-subtitle {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.7rem;        /* leicht größer als vorher (von 1.25rem) */
  line-height: 1.25;
  color: #587f3c;
  margin-top: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.header-right {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  font-weight: 600;
}
/* Header-Kontakt-Links: Farbe & Unterstreichung kontrollieren */
.header-right a {
  color: var(--fg);
  text-decoration: none;
}

.header-right a:hover,
.header-right a:focus {
  color: var(--brand-hover);
  text-decoration: none;
}

/* Verhindert „lila“ besuchte Links */
.header-right a:visited {
  color: var(--fg);
}

/* sorgt dafür, dass Icon + Text nie umbrechen */
.contact-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* WhatsApp-Icon-Link selbst als Flex, damit das SVG perfekt mittig steht */
.whatsapp-link {
  display: flex;
  align-items: center;
}

/* E-Mail-Link enthält Icon + Text → ebenfalls Flex */
.contact-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Einheitliche Icons */
.contact-row img {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0;
}


.main-nav ul {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 0;
  list-style: none;
}

.nav-btn{
background-color:#9cbd3a;
border:none;
color:white;
padding:10px 22px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
font-weight:600;
border-radius:30px;
margin:4px 6px;
cursor:pointer;
transition:background-color 0.2s ease-in-out;
}
.nav-btn:hover{
background-color:#587f3c;
color:white;
}

/* Über mich – klassischer Textumfluss */
.willkommen-flex{
  display: block; /* Kein Flex mehr nötig */
}

.portrait {
  float: right;         /* Bild rechts mit Textumfluss */
  width: 35%;           /* etwas kleiner als Hälfte */
  max-width: 350px;
  height: auto;
  border-radius: 12px;
  margin: 0 0 1rem 2rem; /* Abstand zum Text (oben/rechts/unten/links) */
  object-fit: cover;
}
@media (max-width: 768px) {
  .portrait {
    float: none;
    display: block;
    margin: 1rem auto;
    width: 80%;
  }
}

.markenname {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;           /* maximale Stärke */
  font-style: normal;
  font-size: 1.3em;           /* leicht größer als H2-Basistext */
  color: #4a662e;             /* dunkleres Grün für mehr Präsenz */
  letter-spacing: 0.5px;      /* enger für kompakteren Eindruck */
  text-transform: uppercase;
  text-shadow: 0 0 0.5px #4a662e; /* hauchfeine Verdichtung für Kontrast */
}
/* =====================
   Galerie – Einblicke
   ===================== */

#galerie {
  background: #f6faf5;               /* leichtes Grün, harmonisch zu Header */
  padding: 2rem 1rem;
  text-align: center;
}

#galerie h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #587f3c;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

/* Raster-Layout für Bilder */
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Bildgestaltung */
.galerie-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* sanfter Hover-Effekt */
.galerie-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* responsive Höhe auf kleinen Screens */
@media (max-width: 600px) {
  .galerie-grid img {
    height: 200px;
  }
}

/* =====================
   Kontakt-Bereich
   ===================== */

/* Obere Linie */
.kontakt-linie {
  border: none;
  height: 10px;
  background-color: #9cbd3a;   /* dein helles Grün */
  margin: 2rem 0;
}

/* Layout: Bild links, Text rechts */
.kontakt-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem 0;
}

/* Bild */
.portrait-links {
  width: 45%;
  max-width: 400px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* Rechte Spalte */
.kontakt-info {
  flex: 1;
  min-width: 250px;
}

.kontakt-info h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  color: #587f3c;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Zeilen mit Icon + Link */
.kontakt-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.5rem;
}

.kontakt-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.kontakt-zeile a {
  color: #1f2937;
  text-decoration: none;
  font-weight: 600;
}

.kontakt-zeile a:hover {
  color: #587f3c;
}

/* Responsive Variante */
@media (max-width: 768px) {
  .kontakt-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .portrait-links {
    width: 80%;
  }

  .kontakt-zeile {
    justify-content: center;
  }
}


/* Footer */
.site-footer{border-top:1px solid var(--border);background:#f6faf6;padding:1rem 0;color:var(--muted)}
.site-footer .footer-nav a{color:inherit;text-decoration:none;margin-left:1rem}

/* ===== Mobile Header (≤ 768px) ===== */
@media (max-width: 768px) {
  /* Grid zu Einspalter, alles zentriert */
  .header-main {
    grid-template-columns: 1fr;
    row-gap: .25rem;
    padding: .5rem .75rem;
    text-align: center;
  }

  .header-left,
  .header-center,
  .header-right {
    justify-self: center;
    align-items: center;
  }

  /* Logo kleiner */
  .logo { height: 80px; }

  /* Titel/Slogan etwas kompakter */
  .site-title {
    font-size: 1.9rem;   /* Desktop: 2.5rem */
    letter-spacing: .8px;
  }
  .site-subtitle {
    font-size: 1.2rem;   /* Desktop: 1.7rem */
    letter-spacing: 1px;
    margin-top: .2rem;
  }

  /* Kontaktblock: unter Titel, zentriert, 2 Zeilen */
  .header-right {
    flex-direction: column;
    gap: .25rem;
    text-align: center;
  }
  .contact-row { justify-content: center; }

  /* Nav: horizontales Scrollen mit Snap (touch-freundlich) */
  .main-nav ul {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .5rem;
    padding: .5rem .25rem;
    scroll-snap-type: x mandatory;
  }
  .main-nav ul::-webkit-scrollbar { display: none; } /* dezente Optik */

  .nav-btn {
    padding: 8px 14px;
    font-size: 15px;
    border-radius: 24px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}