/* ==========================================================================
   Zimmerei H. Rösl GmbH — Stylesheet
   Nachbildung des bestehenden Erscheinungsbilds (weiß / rot, klassisch),
   nur als statisches HTML ohne Joomla/PHP/MySQL.
   ========================================================================== */

:root{
  --red:        #9c2a2a;   /* Logo, Footer-Band, aktiver Menüpunkt */
  --red-bright: #c1272d;   /* Buttons, "WIR SUCHEN"-Hervorhebung   */
  --ink:        #333333;
  --ink-soft:   #555555;
  --gray:       #777777;
  --line:       #e2e2e2;
  --bg:         #ffffff;
  --bg-soft:    #f7f6f4;
  --photo-a:    #e6e4de;
  --photo-b:    #d7d4cb;

  --display: "Playfair Display", Georgia, serif;
  --body:    "Open Sans", Arial, Helvetica, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.4rem);
}

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

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
.container{ max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }

h1,h2,h3{ font-family: var(--display); font-weight:700; color: var(--ink); margin:0 0 .6em; }
h1{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h2{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3{ font-size: 1.05rem; }
p{ margin:0 0 1.1em; color: var(--ink-soft); }
.center{ text-align:center; }
.narrow{ max-width: 62ch; margin-inline:auto; }

/* ---------- top contact bar ---------- */
.topbar{
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
  color: var(--gray);
}
.topbar .container{
  display:flex; justify-content:flex-end; gap:1.6rem;
  padding-block:.5rem;
}
.topbar a{ display:inline-flex; align-items:center; gap:.4rem; color: var(--gray); }
.topbar a:hover{ color: var(--red); }
.topbar svg{ width:14px; height:14px; }

/* ---------- header / nav ---------- */
.site-header{ background: var(--bg); }
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 1.1rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.brand{ display:flex; align-items:center; gap:.8rem; }
.brand-logo{ height: 64px; width:auto; }
@media (max-width: 560px){ .brand-logo{ height: 48px; } }

.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap: 1.7rem; flex-wrap:wrap;
}
.nav-links a{
  font-size: .82rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink-soft);
}
.nav-links a:hover{ color: var(--red); }
.nav-links a[aria-current="page"]{ color: var(--red); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:3px;
  cursor:pointer; width:42px; height:36px; flex-direction:column; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; height:2px; background: var(--ink); margin-inline:8px; }

@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none; width:100%; flex-direction:column; align-items:flex-start;
    border-top:1px solid var(--line); padding-top:.8rem; gap:0;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; padding-block:.6rem; border-bottom:1px solid var(--line); }
}

/* ---------- hero / photo carousel ---------- */
.hero-photo{
  position:relative;
  aspect-ratio: 21/9;
  background: linear-gradient(135deg,var(--photo-a),var(--photo-b));
  overflow:hidden;
}
.hero-slideshow{
  position:relative;
  aspect-ratio: 21/9;
  overflow:hidden;
  background:#000;
}
.hero-slideshow .slide{
  position:absolute; inset:0;
  opacity:0; transition: opacity 1.1s ease;
}
.hero-slideshow .slide.active{ opacity:1; }
.hero-slideshow .slide img{
  width:100%; height:100%; object-fit:cover;
}
.hero-slideshow.ratio-4-3{ aspect-ratio: 4/3; }
.hero-photo .ph-caption{
  position:absolute; inset:auto 0 0 0;
  text-align:center; font-size:.72rem; color:#8a8a86;
  padding:.4rem; background:rgba(255,255,255,.55);
}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,.85); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); font-size:1.1rem;
}
.carousel-arrow.left{ left:14px; } .carousel-arrow.right{ right:14px; }
.carousel-dots{
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; justify-content:center; gap:6px;
}
.carousel-dots span{ width:7px; height:7px; border-radius:50%; background:#fff; opacity:.6; border:1px solid #bbb; cursor:pointer; }
.carousel-dots span.active-dot{ opacity:1; background: var(--red); border-color: var(--red); }

/* ---------- welcome / text sections ---------- */
.section{ padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.section-tight{ padding-block: 1.6rem; }

/* ---------- +++ headings +++ ---------- */
.plus-heading{
  text-align:center; font-weight:700; letter-spacing:.02em;
  margin: 0 0 1rem;
}
.plus-heading.red{ color: var(--red-bright); }

.jobs-list{ list-style:none; margin:0 auto 0; padding:0; text-align:center; color: var(--red-bright); font-weight:600; }
.jobs-list li{ margin-bottom:.15rem; }

/* ---------- image grids (Aktuelles / Projekte) ---------- */
.photo-grid{ display:grid; gap: 1.4rem; }
.photo-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.photo-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
.photo-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 860px){ .photo-grid.cols-3, .photo-grid.cols-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .photo-grid.cols-2, .photo-grid.cols-3, .photo-grid.cols-4{ grid-template-columns: 1fr; } }

.photo-placeholder{
  position:relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg,var(--photo-a),var(--photo-b));
  display:flex; align-items:center; justify-content:center;
  color:#9b9890;
}
.photo-placeholder svg{ width:36px; height:36px; opacity:.7; }

.project-block{ margin-bottom: 2.6rem; }
.project-block h3{ margin-bottom:.7rem; }

/* ---------- team ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 2.6rem 2rem; }
@media (max-width:700px){ .team-grid{ grid-template-columns: 1fr; } }
.team-member{ text-align:center; max-width:280px; }
.team-photo{
  aspect-ratio: 3/4; background: linear-gradient(180deg,var(--photo-a),var(--photo-b));
  display:flex; align-items:center; justify-content:center; color:#9b9890; margin-bottom:.8rem;
}
.team-photo svg{ width:44px; height:44px; }
.team-member .name{ font-weight:700; margin-bottom:.15rem; }
.team-member .role{ font-size:.9rem; color: var(--ink-soft); margin-bottom:.15rem; }
.team-member .tel{ font-size:.9rem; color: var(--red); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding: .8em 1.5em; font-size:.9rem; border-radius:2px;
  border: 1px solid transparent;
}
.btn-red{ background: var(--red-bright); color:#fff; }
.btn-red:hover{ background: var(--red); }
.btn-link{ color: var(--red-bright); }
.btn-link:hover{ text-decoration: underline; }

.velux-badge{
  display:inline-block; background: var(--red-bright); color:#fff;
  font-weight:700; letter-spacing:.03em; padding:.3em .9em; font-size:.85rem; margin-bottom:1.1rem;
}

/* ---------- legal / notes ---------- */
.legal-block{
  background: var(--bg-soft); border-left:3px solid var(--red);
  padding: 1rem 1.3rem; font-size:.92rem; margin: 1.6rem 0;
}
.note{
  font-size:.82rem; color: var(--red-bright);
  border:1px dashed var(--red-bright); background: rgba(193,39,45,.05);
  padding:.7rem .9rem; border-radius:2px;
}
.prose{ max-width: 74ch; }
.prose h2{ margin-top:1.8em; font-size:1.2rem; }
.prose ul{ color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:1rem; display:flex; flex-direction:column; gap:.35rem; }
.field label{ font-size:.8rem; color: var(--ink-soft); }
.field input, .field textarea{
  font-family: var(--body); font-size:.95rem; padding:.65em .8em;
  border:1px solid var(--line); border-radius:2px; background:#fff;
}
.field textarea{ min-height:120px; resize:vertical; }
.map-frame{ border:1px solid var(--line); aspect-ratio:4/3; }
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---------- cookie banner (visual only, no tracking present) ---------- */
.cookie-banner{
  position:fixed; inset:0; background: rgba(0,0,0,.45); z-index:100;
  display:none; align-items:center; justify-content:center; padding: 1rem;
}
.cookie-banner.show{ display:flex; }
.cookie-box{
  background:#fff; max-width: 420px; width:100%; padding: 1.6rem;
  border-radius:4px; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.cookie-box h3{ display:flex; align-items:center; gap:.5rem; font-size:1.05rem; }
.cookie-box p{ font-size:.88rem; }
.cookie-box .btn{ width:100%; justify-content:center; margin-top:.6rem; }
.cookie-accept{ background:#4c8a3f; color:#fff; }
.cookie-reject{ background:#5b9a4d; color:#fff; }

/* ---------- footer ---------- */
.site-footer{ background: var(--red); color:#fff; text-align:center; padding: 1rem; font-size:.85rem; }
.footer-links{ background: var(--bg-soft); border-top:1px solid var(--line); }
.footer-links .container{
  display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; padding-block:1.2rem;
  font-size:.85rem; color: var(--ink-soft);
}
.footer-links a:hover{ color: var(--red); }