/*
Theme Name: RaumSaunaBau
Theme URI: https://raumsaunabau.de
Author: RaumSaunaBau
Description: Individuelles, reduziertes WordPress-Theme fuer RaumSaunaBau.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: raumsaunabau
*/

:root {
  --ink: #11110f;
  --paper: #f6f4ef;
  --white: #fff;
  --line: rgba(17,17,15,.18);
  --max: 1540px;
  --pad: clamp(20px, 4vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .58; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--white); padding: 12px 16px;
}
.skip-link:focus { left: 12px; top: 12px; }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  color: var(--white);
  transition: background .25s ease, color .25s ease, padding .25s ease;
}
.site-header.is-scrolled {
  color: var(--ink); background: rgba(246,244,239,.94);
  backdrop-filter: blur(12px); padding-top: 15px; padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.brand img { max-height: 42px; width: auto; }
.nav-list { display: flex; gap: clamp(18px, 2.5vw, 42px); list-style: none; margin: 0; padding: 0; }
.nav-list a { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.menu-toggle { display:none; border:0; background:none; color:inherit; padding:6px 0; text-transform:uppercase; letter-spacing:.08em; font-size:12px; }

.hero {
  min-height: 100svh;
  position: relative;
  display: flex; align-items: flex-end;
  color: var(--white);
  background: #292722 center/cover no-repeat;
}
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08) 35%,rgba(0,0,0,.62) 100%); }
.hero-inner { position:relative; z-index:1; width:100%; padding: 150px var(--pad) clamp(48px, 8vw, 120px); }
.hero-kicker { margin:0 0 22px; font-size:13px; letter-spacing:.15em; text-transform:uppercase; }
.hero h1 { max-width: 1050px; margin:0; font-size:clamp(48px,8.2vw,132px); line-height:.92; letter-spacing:-.045em; font-weight:400; }
.hero-sub { max-width:600px; margin:30px 0 0; font-size:clamp(17px,1.5vw,24px); line-height:1.35; }

.section { padding: clamp(90px, 12vw, 190px) var(--pad); }
.section-inner { max-width: var(--max); margin: 0 auto; }
.eyebrow { margin:0 0 48px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.intro-grid { display:grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr); gap:clamp(44px,8vw,150px); align-items:start; }
.intro-copy { margin:0; font-size:clamp(34px,5vw,78px); line-height:1.04; letter-spacing:-.035em; font-weight:400; }
.intro-note { margin:8px 0 0; max-width:480px; font-size:18px; }

.project-feature { margin-top:clamp(70px,10vw,150px); }
.project-feature img { width:100%; height:min(78vw,950px); object-fit:cover; }
.project-meta { display:flex; justify-content:space-between; gap:24px; margin-top:18px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }

.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,2vw,30px); margin-top:clamp(28px,4vw,60px); }
.gallery figure { margin:0; overflow:hidden; background:#dedbd3; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.75,.3,1); }
.gallery figure:hover img { transform:scale(1.018); }
.gallery .portrait { grid-column:span 5; aspect-ratio:3/4; }
.gallery .landscape { grid-column:span 7; aspect-ratio:4/3; }
.gallery .wide { grid-column:span 12; aspect-ratio:16/9; }

.services { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.service { padding:28px 26px 44px 0; border-right:1px solid var(--line); }
.service + .service { padding-left:26px; }
.service:last-child { border-right:0; }
.service-number { font-size:12px; margin-bottom:70px; }
.service h3 { font-weight:400; font-size:clamp(24px,2.4vw,38px); margin:0 0 18px; letter-spacing:-.025em; }
.service p { margin:0; max-width:280px; color:rgba(17,17,15,.72); }

.about-grid { display:grid; grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr); gap:clamp(50px,10vw,170px); }
.about-title { margin:0; font-size:clamp(38px,5vw,76px); line-height:1.04; letter-spacing:-.035em; font-weight:400; }
.about-copy { font-size:clamp(20px,2vw,30px); line-height:1.4; }
.about-copy p:first-child { margin-top:0; }
.about-details { margin-top:45px; display:grid; gap:14px; font-size:15px; }
.about-details div { display:grid; grid-template-columns:110px 1fr; gap:20px; padding-top:12px; border-top:1px solid var(--line); }

.contact { background:var(--ink); color:var(--paper); }
.contact h2 { margin:0; max-width:1000px; font-size:clamp(48px,8vw,126px); line-height:.94; letter-spacing:-.045em; font-weight:400; }
.contact-links { display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(70px,10vw,150px); border-top:1px solid rgba(255,255,255,.26); }
.contact-link { padding:26px 0; border-bottom:1px solid rgba(255,255,255,.26); font-size:clamp(20px,2vw,34px); }
.contact-link:nth-child(odd) { border-right:1px solid rgba(255,255,255,.26); }
.contact-link:nth-child(even) { padding-left:30px; }

.site-footer { background:var(--ink); color:var(--paper); padding:40px var(--pad); border-top:1px solid rgba(255,255,255,.18); }
.footer-inner { max-width:var(--max); margin:auto; display:flex; justify-content:space-between; gap:30px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.footer-links { display:flex; gap:24px; }

.default-page { max-width:900px; margin:0 auto; padding:160px var(--pad) 100px; }
.default-page h1 { font-size:clamp(42px,6vw,82px); font-weight:400; letter-spacing:-.035em; }
.default-page .entry-content { font-size:18px; }

@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .primary-nav { position:absolute; left:0; right:0; top:100%; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); display:none; }
  .primary-nav.is-open { display:block; }
  .nav-list { display:block; padding:18px var(--pad) 28px; }
  .nav-list li { border-bottom:1px solid var(--line); }
  .nav-list a { display:block; padding:16px 0; }
  .intro-grid, .about-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .service:nth-child(2) { border-right:0; }
  .service:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .gallery .portrait, .gallery .landscape { grid-column:span 6; }
}
@media (max-width: 600px) {
  .site-header { padding-top:17px; padding-bottom:17px; }
  .hero h1 { font-size:clamp(46px,15vw,74px); }
  .hero-sub { font-size:17px; }
  .services-grid { grid-template-columns:1fr; }
  .service, .service + .service { padding:24px 0 38px; border-right:0; border-bottom:1px solid var(--line); }
  .service-number { margin-bottom:38px; }
  .gallery { display:block; }
  .gallery figure { margin-bottom:14px; aspect-ratio:auto !important; }
  .gallery img { height:auto; }
  .contact-links { grid-template-columns:1fr; }
  .contact-link:nth-child(odd) { border-right:0; }
  .contact-link:nth-child(even) { padding-left:0; }
  .footer-inner { display:block; }
  .footer-links { margin-top:22px; flex-wrap:wrap; }
}