:root{
  --bg:#0f0f0f;
  --text:#efefef;
  --muted:#b8b8b8;
  --accent:#b79c82; /* beige/ton */
  --accent-2:#6b7b5a; /* olive */
  --paper:#ffffff;
  --earth:#e5dfd7;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Work Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{max-width:1200px;margin:0 auto;padding:1rem 1.25rem;}

.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid #212121;
  padding-block:0.75rem;
}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:600;letter-spacing:.02em}
.brand-name{font-family:'Playfair Display',serif;font-weight:600;font-size:1.1rem}

.nav{display:flex;gap:1rem;flex-wrap:wrap}
.nav a{opacity:.9;padding:.4rem .6rem;}
.nav a:hover{background:#1b1b1b;opacity:1}

.site-footer{
  border-top:1px solid #212121;
  margin-top:3rem;
  padding-block:2rem;
  color:var(--muted);
  text-align: center;
}

/* Hero slider */
.slider{position:relative;overflow:hidden;}
.slides{display:flex;transition:transform .5s ease}
.slide{min-width:100%;position:relative}
.slide img{width:100%;height:62vh;object-fit:cover}

.slide .caption{
  position:absolute;
  left:1rem;
  bottom:1rem;
  background:rgba(0,0,0,.45);
  padding:.5rem .75rem;
  font-size:.95rem;
  color:#fff;
}

.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);border:none;color:#fff;padding:.5rem .7rem;cursor:pointer}
.slider-btn:hover{background:rgba(0,0,0,.7)}
.slider-btn.prev{left:.5rem}
.slider-btn.next{right:.5rem}
.slider-dots{display:flex;gap:.4rem;position:absolute;left:50%;transform:translateX(-50%);bottom:.6rem}
.slider-dots button{width:.55rem;height:.55rem;border:none;background:#999;opacity:.8;cursor:pointer}
.slider-dots button.active{background:var(--accent)}

/* Section styles */
.section{padding-block:2.5rem}
.section-title{font-family:'Playfair Display',serif;font-size:2rem;letter-spacing:.01em;margin:0 0 1rem}
.lead{color:var(--muted);max-width:80ch;line-height:1.6}

/* Masonry grid (desktop) -> column layout; mobile -> single column */
.gallery{column-gap:1rem}
.gallery-item{break-inside:avoid;margin-bottom:1rem;overflow:hidden}
.gallery-item img{width:100%;height:auto;display:block;transition:transform .3s ease;cursor: pointer;}
.gallery-item:hover img{transform:scale(1.02)}

/* Lightbox using <dialog> */
.lightbox::backdrop{background:rgba(0,0,0,.8)}
.lightbox{border:none;padding:0;background:transparent}
.lightbox-inner{
  position:relative;
  max-width:min(96vw,1400px);
  max-height:90vh;
  margin:auto;
  display:flex;                 /* NEU: zentrieren des Bildes */
  align-items:center;
  justify-content:center;
  padding:1rem;                 /* etwas Luft um das Bild */
}
.lightbox img{
  width:auto;                   /* NEU: nicht mehr 100% erzwingen */
  max-width:100%;
  max-height:80vh;              /* damit Buttons Platz haben */
  display:block;
}

.lb-close,.lb-prev,.lb-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.55);border:none;color:#fff;cursor:pointer;padding:.5rem .75rem;
}
.lb-close{top:.5rem;right:.5rem;transform:none}
.lb-prev{left:.5rem}
.lb-next{right:.5rem}

/* Forms */
form{display:grid;gap:.9rem}
.input{display:grid;gap:.35rem}
label{font-size:.95rem;color:var(--muted)}
input,textarea,select{
  background:#151515;border:1px solid #232323;color:var(--text);padding:.75rem .9rem;font:inherit
}
.submitbtn{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:.75rem 1rem;
  font-weight:600;
  cursor:pointer
}

.submitbtn:hover{
  background:#555
}

/* Responsive */
@media (min-width: 900px){
  .gallery{column-count:3}
}
@media (min-width: 1200px){
  .gallery{column-count:3}
}
@media (max-width: 899px){
  .slider .slide img{height:48vh}
}


/* THEME TOGGLE */
.theme-toggle{background:#1b1b1b;border:1px solid #2a2a2a;color:#fff;padding:.5rem .7rem;cursor:pointer;display:flex;gap:.4rem;align-items:center}
.theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .sun{display:inline}
html[data-theme="light"] .theme-toggle .moon{display:none}

/* Light theme */
html[data-theme="light"]{
  --bg:#f7f5f2;
  --text:#161616;
  --muted:#555;
  --accent:#b79c82;
  --accent-2:#6b7b5a;
  --paper:#ffffff;
  --earth:#e5dfd7;
}
html[data-theme="light"] .nav a:hover{background:#e9e5df}
html[data-theme="light"] .slider .slide img{filter:none}
html[data-theme="light"] .site-header, html[data-theme="light"] .site-footer{border-color:#e0ddd8}
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select{
  background:#ffffff;border-color:#d9d6d0;color:#111;
}

/* Portfolio index hero links */
.portfolio-links{display:grid;gap:1.1rem}
.hero-link{
  position:relative;overflow:hidden;min-height:48vh;
  display:grid;place-items:center;color:#fff;
}
.hero-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity: 0.5;}
.hero-link:hover img{opacity: 1;}
.hero-link::before{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.2));}
.hero-content{position:relative;text-align:center}
.hero-content h3{font-family:'Playfair Display',serif;font-size:2rem;letter-spacing:.08em;margin:.2rem 0}
.hero-content a{display:inline-block;margin-top:.5rem;padding:.45rem .9rem;background:rgba(255,255,255,.1);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.4)}
.hero-content a:hover{background:rgba(255,255,255,.2)}
@media (min-width: 900px){ .portfolio-links{gap:1.4rem} .hero-link{min-height:56vh} }


/* === ABOUT PAGE LAYOUT & EFFECTS === */
.about-wrap{display:grid;gap:2rem}
@media (min-width: 900px){
  .about-wrap{grid-template-columns:1.1fr .9fr;align-items:start}
}

.subtle{color:var(--muted)}
.h3-sub{font-family:'Playfair Display',serif;font-size:1.3rem;letter-spacing:.02em;color:var(--accent);margin:.5rem 0 1rem}

.about-block{background:#111; border:1px solid #1f1f1f; padding:1.2rem}
html[data-theme="light"] .about-block{background:#fff;border-color:#e7e3dc}

.love-list{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.love-item{display:flex;align-items:flex-start;gap:.7rem}
.love-item i{font-size:1.1rem;color:var(--accent);position:relative;top:.15rem}
.love-item span{line-height:1.6}

.why-box{background:linear-gradient(0deg, rgba(183,156,130,.08), rgba(183,156,130,.04));border:1px solid rgba(183,156,130,.35);padding:1.1rem}
.why-box h3{margin:.2rem 0 1rem;font-family:'Playfair Display',serif}
.why-list{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.why-list li{display:flex;gap:.6rem;align-items:flex-start}
.why-list i{color:var(--accent);position:relative;top:.18rem}

/* Fade-in only on major blocks */
.fade{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.fade.reveal{opacity:1; transform:none}

/* Slightly looser typesetting on About */
.about p, .about .lead{line-height:1.8}


/* Screen-reader-only utility */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Icon-only social link on Kontakt */
.contact-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;
  border:1px solid #2a2a2a;background:#151515;
}
.contact-social a:hover{background:#1b1b1b}
.contact-social i{
  font-size:1.5rem;
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .contact-social a{background:#fff;border-color:#e4e0d9}
html[data-theme="light"] .contact-social a:hover{background:#f5f2ee}





/* === ABOUT PAGE GRID LAYOUT === */
/* === ABOUT PAGE GRID LAYOUT (v3) === */
.about-grid{
  display:grid;
  gap:2rem;
  align-items:center;
}

/* Desktop: 2 Spalten; Bild rechts so hoch wie Intro + Love zusammen */
@media (min-width: 900px){
  .about-grid{
    grid-template-columns: 1.5fr 1fr;
  }
  .about-intro{ grid-column:1; grid-row:1; }
  .about-image-wrap{ grid-column:2; grid-row:1 / span 2; }
  .about-love{ grid-column:1; grid-row:2; }
}

/* Bild: 4:5, ohne runde Ecken, füllt die Höhe */
.about-image{
  width:100%;
  aspect-ratio: 3 / 4;
  object-fit:cover;
}

.love-list{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.love-item{display:flex;align-items:flex-start;gap:.7rem}
.love-item i{font-size:1.1rem;color:var(--accent);position:relative;top:.15rem}
.love-item span{line-height:1.6}

.why-box{
  background:linear-gradient(0deg, rgba(183,156,130,.08), rgba(183,156,130,.04));
  border:1px solid rgba(183,156,130,.35);
  padding:1.1rem;
  line-height: 1.6rem;
}
.why-box h3{margin:.2rem 0 1rem;font-family:'Playfair Display',serif}
.why-list{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.why-list li{display:flex;gap:.6rem;align-items:flex-start}
.why-list i{color:var(--accent);position:relative;top:.18rem}

/* Fade-in + stagger */
.fade{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.fade.reveal{opacity:1;transform:none}
.fade.delay-1{transition-delay:0.15s}
.fade.delay-2{transition-delay:0.3s}

.about-inline-image {
  margin: 2rem 0;
}
.about-inline-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.about-closing-image {
  margin-top: 3rem;
  text-align: center;
}
.about-closing-image img {
  max-width: 600px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* About: 2-Spalten-Reihen auf Desktop (mobil 1 Spalte) */
.about-row{
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px){
  .about-row{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.about-row-media img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.about-row-text p{ margin: 0 0 1rem 0; }

/* Spezifische Abstände für die beiden Reihen */
.about-row--inline{ margin: 2rem 0; }
.about-row--closing{ margin-top: 3rem; }




.home-cta{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.5rem;
}
.home-cta a{
  display:inline-block;
  padding: 1rem 6rem;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:500;
  transition:background .35s ease;
}
.home-cta a:hover{
  background:#555
}

.home-cta button{
  display:inline-block;
  padding: 1rem 6rem;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:500;
  transition:background .35s ease;
  border:none;
  width: 100%;
}
.home-cta button:hover{
  background:#555
}


/* === MOBILE BURGER MENU === */
.burger{
  display:none;
  background:none;
  border:none;
  padding:.4rem;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:.25rem;
}
.burger-bar{
  display:block;
  width:35px;
  height:2px;
  background:currentColor;
}
.burger .burger-bar + .burger-bar{ margin-top:5px; }

/* Mobiles Nav-Panel (klappt von oben unter dem Header auf) */
@media (max-width: 820px){
  .site-header{ position: relative; }
  .burger{ display:block; color: var(--text); }

  /* Desktop-Nav verstecken, mobil als Panel darstellen */
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    background:#e9e5df;      /* gewünschte volle Hintergrundfarbe */
    padding:1rem;
    gap:1rem;
    z-index:50;
    animation: fadeIn .2s ease;
  }
  html[data-theme="dark"] .nav{
    /* im Dark-Theme leicht abgedunkelte Variante */
    background:#dcd6cd;
  }
  .nav.open{ display:flex; }

  /* Links full-width & touchfreundlich */
  .nav a{
    color:#111;
    padding:.6rem .4rem;
  }
  .nav a:hover{
    background:rgba(0,0,0,.06);
  }

  /* Header-Layout: Brand links, Burger rechts */
  .site-header{
    display:flex; align-items:center; justify-content:space-between;
  }
}

/* schlichte Fade-Animation */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }



/* === PRICING (Angebote) === */
.pricing-section{ padding-block:2.5rem; }
.pricing-title{ font-family:'Playfair Display',serif; font-size:2rem; letter-spacing:.01em; margin:0 0 1rem; }

.pricing-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin: 2rem 0;
}

.price-card{
  background:#131313;
  border:1px solid #1f1f1f;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
html[data-theme="light"] .price-card{
  background:#ffffff;
  border-color:#e7e3dc;
}

.price-card h3{
  margin:.2rem 0 0;
  font-family:'Playfair Display',serif;
  font-size:1.2rem;
  color: var(--accent);
}

.price-includes{
  margin:0;
  padding-left:1.1rem;
  line-height:1.6;
}
.price-value{
  margin-top:.3rem;
  font-weight:700;
}

/* dezente Info-/Extras-Box (angepasst an about-block/why-box) */
.extras-box{
  margin-top:1rem;
  background:linear-gradient(0deg, rgba(183,156,130,.08), rgba(183,156,130,.04));
  border:1px solid rgba(183,156,130,.35);
  padding:1rem;
}
.extras-list{
  margin:0;
  padding-left:1.1rem;
  line-height:1.6;
}

/* feine horizontale Trennlinie */
.section-divider{
  height:1px;
  margin:2rem 0;
  background:linear-gradient(to right, transparent, rgba(183,156,130,.45), transparent);
  opacity:.6;
}

/* Hinweis/Note unterhalb */
.pricing-note{
  margin-top:1rem;
  color:var(--muted);
}

/* kleine optische Angleiche an Headlines in Cards */
.price-card .lead{ font-size:.95rem; }

/* Responsive Feinschliff */
@media (min-width: 900px){
  .pricing-title{ font-size:2.2rem; }
}

/* Custom Bullet Points nur für Angebotsseite */
.pricing-section ul {
  list-style: none; /* Standard Bullets entfernen */
  padding-left: 1.2rem; /* Platz für eigene Bullets */
}

.pricing-section ul li {
  position: relative;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.pricing-section ul li::before {
  content: '';
  position: absolute;
  left: -1.2rem;
  top: 0.6rem;
  width: 0.3rem;
  height: 0.3rem;
  background-color: var(--accent-2); /* deine Akzentfarbe */
}


/* === HOME ONEPAGER TEASERS === */
.home-teasers .section-title{ margin-bottom:.75rem; }
.home-teaser-lead{ color:var(--muted); max-width:70ch; }

/* Portfolio: 3-spaltig (mobil 1) mit Bildkacheln */
.home-portfolio-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .home-portfolio-grid{ grid-template-columns:repeat(3, 1fr); }
}
.home-portfolio-tile{
  position:relative; overflow:hidden; min-height:38vh;
}
.home-portfolio-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); opacity:.6; transition:opacity .25s ease; }
.home-portfolio-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.2)); }
.home-portfolio-tile:hover img{ opacity:1; }
.home-portfolio-content{ position:relative; z-index:2; color:#fff; text-align:center; padding:1rem; display:grid; place-items:end center; height:100%; }
.home-portfolio-content h3{ font-family:'Playfair Display',serif; letter-spacing:.04em; margin:.2rem 0; }
.home-portfolio-content p{ max-width:52ch; margin:.25rem auto 0; opacity:.95; }

/* Cards ohne Bilder (Angebote) */
.home-card-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .home-card-grid{ grid-template-columns:repeat(3, 1fr); }
}
.home-card{
  background:#131313; border:1px solid #1f1f1f; padding:1rem;
  display:flex; flex-direction:column; gap:.5rem; min-height: 100%;
}
html[data-theme="light"] .home-card{ background:#fff; border-color:#e7e3dc; }
.home-card h3{ margin:.2rem 0 0; font-family:'Playfair Display',serif; color:var(--accent); }
.home-card ul{ margin:0; padding-left:1.1rem; }
.home-card ul li{ line-height:1.6; }

/* Mini-Kontaktblock 
.home-contact{
  display:grid; gap:.6rem;
  border:1px solid #1f1f1f; padding:1rem;
  background-color: #fff;
}*/
html[data-theme="light"] .home-contact{ border-color:#e7e3dc; }
.home-contact .contact-social a{ border:none; background:transparent; }
.home-contact .contact-social i{ color:var(--accent); }

/* Kontakt-Icon im Card-Kontext (gleiches Verhalten wie andere Cards) */
/* .home-card .contact-social a{
  border:none;
  background:transparent;
  padding:0;
}
.home-card .contact-social i{
  color:var(--accent);
  font-size:1.1rem;
} */

/* CTA in Teaser-Sektionen: Desktop = Kachel-Breite (3 Spalten), Mobile = 1 Spalte */
@media (min-width: 900px){
  .home-teasers section .home-cta{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem; /* passt zu den Kachel-Grids */
  }
  .home-teasers section .home-cta a{
    display: block;
    width: 100%;
    grid-column: 1;          /* belegt eine Spalte -> gleiche Breite wie eine Kachel */
    justify-self: stretch;
    text-align: center;
  }
}

/* CTA Buttons auf Mobile: volle Breite */
@media (max-width: 768px) {
  .home-cta a,
  .section .home-cta a,
  .cta a {
    display: block;
    width: 100%;
    text-align: center;
  }
  
  /* falls mehrere Buttons nebeneinander stehen -> Abstand */
  .home-cta a + a,
  .cta a + a {
    margin-top: 0.5rem;
  }
}


/* Fade-in der Teaser */
.home-teasers .fade{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.home-teasers .fade.reveal{ opacity:1; transform:none; }


/* === Divider zwischen Intro und Teasern === */
.home-divider {
  border: none;
  border-top: 1px solid #1f1f1f;
  margin: 2rem 0;
}

.gallery-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.gallery-validity{
  margin-top:.25rem;
  color: var(--muted);
  font-size:.95rem;
}
@media (max-width: 640px){
  .gallery-head-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .gallery-head .home-cta a{
    width:100%;
    text-align:center;
  }
}

.gallery-validity-box { margin-top: .75rem; }
.gallery-validity-box p { margin: 0; }


#back-to-top{
  margin: 2rem;
  cursor: pointer;
}

#load-more-wrap{
  margin: 2rem;
  cursor: pointer;
}


/* Kontakt-Teaser Layout: Bild links (Desktop), darunter (Mobile) */
.home-kontakt-grid{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.home-kontakt-image img{
  width: 100%;
  object-fit: cover;
}
@media (min-width: 900px){
  .home-kontakt-grid{
    grid-template-columns: 0.5fr 1fr;
  }

  .home-kontakt-image img{
    width: 24%;
    object-fit: cover;
  }

}