/* styles.css */

/* ==========================
   Lokale, DSGVO-konforme Fonts
   ========================== */
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('assets/fonts/WorkSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('assets/fonts/WorkSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('assets/fonts/WorkSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* ==========================
   Farben & Basis
   ========================== */
:root{
  --green:#1f7a4c;
  --sage:#eaf3ee;
  --cream:#fffaf3;
  --muted:#5c6a63;
  --shadow:0 8px 20px rgba(16,44,32,.08);
  --radius:14px;
}

body{
  margin:0;
  font-family:"Work Sans", sans-serif;
  color:#1c1e21;
  background:#fff;
  line-height:1.6;
}

/* ==========================
   Header & Navigation
   ========================== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid #f0f3f1;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand-text strong{font-family:"Outfit"; font-size:1.2rem}
.brand-text em{font-style:normal; font-size:.9rem; color:var(--muted)}
.site-nav ul{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.site-nav a{text-decoration:none; color:var(--green); font-weight:600}
.nav-toggle{display:none; background:none; border:none; font-size:1.6rem}

/* ==========================
   Hero
   ========================== */
.hero{
  background:linear-gradient(120deg,var(--cream),var(--sage));
  text-align:center;
  padding:90px 20px 70px;
}
.hero h1{font-family:"Outfit"; font-size:2.6rem; color:var(--green)}
.lead{color:var(--muted); max-width:600px; margin:0 auto 1.4rem}
.highlight{background:linear-gradient(90deg,#93c9a1,#1f7a4c); -webkit-background-clip:text; color:transparent}
.cta-row{display:flex; justify-content:center; gap:12px; flex-wrap:wrap}
.btn{
  background:var(--green); color:#fff; border:none; border-radius:999px;
  padding:.9rem 1.3rem; font-weight:600; box-shadow:var(--shadow); cursor:pointer;
}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent; color:var(--green); border:2px solid var(--green)}

/* ======================================
   Hero-Slideshow mit sanftem Fade-Effekt
   ====================================== */

.hero {
  position: relative;
  overflow: hidden;
  height: 90vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slideshow .slide.active {
  opacity: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.35); /* dunkler Overlay für bessere Lesbarkeit */
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.1));
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 1rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-family: "Outfit";
  margin-bottom: 1rem;
}

.hero .lead {
  color: #f0f0f0;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* ==========================
   Sections
   ========================== */
.section{padding:64px 20px}
.section.alt{background:var(--sage)}
.container{max-width:1100px; margin:0 auto}
h2{font-family:"Outfit"; color:var(--green)}
.service-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px; text-align:center;
}
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px;
}
.ico{font-size:1.8rem; margin-bottom:.3rem}

/* ===========================================
   Erweiterte Leistungs-Kacheln mit Grafik
   =========================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.service-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(16, 44, 32, 0.08);
  text-align: center;
  padding: 20px 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 44, 32, 0.12);
}

.service-card .ico {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.service-card h3 {
  font-family: "Outfit";
  color: var(--green);
  margin: 0.4rem 0;
  font-size: 1.1rem;
}

.service-card p {
  color: var(--muted);
  font-size: 0.95rem;
  min-height: 3em;
  margin-bottom: 0.8rem;
}

.service-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e0ece4;
}

/* Über mich */
.about{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center}
.about-photo{
  border-radius:var(--radius);
  background:url('./images/franzi.webp') center/cover;
  height:300px; box-shadow:var(--shadow);
}

/* Galerie */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px;
}
.shot1{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  background:url('./images/services/vn1.webp') center/cover;
  box-shadow:var(--shadow);
}

.shot2{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  background:url('./images/services/vn2.webp') center/cover;
  box-shadow:var(--shadow);
}

.shot3{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  background:url('./images/services/vn3.webp') center/cover;
  box-shadow:var(--shadow);
}

/* Kontaktformular */
.contact-form{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px; max-width:600px; margin:0 auto;
  display:flex; flex-direction:column; gap:14px;
}
input,textarea{
  font:inherit; padding:.8rem 1rem; border-radius:8px; border:1px solid #dce6e1;
}
input:focus,textarea:focus{outline:2px solid var(--green); border-color:var(--green)}
.checkbox{display:flex; align-items:center; gap:8px}
.form-status{min-height:1.3em; color:var(--green); font-weight:600}

/* ==============================
   Neuer Kontaktbereich ohne Formular
   ============================== */
.contact-info {
  text-align: center;
}

.contact-info .intro {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  justify-items: center;
  margin-bottom: 2rem;
}

.contact-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.4rem 1rem;
  width: 100%;
  max-width: 260px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 44, 32, 0.12);
}

.contact-icon {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 0.5rem;
}

.contact-card h3 {
  font-family: "Outfit";
  color: var(--green);
  margin-bottom: 0.3rem;
}

.contact-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}

.contact-card a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

.contact-info .closing {
  font-size: 1rem;
  color: var(--green);
  font-weight: 600;
}

/* Footer */
.site-footer{background:var(--cream); text-align:center; padding:20px; border-top:1px solid #e3ebe6}

/* Responsive */
@media(max-width:700px){
  .about{grid-template-columns:1fr}
  .site-nav ul{display:none}
  .nav-toggle{display:inline-block}
}

/* Galerie Pfeile */
.gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.5rem; /* enger zusammen */
  margin: 0 auto;
  overflow: visible; /* nichts wird abgeschnitten */
}

.gallery figure {
  width: 260px;
  height: 260px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.gallery .arrow {
  font-size: 3.5rem;
  color: #1f7a4c;
  font-weight: bold;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  margin: 0 -0.25rem; /* Pfeile näher an die Bilder heran */
}

/* Mobilgeräte: untereinander mit Pfeilen nach unten */
@media (max-width: 768px) {
  .gallery {
    flex-direction: column;
    gap: 0.3rem;
  }
  .gallery .arrow {
    transform: rotate(90deg);
    margin: 0.2rem 0;
  }
}