/* ==========================================================================
   Plattner Gebäudetechnik AG – Neuaufbau (Variante 3)
   Echte Inhalte & Originalbilder, handgeschriebenes, modernes Layout.
   Gliederung: 1 Reset · 2 Typo/Helfer · 3 Header/Nav · 4 Hero
   5 Sections · 6 Cards/Grid · 7 Formular · 8 Footer · 9 Responsive
   ========================================================================== */

/* 1. Reset / Grundlayout */
*,*::before,*::after { box-sizing: border-box; }

:root {
  --white:#ffffff; --light:#f5f7f9; --grey:#637079; --grey-line:#dfe4e8;
  --dark:#243038; --darker:#161d22;
  --accent:#c0392b; --accent-dark:#96281b; --accent-red:#c0392b;
  --max:1180px; --radius:6px;
  --shadow:0 8px 28px rgba(0,0,0,.09); --shadow-hover:0 14px 36px rgba(0,0,0,.15);
  --t:.25s ease;
  --font:"Source Sans 3","Segoe UI",Tahoma,Helvetica,Arial,sans-serif;
}

html { scroll-behavior: smooth; }
body {
  margin:0; font-family:var(--font); font-size:17px; line-height:1.65;
  color:var(--dark); background:var(--white); -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:var(--accent); text-decoration:none; transition:color var(--t); }
a:hover, a:focus { color:var(--accent-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:3px solid var(--accent); outline-offset:2px;
}

/* 2. Typografie & Helfer */
h1,h2,h3,h4 { font-weight:700; line-height:1.2; color:var(--darker); margin:0 0 .6em; }
h1 { font-size:clamp(2rem,4vw,3rem); }
h2 { font-size:clamp(1.6rem,3vw,2.25rem); }
h3 { font-size:1.3rem; }
p { margin:0 0 1.1em; }
ul.ticks { list-style:none; padding:0; margin:0 0 1.1em; }
ul.ticks li { position:relative; padding-left:1.7rem; margin-bottom:.4rem; }
ul.ticks li::before {
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
}

.container { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:1.5rem; }
.section { padding-block:clamp(3rem,7vw,5.5rem); }
.section--light { background:var(--light); }
.section__title { text-align:center; margin-bottom:2.5rem; }
.section__title::after {
  content:""; display:block; width:64px; height:3px; background:var(--accent);
  margin:.8rem auto 0;
}
.lead { font-size:1.15rem; color:var(--grey); }
.text-center { text-align:center; }
.intro-text { max-width:820px; margin-inline:auto; }

.btn {
  display:inline-block; background:var(--accent); color:#fff; padding:.8rem 1.8rem;
  border-radius:var(--radius); font-weight:600; border:2px solid var(--accent);
  cursor:pointer; transition:background var(--t),border-color var(--t),transform var(--t);
}
.btn:hover, .btn:focus { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; transform:translateY(-2px); }
.btn--outline { background:transparent; color:var(--accent); }
.btn--outline:hover, .btn--outline:focus { background:var(--accent); color:#fff; }

.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.6rem 1rem; z-index:1100; }
.skip-link:focus { left:0; }

/* 3. Header / Navigation */
.site-header {
  position:sticky; top:0; z-index:1000; background:var(--white);
  border-bottom:1px solid var(--grey-line); box-shadow:0 1px 6px rgba(0,0,0,.04);
}
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:88px; }
.brand img { height:54px; width:auto; }

.main-nav__list { list-style:none; display:flex; gap:.3rem; margin:0; padding:0; }
.main-nav__link {
  display:block; padding:.6rem .9rem; color:var(--dark); font-weight:600;
  border-radius:var(--radius); position:relative;
}
.main-nav__link:hover, .main-nav__link:focus { color:var(--accent); background:var(--light); }
.main-nav__link[aria-current="page"] { color:var(--accent); }
.main-nav__link[aria-current="page"]::after {
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.2rem; height:2px; background:var(--accent);
}

.nav-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:transparent; border:0; cursor:pointer; padding:0;
}
.nav-toggle span { display:block; height:3px; width:26px; background:var(--dark); border-radius:2px; transition:transform var(--t),opacity var(--t); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* 4. Hero */
.hero {
  position:relative; min-height:clamp(360px,55vw,560px); display:flex; align-items:center;
  background-size:cover; background-position:center; color:#fff;
  background-image:linear-gradient(rgba(15,25,33,.5),rgba(15,25,33,.5)), url("../img/hero.jpg");
}
.hero--compact { min-height:clamp(220px,30vw,330px); }
.hero__content { max-width:680px; }
.hero h1 { color:#fff; margin-bottom:.5rem; }
.hero p { font-size:1.2rem; color:rgba(255,255,255,.93); }

/* 5. Content Sections */
.news { max-width:720px; margin-inline:auto; text-align:center; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about__media img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }

/* 6. Cards / Grid */
.grid { display:grid; gap:2rem; }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }

/* Bildkacheln */
.tile {
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow); aspect-ratio:4/3;
}
.tile img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tile:hover img, .tile:focus img { transform:scale(1.06); }
.tile__label {
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:1.1rem 1.25rem;
  background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 55%); color:#fff;
  font-weight:700; font-size:1.15rem;
}

/* Inhaltskarten */
.card {
  background:#fff; border:1px solid var(--grey-line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform var(--t),box-shadow var(--t);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.card__media { aspect-ratio:16/10; background:var(--light); }
.card__media img { width:100%; height:100%; object-fit:cover; }
.card__body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.card__body h3 { margin-bottom:.5rem; }
.card__meta { color:var(--accent); font-weight:600; font-size:.95rem; margin-bottom:.6rem; }
.card__body p:last-child, .card__body ul:last-child { margin-bottom:0; }

/* Team-Karten */
.team-card { text-align:center; }
.team-card .card__media { aspect-ratio:1/1; max-width:220px; margin:1.5rem auto 0; border-radius:50%; overflow:hidden; }
.team-card .card__media img { object-position:center top; }
.team-card .card__body { align-items:center; }

/* 6b. Bildergalerie + Lightbox */
.ref-block { margin-bottom:clamp(2.5rem,5vw,4rem); }
.ref-block:last-child { margin-bottom:0; }
.ref-block__head { max-width:820px; }
.ref-block h2 { margin-bottom:.4rem; }
.ref-block__meta { color:var(--accent); font-weight:600; font-size:.95rem; margin-bottom:.6rem; }

.gallery {
  display:grid; gap:.9rem; margin-top:1.4rem;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.gallery__item {
  position:relative; padding:0; border:0; cursor:pointer; overflow:hidden;
  border-radius:var(--radius); background:var(--light); aspect-ratio:1/1;
  box-shadow:var(--shadow);
}
.gallery__item img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery__item:hover img, .gallery__item:focus-visible img { transform:scale(1.07); }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center;
  background:rgba(10,14,18,.92);
}
.lightbox.is-open { display:flex; }
.lightbox__img {
  max-width:92vw; max-height:82vh; width:auto; height:auto;
  border-radius:4px; box-shadow:0 10px 50px rgba(0,0,0,.6);
}
.lightbox__btn {
  position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0;
  width:54px; height:54px; border-radius:50%; cursor:pointer; font-size:30px; line-height:54px;
  transition:background .2s;
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { background:rgba(255,255,255,.28); }
.lightbox__btn--prev { left:18px; top:50%; transform:translateY(-50%); }
.lightbox__btn--next { right:18px; top:50%; transform:translateY(-50%); }
.lightbox__btn--close { top:18px; right:18px; width:48px; height:48px; line-height:48px; font-size:26px; }
.lightbox__counter {
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.85); font-size:.95rem;
}

@media (max-width:560px) {
  .gallery { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
  .lightbox__btn--prev { left:8px; }
  .lightbox__btn--next { right:8px; }
}

/* 7. Formular */
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.info-block { background:var(--light); border-radius:var(--radius); padding:1.8rem; }
.info-block address { font-style:normal; line-height:1.8; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-weight:600; margin-bottom:.35rem; }
.form-group input, .form-group textarea {
  width:100%; padding:.75rem .9rem; font:inherit; color:var(--dark);
  border:1px solid var(--grey-line); border-radius:var(--radius); background:#fff;
}
.form-group input:focus, .form-group textarea:focus { border-color:var(--accent); }
.form-note { font-size:.9rem; color:var(--grey); }

/* Honeypot (Spamschutz) */
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Captcha */
.captcha-row { display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; }
.captcha-img { border:1px solid var(--grey-line); background:#f0f0f0; border-radius:4px; display:block; }
.captcha-refresh {
  border:1px solid var(--grey-line); background:#fff; border-radius:4px; width:40px; height:40px;
  cursor:pointer; font-size:18px; line-height:1; color:var(--dark);
}
.captcha-refresh:hover { background:var(--light); }

.form-status { margin-top:1rem; padding:.8rem 1rem; border-radius:var(--radius); font-weight:600; }
.form-status:empty { display:none; }
.form-status.is-ok { background:#e6f4ea; color:#1e6b3a; }
.form-status.is-error { background:#fdecea; color:#b3261e; }

.map-placeholder { margin-top:2.5rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--grey-line); }
.map-placeholder iframe { display:block; width:100%; height:320px; border:0; }

/* 8. Footer */
.site-footer { background:var(--darker); color:rgba(255,255,255,.82); padding-block:3.5rem 1.5rem; font-size:.97rem; }
.site-footer a { color:rgba(255,255,255,.82); }
.site-footer a:hover, .site-footer a:focus { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.site-footer h3 { color:#fff; font-size:1.05rem; margin-bottom:1rem; letter-spacing:.02em; }
.site-footer address { font-style:normal; line-height:1.9; }
.footer-nav { list-style:none; margin:0; padding:0; line-height:2; }
.footer-bottom {
  display:flex; flex-wrap:wrap; gap:1rem 1.5rem; justify-content:space-between; align-items:center;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); font-size:.9rem;
}
.legal-links { list-style:none; display:flex; flex-wrap:wrap; gap:1.2rem; margin:0; padding:0; }
.to-top { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }

/* 9. Responsive */
@media (max-width:900px) {
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .about, .contact-layout { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .nav-toggle { display:flex; }
  .main-nav {
    position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--grey-line); box-shadow:var(--shadow);
    max-height:0; overflow:hidden; transition:max-height var(--t);
  }
  .main-nav.is-open { max-height:460px; }
  .main-nav__list { flex-direction:column; gap:0; padding:.5rem 1rem 1rem; }
  .main-nav__link { padding:.85rem .5rem; border-bottom:1px solid var(--light); }
  .main-nav__link[aria-current="page"]::after { display:none; }
}
@media (max-width:560px) {
  .grid--3, .grid--2 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}