/* ===================================================== */
/* 1. Design-Tokens                                      */
/* ===================================================== */
:root{
  --primary:#162742;   /* dunkelblau */
  --accent :#5FB7FF;   /* hellblau   */
  --radius :1.25rem;
  --font   :system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",
           Roboto,"Helvetica Neue",Arial,sans-serif;
  --side   :1rem;          /* EINHEITLICHER Rand links/rechts */
}

html{
  scroll-behavior:smooth;   /* macht alle #anchor-Sprünge weich */
}

.link-clean{
  color:#0074d9;            /* dein Primärblau */
  text-decoration:none;     /* Unterstreichung weg */
  font-weight:600;          /* leicht hervorgehoben */
  cursor:pointer;
}
.link-clean:hover{
  text-decoration:underline;/* sichtbarer Hover-Hinweis */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font);
  color:var(--primary);
  line-height:1.5;
  background:#fff;
}

/* ===================================================== */
/* 2. Container                                          */
/* ===================================================== */
.container{max-width:1200px;margin-inline:auto;padding-inline:1rem}

/* ===================================================== */
/* 3. HEADER & NAVIGATION                                */
/* ===================================================== */

/* --- Grund-Container im Header ------------------------ */
.site-header{
  position:absolute; top:0; left:0; width:100%; z-index:200;
  background:transparent;
}
.site-header .container{
  max-width:1200px;
  height:64px;
  margin-inline:auto;
   padding-inline:var(--side);   /* <<< nur noch die Variable */
  padding:0 1rem;              /* linker/rechter Innenabstand */
  display:flex; align-items:center; justify-content:space-between;
}

/* --- Logo --------------------------------------------- */
.brand{ color:#fff; text-decoration:none; line-height:1.1; }


.brand-line1{
  font-size:1rem;      /* vorher 1.8 rem → dezenter   */
  font-weight:600;
  display:block;
  margin-bottom:.25rem;   /* kleine Luft zum Claim       */
  margin-top: 1rem;
}


/* Zeile 2 – Gebäudereinigung & Facility Management */
.brand-line2{
  font-size:1rem;
  font-weight:600;
  display:block;      /* ←  wichtig: eigene Zeile  */
  margin-top:.1rem;
}

/* Zeile 3 – (falls du sie nutzt) */
.brand-line3{
  font-size:1rem;
  font-weight:600;
  display:block;      /* ←  ebenfalls eigene Zeile */
  margin-top:.1rem;
}

@media(min-width:992px){
  .brand-line1{ font-size:1.8rem; }
  .brand-line2,.brand-line3{ font-size:1.05rem; }
}

/* --- Burger-Icon -------------------------------------- */
.burger{
  display:flex; flex-direction:column; gap:5px;
  width:26px; background:none; border:0; cursor:pointer; z-index:210;
}
.burger span{ height:3px; background:#fff; width:100%;
  transition:.3s transform,.3s opacity;
}
.burger.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* --- Off-Canvas Navigation (Mobil) -------------------- */
.main-nav{
  position:fixed; inset:0 0 0 40%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:2rem; background:#060d1c; transform:translateX(100%);
  transition:transform .35s ease; z-index:200;
}
.main-nav ul{ list-style:none; margin:0; padding:0; text-align:center; }
.main-nav li{ margin:1rem 0; }
.main-nav a{ color:#fff; text-decoration:none;  font:500 1.1rem var(--font); }
.main-nav a:hover{ color:var(--accent); }
.main-nav a.cta{ background:var(--accent); color:var(--primary);
  padding:.6rem 1.3rem; border-radius:var(--radius); }
.main-nav.open{ transform:translateX(0); }

/* --- Tablet / Desktop --------------------------------- */
@media(min-width:768px){
  .burger{ display:none; }
  .main-nav{
    position:static; transform:none; background:none;
    flex-direction:row; gap:1.5rem; inset:auto;
  }
  .main-nav ul{ display:flex; gap:1.5rem; }
  .main-nav li{ margin:0; }
  .main-nav a{ font-size:.95rem; }
}

/* ===================================================== */
/* 4. HERO (Startseite)                                  */
/* ===================================================== */
.hero{
  background:url("../img/TestIMG.jpg") center/cover no-repeat;
  color:#fff; min-height:80vh; display:flex; align-items:center; position:relative;
}
.hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); }

/* --- Inhalt ------------------------------------------- */
.hero-content{
  position:relative; max-width:600px;
  text-align:center; margin:0 auto;          /* Mobile zentriert */
}
.hero-title{ font:700 clamp(2rem,4vw + .5rem,3.5rem)/1.2 var(--font); margin-bottom:1rem; }
.hero-subtitle{ font: clamp(1rem,1.2vw + .6rem,1.25rem) var(--font); margin-bottom:2rem; }
.btn-cta{ display:inline-block; background:var(--accent); color:var(--primary);
  padding:.9rem 1.8rem; border-radius:var(--radius); font-weight:600; text-decoration:none;
  transition:background .25s; }
.btn-cta:hover{ background:#80c8ff; }

@media (max-width:767px){
  .hero{                       /* Inhalt links statt mittig   */
    justify-content:flex-start;
  }
  .hero .hero-content{
    text-align:left;           /* Text links ausrichten       */
    margin-right:0;            /* rechts bündig               */
  }
}



/* --- Desktop: Textblock links unter Logo -------------- */
@media(min-width:768px){
  .hero{ justify-content:flex-start; }
  .hero-content{
    text-align:left;
    margin-left: 22rem;
  }
}




/* === WHY-AGIL ======================================= */
.why-agil{
  --card-bg:#fff;
  --card-shadow:0 6px 15px rgba(0,0,0,.08);
  --card-radius:12px;
  --primary:#0069ff;                /* passe an deine Branding-Farbe an */
  padding:4rem 1rem;
  background:linear-gradient(180deg,#fafafa 0%,#ffffff 100%);
}

.why-agil .section-title{
  text-align:center;
  margin-bottom:2.5rem;
  font-size:clamp(1.6rem,4vw,2rem);
  font-weight:600;
}

.reason-grid{
  display:grid;
  grid-template-columns:1fr;        /* 1 Spalte auf Mobile */
  gap:1.25rem;
  max-width:1100px;
  margin-inline:auto;
  list-style:none;
  padding:0;
}

.reason-card{
  background:var(--card-bg);
  border-radius:var(--card-radius);
  padding:2rem 1.5rem 2.5rem;
  text-align:center;
  transition:.25s transform ease,.25s box-shadow ease;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.reason-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--card-shadow);
}

.reason-card .icon{
  font-size:2.5rem;
  color:var(--primary);
  margin-bottom:1rem;
}

.reason-card h3{
  font-size:1.125rem;
  margin:.25rem 0 1rem;
  line-height:1.35;
}

.reason-card p{
  font-size:.95rem;
  color:#555;
}

.reason-card .icon-img{
  width:64px;           /* gute Grundgröße (Mobile + Desktop)       */
  height:64px;
  margin-bottom:1rem;
  object-fit:contain;   /* erhält Seiten­verhältnis, wenn PNG */
  flex-shrink:0;
}


/* Desktop-Layout ------------------------------------------------ */
@media (min-width:768px){
  .reason-grid{
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  }
}


/* === SERVICES  ================================================= */
.services{
  padding:4rem 1rem;
  background:#ffffff;
}

.services .section-title{
  text-align:center;
  margin-bottom:.5rem;
  font-size:clamp(1.6rem,4vw,2rem);
  font-weight:600;
}

.services .section-subtitle{
  text-align:center;
  max-width:600px;
  margin:0 auto 2.5rem;
  color:#555;
  font-size:.95rem;
}

.service-grid{
  display:grid;
  grid-template-columns:1fr;          /* 1 Spalte auf Mobile            */
  gap:1.5rem;
  max-width:1100px;
  margin-inline:auto;
  list-style:none;
  padding:0;
}

.service-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  overflow:hidden;                   /* runde Ecken auch fürs Bild      */
  transition:.25s transform ease,.25s box-shadow ease;
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.service-img{
  width:100%;
  height:180px;                      /* gleichmäßige Höhe               */
  object-fit:cover;
}

.service-card h3{
  font-size:1.1rem;
  margin:1rem 1.25rem .5rem;
}

.service-card p{
  font-size:.95rem;
  margin:0 1.25rem 1.5rem;
  color:#555;
}

/* --------- EINZIGER Breakpoint ab 768 px ----------------------- */
@media (min-width:768px){
  .service-grid{
    grid-template-columns:repeat(3,1fr);  /* 3 Spalten Desktop/Tablet   */
  }
  .service-img{
    height:200px;                          /* etwas höhere Bilder       */
  }
}



/* === HOW IT WORKS ==================================== */
.how-work{
  padding:4rem 1rem;
  background:#f9fbff;
}

/* ---------- Grundlayout ---------- */
.timeline{
  position:relative;
  max-width:900px;
  margin:2rem auto 0;
}

.how-work .section-title{
  text-align: center;
}

/* vertikale Linie */
.timeline-line{
  position:absolute;
  left:56px;                 /* 32 px Bullet + 24 px Luft + 16 px Radius  */
  top:0; bottom:0;
  width:2px;
  background:#0093ff30;      /* zarter Blau-Ton                           */
  z-index:1;
}

/* Tropfen */
.timeline-drop{
  position:absolute;
  top:0;
  left:56px;                 /* exakt auf die Linienmitte                 */
  width:24px; height:24px;
  transform:translate(-50%,0);         /* JS verschiebt nur Y                */
  transition:transform .35s cubic-bezier(.4,.8,.2,1);
  z-index:2;
}

/* ---------- Step-Karten ---------- */
.step{
  position:relative;
  padding-left:88px;         /* 32 px Bullet + 40 px Luft + 16 px Radius  */
  margin-bottom:3rem;
}

.step:last-child{ margin-bottom:0; }

.step.active{
  background:#e9f6ff;                 /* zartes Blau als Kachel-Hintergrund */
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,147,255,.12);
  transition:.3s background,.3s box-shadow;
}

.step.active h3{
  color:#0074d9;                      /* dunkleres Blau für die Überschrift */
  transition:.3s color;
}

.step.active p{
  color:#333;                         /* etwas dunkler für bessere Lesbarkeit */
}



/* Nummern-Bullet */
.step-bullet{
  position:absolute;
  left:0;
  top:.35rem;                /* exakt auf h3-Baseline                     */
  width:32px; height:32px;
  border-radius:50%;
  background:#0093ff;
  color:#fff;
  font:600 1rem/32px "Inter",sans-serif;
  text-align:center;
  transition:background .3s;
}

.step.active .step-bullet{
  background:#00c3ff;        /* helleres Blau für aktiven Schritt         */
}

.step-content h3{
  margin:.25rem 0 .5rem;
  font-size:1.1rem;
}
.step-content p{
  margin:0;
  color:#555;
  font-size:.95rem;
}

/* ============== DESKTOP-ANPASSUNG: EINSPALTIG ============== */
@media (min-width:768px){
  /* Timeline NICHT mehr als Grid anzeigen */
  .timeline{
    display:block;                  /* statt grid */
    max-width:700px;                /* optional: etwas schmaler in der Mitte */
    margin-inline:auto;
  }

  /* Linie & Tropfen bleiben links wie auf Mobile */
  .timeline-line,
  .timeline-drop{
    left:56px;                      /* gleicher Versatz wie Mobile */
    transform:none;                 /* X-Verschiebung entfernen    */
  }

  /* Steps untereinander; links die Bullet, rechts der Text */
  .step{
    padding-left:88px;              /* Mobile-Padding beibehalten  */
    text-align:left;                /* rechtsbündige Varianten löschen */
  }
}

/* ============== Rezensionen ============== */

/* === REVIEWS  =========================================== */
.reviews{ padding:4rem 1rem; background:#fff; text-align:center; }

.section-title{ margin-bottom:2.5rem; font-size:clamp(1.7rem,4vw,2.4rem); }

.slider{
  position:relative;      /*  NEU  */
  display:flex; 
  gap:1.5rem; 
  padding:0 2rem;        /* Platz für Pfeile */
  overflow-x:auto; scroll-snap-type:x mandatory;
  list-style:none; margin:0;
  scroll-behavior:smooth;
}

.card{
  flex:0 0 290px;                                   /* fixe Breite pro Karte */
  background:#f5f7fa; border-radius:6px;
  padding:1.25rem; scroll-snap-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.card p{
  --collapsed-h:7.2em;           /* 4 Zeilen × 1.8em Zeilenhöhe */
  max-height:var(--collapsed-h);
  line-height:1.8em;
  overflow:hidden;
  transition:max-height .35s ease;
  position:relative;
}

.card p::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(transparent 60%,#f5f7fa 100%);
  pointer-events:none;
  transition:opacity .35s ease;
}

.card.expanded p::after{ opacity:0; }

/* Aufgeklappt: viel Platz, kein Fade-out */
.card.expanded p{
  max-height:40rem;      /* hoch genug für lange Texte */
  overflow:visible;
}

.carousel{
  position:relative;      
  .carousel{                       /* dein div um UL + Pfeile */
  max-width: 1140px;             /* ≈ 3 Karten á 290 px + Gaps + Pfeile */
  margin-inline:auto;
}                
}

/* Link-Stil */
.read-more{ font-size:.85rem; color:#0074d9; cursor:pointer; }

.card header{ display:flex; align-items:center; position:relative; margin-bottom:.75rem; }
.avatar{
  width:48px; height:48px; border-radius:50%; object-fit:cover; margin-right:.75rem;
}
.meta time{ display:block; font-size:.75rem; color:#777; }
.g-badge{
  width:20px; position:absolute; top:0; right:0;
}

.stars{ color:#ffc107; margin-bottom:.5rem; font-size:1rem; }

.card p{ font-size:.9rem; color:#333; margin:.25rem 0 1rem; min-height:66px; }

.card a{ font-size:.85rem; color:#0074d9; text-decoration:none; }

.nav{
  background:#0074d9; color:#fff; border:none; border-radius:50%;
  width:36px; height:36px; cursor:pointer; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; 
  left:-18px; 
}
.nav.prev{ left:-12px; }
.nav.next{ right:-18px; left:auto; }

@media (min-width:768px){
  .slider{
    display:flex; }      /* Desktop: kein Scrollbar, Pfeile bleiben */
}

.read-more{
  background:none;
  border:none;
  color:#0074d9;
  font-size:.85rem;
  cursor:pointer;
  padding:0;
}



/* === ABOUT-US ======================================== */
.about-us{
  padding:4rem 1rem;
  background:#f9fbff;
}

.about-subtitle{
  max-width:650px;
  margin:0 auto 2.5rem;
  text-align:center;
  color:#555;
  font-size:.95rem;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center;
}

.about-us .section-title{
  text-align: center;
}

/* Bild */
.about-photo img{
  width:100%;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}

/* Bullet-Liste */
.about-list{
  list-style:none;
  padding:0;
  margin:1rem 0 2rem;
}
.about-list li{
  margin:.4rem 0;
  font-size:.95rem;
}
.about-list i{
  color:#0093ff;
  margin-right:.5rem;
}

/* Zitat */
.about-quote{
  font-size:.95rem;
  font-style:italic;
  background:#fff;
  border-left:4px solid #0093ff;
  padding:1rem 1.25rem;
  margin:0 0 2rem;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.about-quote cite{
  display:block;
  margin-top:.5rem;
  font-style:normal;
  color:#333;
  font-weight:600;
}

/* CTA-Button erbt deine bestehende .btn.btn-primary-Klasse */

/* ---------- Desktop-Layout ab 768 px ---------- */
@media (min-width:768px){
  .about-grid{
    grid-template-columns:1fr 1fr;
  }
  .about-photo{
    order:1;                 /* Bild links, Text rechts */
  }
  .about-text{
    order:2;
  }
}






/* === FAQ ============================================= */
.faq{ padding:4rem 1rem; background:#fff; }

.faq-item{
  border-bottom:1px solid #e1e5ec;
  padding:1rem 0;
}

.faq-item summary{
  list-style:none;               /* Standard-Dreieck ausblenden   */
  cursor:pointer;
  display:flex;                  /* Text + Icon nebeneinander     */
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  font-size:1rem;
  color:#111;
}

.faq-item summary::-webkit-details-marker{ display:none; } /* Safari */

.faq-item .icon{
  width:1rem; height:1rem;
  position:relative;
}
.faq-item .icon::before,
.faq-item .icon::after{
  content:"";
  position:absolute;
  background:#0074d9;            /* deine Blau-Akzentfarbe        */
  border-radius:1px;
  transition:transform .25s ease;
}
.faq-item .icon::before{         /* HORIZONTALER Strich           */
  top:50%; left:0; right:0; height:2px;
  transform:translateY(-50%);
}
.faq-item .icon::after{          /* VERTIKALER Strich (Plus)      */
  left:50%; top:0; bottom:0; width:2px;
  transform:translateX(-50%);
}

/* --- Zustand geöffnet -------------------------------- */
.faq-item[open] .icon::after{ transform:translateX(-50%) rotate(90deg); } /* Minus */
.faq-item[open] .icon::before{ background:#0093ff; }                      /* helleres Blau */

/* FAQ-Body standardmäßig zu */
.faq-body{
  overflow:hidden;
  max-height:0;
  transition:max-height .4s ease;
}

/* offener Zustand bekommt nur noch Farbe/Icon,
   Höhe wird gleich durch JS gesetzt – nicht hier:  */
.faq-item[open] summary span{ color:#0074d9; }

/* Optional: maximal eine Frage geöffnet (JS notwendig) */

/* === CONTACT ========================================= */
.contact{
  padding:4rem 1rem;
  background:#e9f3ff;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr;   /* Mobile: gestapelt           */
  gap:2rem;
  max-width:1100px;
  margin-inline:auto;
}

/* ---------- Formular ------------------------- */
.contact-form{
  background:#cce3ff;
  border-radius:12px;
  padding:2rem;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}

.contact-sub{
  font-size:.9rem; color:#555; margin:-.5rem 0 1.5rem;
}

.field-group{
  margin-bottom:1.25rem;
}
.field-group label{
  display:block; font-size:.85rem; margin-bottom:.35rem; font-weight:600;
}
.field-group input,
.field-group textarea{
  width:100%; padding:.75rem 1rem;
  border:1px solid #d0d8e9; border-radius:6px;
  font-size:.9rem; font-family:inherit;
}
.field-group input:focus,
.field-group textarea:focus{
  outline:2px solid #0074d9;
}

/* ---------- Button (erbt deine btn.btn-primary) ----- */
.btn.btn-primary{
  background:#0074d9; color:#fff; border:none;
  padding:.75rem 2rem; border-radius:999px;
  font-weight:600; cursor:pointer;
  transition:background .2s;
}
.btn.btn-primary:hover{ background:#005fb3; }

/* ---------- Map -------------------------------------- */
.contact-map iframe{
  width:100%; height:100%; border:0; border-radius:12px;
  min-height:320px;   /* Falls Inhalt kürzer             */
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}

/* ---------- Desktop-Layout ab 768 px ------------------ */
@media (min-width:768px){
  .contact-grid{
    grid-template-columns:1fr 1fr;   /* 50 | 50-Aufteilung        */
    align-items:start;
  }
  .contact-map{ height:100%; }       /* füllt Säule aus           */
}




/* ===== FOOTER ================================================= */
.footer{
  background:#cce3ff;
  color:#313131;;
  padding:3rem 1rem 2rem;
  font-family:inherit;
}
/* Grid – 1 Spalte mobil */
.footer-container{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  max-width:1200px;
  margin-inline:auto;
}
/* Branding-Spalte */
.brand-col h3{
  font-size:1.4rem; margin-bottom:.5rem; color:#147aa0;
}
.brand-col p{ line-height:1.5; margin-bottom:1rem; }
.social-icons{
  display:flex; gap:.5rem; list-style:none; padding:0; margin:0 0 1rem;
}
.social-icons img{ width:36px; height:36px; display:block; border-radius:50%; }
/* Kontakt */
.footer-phone,.footer-mail{ margin-bottom:.4rem; }
.footer-mail a{ color:#313131; text-decoration:none; }
/* Spaltentitel */
.footer-col h4{
  margin:.5rem 0 1rem; font-size:1.05rem; font-weight:600; color:#147aa0;
}
/* Listen */
.footer-col ul{ list-style:none; margin:0 0 1rem; padding:0; }
.footer-col ul li{ margin-bottom:.4rem; font-size:.95rem; }
.footer-col ul li a{ color:#313131; text-decoration:none; }
.footer-col ul li a:hover{ text-decoration:underline; }
/* Öffnungszeiten feiner */
.footer-times li{ font-size:.9rem; margin:.25rem 0; }
/* Copyright */
.footer-bottom{
  text-align:center; font-size:.85rem; color:#313131;
  margin-top:2rem;
}

/* ===== Breakpoints =========================================== */
@media (min-width:600px){             /* Tablet hochkant */
  .footer-container{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:992px){             /* Desktop */
  .footer-container{ grid-template-columns:repeat(4,1fr); }
  .social-icons img{ width:40px; height:40px; }
}