@import "@fontsource/open-sans/300.css";
@import "@fontsource/open-sans/400.css";
@import "@fontsource/open-sans/500.css";
@import "@fontsource/open-sans/600.css";
@import "@fontsource/open-sans/700.css";
/* =========================================================
   Global Styles
   ========================================================= */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
/* Theme tokens */
:root{
  --bg:#111318;
  --surface:#1a1d24;
  --text:#f2f2f2;
  --muted:#8c919b;
  --accent:#e6c17a;

  --container:1200px;
  --r-sm:10px;
  --r-md:14px;

  --shadow:0 12px 32px rgba(0,0,0,.22);
  --shadow-lg:0 20px 48px rgba(0,0,0,.35);
}

body.light{
  --bg:#f2f2f2;
  --surface:#fff;
  --text:#111;
  --muted:#555;
  --accent:#b8944d;

  --shadow:0 10px 26px rgba(0,0,0,.12);
  --shadow-lg:0 18px 40px rgba(0,0,0,.18);
}

/* Reset / base */
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  font-size:16px; /* vorher implizit 16px */
}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  letter-spacing:.3px;

  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

h1,h2,h3{font-weight:400;margin:0 0 1rem}
p{color:var(--muted);max-width:720px}

/* Better mobile text sizing + avoid iOS zoom on form fields */
html{-webkit-text-size-adjust:100%}
input,textarea,select,button{font:inherit;font-size:16px}

/* Layout sections */
section{
  max-width:var(--container);
  margin:0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}
footer{margin-top:auto}

/* =========================================================
   Header / Nav
   ========================================================= */
header{
  position:sticky;
  inset:0 0 auto 0;
  width:100%;
  background:rgba(28,31,36,.9);
  backdrop-filter:blur(10px);
  z-index:1000;
}

:root{ --header-h: 86px; }
@media (max-width: 600px){ :root{ --header-h: 90px; } }

/* Optional: auf Mobile ggf. höherer Header */
@media (max-width: 600px){
  :root{ --header-h: 90px; }
}

body.light header{background:rgba(255,255,255,.9)}

nav{
  max-width:var(--container);
  margin:0 auto;
  padding:1.2rem 1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

.logo{font-weight:600;letter-spacing:1px}

nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:2rem;
}
nav a:hover{color:var(--accent)}

.toggle{
  cursor:pointer;
  border:0;
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.8rem;
  color:var(--text);
  background:transparent;
}
.toggle:hover{background:color-mix(in srgb, var(--surface) 70%, transparent)}
.toggle:active{transform:translateY(1px)}

/* =========================================================
   Buttons / CTAs
   ========================================================= */
.cta{
  display:inline-block;
  margin-top:2.5rem;
  border:1px solid var(--accent);
  padding:.75rem 2.1rem;
  border-radius:999px;
  color:var(--accent);

  /* ensure <button class="cta"> looks identical to <a class="cta"> */
  background:transparent;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background .25s ease,color .25s ease,transform .2s ease;
}
.cta:hover{background:var(--accent);color:#000}
.cta:active{transform:translateY(1px)}

.cta:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset:4px;
}

/* =========================================================
   Home / Hero
   ========================================================= */
#home{
  padding-bottom:6rem;
}
#home h1{
  font-size:clamp(2.8rem,6vw,4.5rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.5px;
  margin-bottom:1.5rem;
}
#home h1 span{color:var(--accent)}

/* Home mini gallery (masonry columns) */
#home .gallery{
  margin-top:3rem;
  column-count:2;
  column-gap:1.2rem;
}
#home .gallery img{
  width:100%;
  margin:0 0 1.2rem;
  border-radius:0;
  cursor:default;
  filter:grayscale(20%);
  transition:transform .4s ease,filter .4s ease;
}
#home .gallery img:hover{transform:scale(1.015);filter:grayscale(0%)}
@media (max-width:600px){#home .gallery{column-count:1}}

/* Categories teaser */
.categories{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
  margin-top:3rem;
}
.category{
  background:var(--surface);
  border-radius:var(--r-sm);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.category:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.category img{width:100%;height:220px;object-fit:cover}
.category div{padding:1.2rem}

/* Preview grid */
.preview{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin-top:2rem;
}
.preview img{border-radius:var(--r-sm)}

/* =========================================================
   Gallery page
   ========================================================= */
.gallery{
  margin-top:2rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.gallery img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:var(--r-sm);
  cursor:pointer;
  background:#000;

  box-shadow:var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.gallery img:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  filter:saturate(1.05) contrast(1.04);
}
@media (max-width:1100px){.gallery{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media (max-width:600px){.gallery{grid-template-columns:1fr;gap:1.25rem}}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.lightbox img{max-width:92%;max-height:92%}

/* Gallery filters */
.gallery-wrap{margin-top:2rem}
.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1.5rem 0 1rem;
}
.pill{
  border:0;
  background:var(--surface);
  color:var(--text);
  padding:.5rem .9rem;
  border-radius:999px;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
  display:inline-flex;
  gap:.5rem;
  align-items:center;
}
.pill:hover{transform:translateY(-1px)}
.pill.is-active{background:var(--accent);color:#000}
.pill__count{font-size:.75rem;opacity:.85}

/* Lightbox controls */
.lightbox-btn{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff;
  width:44px;
  height:44px;
  border-radius:999px;
  cursor:pointer;
  display:grid;
  place-items:center;
  user-select:none;
}
.lightbox-btn:hover{background:rgba(255,255,255,.18)}
.lightbox-close{top:24px;right:24px;transform:none}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}

/* =========================================================
   About
   ========================================================= */
.about .content-wrapper{
  display:flex;
  align-items:center;
  gap:3rem;
}

/* Text nimmt den restlichen Platz */
.about .text-area{
  flex:1 1 0;
  min-width:0;
}

/* Portrait rechts mit definierter Breite */
.about .portrait-area{
  flex:0 500px;
}

.about .portrait-area img{
  width:100%;
  height:auto;
  display:block;
  border-radius:0;
  box-shadow:var(--shadow);
}

/* Responsive: auf Tablet/Phone untereinander */
@media (max-width: 900px){
  .about .content-wrapper{
    flex-direction:column;
    gap:2rem;
  }
  .about .portrait-area{
    flex:unset;
    max-width:450px;
    margin:0 auto;
  }
}

/* =========================================================
   Footer
   ========================================================= */
footer{
  background:var(--surface);
  text-align:center;
  padding:2rem;
  font-size:.9rem;
}
footer a{color:var(--muted);margin:0 .5rem}
footer a:hover{color:var(--accent)}

body.lightbox-open{overflow:hidden}

/* Footer: Button like link */
footer .footer-link-btn{
  background:none;
  border:0;
  padding:0;
  margin:0 .5rem;
  color:var(--muted);
  font:inherit;
  cursor:pointer;
}
footer .footer-link-btn:hover{color:var(--accent)}
footer .footer-link-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* =========================================================
   Responsive tweaks (mobile first improvements)
   ========================================================= */

/* Tablet */
@media (max-width: 900px){
  section{padding:6rem 1.25rem 3.5rem}
  #home{padding-top:9rem;padding-bottom:5rem}

  nav ul{gap:1.25rem}

  .category img{height:200px}
}

/* Phone */
@media (max-width: 600px){
  /* Let the fixed header breathe and allow nav to wrap */
  nav{padding:.95rem 1rem;flex-wrap:wrap}
  nav ul{flex-wrap:wrap;gap:1rem;justify-content:flex-end}

  section{padding:5.25rem 1rem 3rem}
  #home{padding-top:7.75rem;padding-bottom:4.25rem}

  /* Text blocks should not be artificially narrow on small screens */
  p{max-width:none}

  .category img{height:180px}
  .categories{gap:1.1rem}
}

/* Very small screens */
@media (max-width: 420px){
  .cta{padding:.7rem 1.5rem}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .cta,.category,.gallery img,#home .gallery img,.pill,.toggle{transition:none!important}
}

/* =========================================================
   Klaro
   ========================================================= */
/* Hide "Toggle all" ("Alle Dienste aktivieren oder deaktivieren") */
.klaro .cm-toggle-all{display:none!important}