/* ==========================================================================
   AyArts — site.css
   Design: Obsidian · Champagner-Gold · Smaragd · Elfenbein
   Schriften: Cormorant Garamond (Serif) + Inter (Sans), lokal gehostet
   ========================================================================== */

/* Lokale Schriften — hier integriert, spart eine blockierende Anfrage */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-400i.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-400.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-500.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/inter-300.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format('woff2');}

:root{
  --obsidian:#08090a;
  --obsidian-2:#0d0f11;
  --obsidian-3:#141719;
  --ivory:#f0ede9;
  --ivory-70:rgba(240,237,233,.72);
  --ivory-50:rgba(240,237,233,.5);
  --ivory-35:rgba(240,237,233,.35);
  --champagne:#dfba73;
  --champagne-2:#c79c53;
  --champagne-3:#b8914e;
  --emerald:#0b221e;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container:1240px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --header-h:76px;

  --shadow-impasto:22px 24px 60px rgba(0,0,0,.72), -4px -4px 22px rgba(223,186,115,.05);
  --shadow-soft:0 18px 50px rgba(0,0,0,.55);
  --gold-glow:0 0 30px rgba(223,186,115,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  min-height:100vh;
  background:var(--obsidian);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}
img,picture,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
input,textarea,select{font:inherit; color:inherit}
::selection{background:var(--champagne); color:var(--obsidian)}

::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:var(--obsidian)}
::-webkit-scrollbar-thumb{background:var(--champagne-3); border-radius:5px}

/* --- Typografie ---------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:.01em}
.serif{font-family:var(--serif)}
p{max-width:68ch}

.kicker{
  font-family:var(--sans);
  font-size:.72rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.28em;
  color:var(--champagne);
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{content:""; width:26px; height:1px; background:var(--champagne); opacity:.7}
.kicker--center{justify-content:center}

.lead{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ivory-70); line-height:1.8}

/* --- Layout -------------------------------------------------------------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
main{flex:1 0 auto; padding-top:var(--header-h)}
.section{padding-block:clamp(4rem,9vw,8rem)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section__head{max-width:64ch; margin-inline:auto; text-align:center; margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.section__head .section__title{margin-top:1rem}
.section__title{font-size:clamp(2.1rem,4.6vw,3.4rem); color:var(--ivory)}
.section__title em{font-style:italic; color:var(--champagne)}
.rule{height:1px; width:70px; background:var(--champagne); border:0; margin:1.4rem 0}
.rule--center{margin-inline:auto}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 2.1em; font-size:.78rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.22em;
  border:1px solid var(--champagne); color:var(--champagne);
  transition:background .5s var(--ease), color .5s var(--ease), transform .3s var(--ease);
}
.btn:hover{background:var(--champagne); color:var(--obsidian)}
.btn--solid{background:var(--champagne); color:var(--obsidian)}
.btn--solid:hover{background:var(--ivory); border-color:var(--ivory)}
.btn--ghost{border-color:var(--line-2); color:var(--ivory)}
.btn--ghost:hover{border-color:var(--champagne); color:var(--champagne); background:transparent}
.btn--sm{padding:.7em 1.4em; font-size:.7rem}
.btn:active{transform:translateY(1px)}

.textlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--champagne); padding-bottom:.35em;
  border-bottom:1px solid rgba(223,186,115,.35);
  transition:border-color .4s var(--ease), gap .3s var(--ease);
}
.textlink:hover{border-color:var(--champagne); gap:.9em}

/* --- Header -------------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header-h);
  background:rgba(8,9,10,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease), height .4s var(--ease);
}
.site-header.is-scrolled{background:rgba(8,9,10,.94)}
.site-header__inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.brand{display:inline-flex; align-items:center; gap:.7rem}
.brand__mark{height:40px; width:auto; filter:drop-shadow(0 0 10px rgba(223,186,115,.18))}
.site-footer__brand img{height:46px; width:auto}
.brand__name{font-family:var(--serif); font-size:1.7rem; letter-spacing:.14em; color:var(--champagne)}

.nav{display:flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.6rem)}
.nav__link{
  position:relative; font-size:.75rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.2em; color:var(--ivory-70);
  padding:.4em 0; transition:color .35s var(--ease);
}
.nav__link::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--champagne); transition:width .4s var(--ease)}
.nav__link:hover{color:var(--ivory)}
.nav__link.is-active{color:var(--champagne)}
.nav__link.is-active::after{width:100%}

.nav-toggle{display:none; width:44px; height:44px; flex-direction:column; justify-content:center; gap:5px; z-index:60}
.nav-toggle span{display:block; height:1.5px; width:24px; background:var(--ivory); transition:transform .35s var(--ease), opacity .3s}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative; padding-block:clamp(2rem,5vw,4.5rem) clamp(3rem,7vw,6rem)}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,6vw,5rem); min-height:min(78vh,760px)}
.hero__title{font-size:clamp(2.8rem,6.4vw,5.4rem); color:var(--ivory)}
.hero__title em{display:block; font-style:italic; color:var(--champagne); font-size:.72em; margin-top:.1em}
.hero__lead{margin:2rem 0; max-width:44ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; align-items:center}

.hero__figure{position:relative; justify-self:center}
.hero__glow{position:absolute; inset:-8% -6% -4% -6%; background:radial-gradient(ellipse at 60% 40%, rgba(11,34,30,.75), transparent 70%); filter:blur(38px); z-index:0}
.hero__img{position:relative; z-index:1; width:min(430px,80vw); box-shadow:var(--shadow-impasto); border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.hero__img img{width:100%; object-fit:cover; aspect-ratio:4/5; max-height:78vh}
.hero__caption{
  position:absolute; z-index:2; left:-1.5rem; bottom:2rem;
  background:var(--obsidian); border:1px solid var(--line-2);
  padding:1.1rem 1.5rem; box-shadow:var(--shadow-soft);
}
.hero__caption h3{font-size:1.4rem; color:var(--champagne)}
.hero__caption p{font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ivory-50); margin-top:.2rem}

/* --- Artwork-Grid / Cards ------------------------------------------------ */
/* Masonry über CSS-Spalten: Gemälde werden in echter Proportion gezeigt */
.masonry{columns:3 300px; column-gap:clamp(1.6rem,3.5vw,3rem)}
.masonry .card{break-inside:avoid; margin-bottom:clamp(2rem,3.8vw,3.2rem); display:block}
@media (max-width:960px){.masonry{columns:2 260px}}
@media (max-width:560px){.masonry{columns:1}}

/* Gleichmäßiges Raster (verwandte Werke) */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(2rem,4vw,3.4rem)}

.card{position:relative}
.card__media{position:relative; overflow:hidden; background:var(--obsidian-2); border:1px solid var(--line); margin-bottom:1.3rem}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease), filter 1.6s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__badge{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-size:.62rem; text-transform:uppercase; letter-spacing:.18em;
  padding:.4em .8em; background:rgba(8,9,10,.8); border:1px solid var(--line-2); color:var(--ivory-70);
}
.card__badge--sold{color:var(--champagne); border-color:var(--champagne-3)}
.card__title{font-size:1.7rem; color:var(--ivory); transition:color .4s var(--ease)}
.card:hover .card__title{color:var(--champagne)}
.card__meta{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-top:.5rem}
.card__dims{font-size:.82rem; color:var(--ivory-50); line-height:1.5}
.card__dims em{font-style:italic}
.card__price{font-size:.95rem; color:var(--champagne); white-space:nowrap}
.card__cta{margin-top:1.1rem}

/* --- Werk-Detail --------------------------------------------------------- */
.breadcrumb{font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:var(--ivory-50); margin-bottom:2rem}
.breadcrumb a:hover{color:var(--champagne)}
.breadcrumb span{color:var(--ivory-35)}

.werk{display:grid; grid-template-columns:7fr 5fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.gallery__main{position:relative; background:rgba(0,0,0,.35); border:1px solid var(--line); box-shadow:var(--shadow-impasto); padding:clamp(1rem,2.5vw,2.4rem); display:grid; place-items:center; margin-bottom:1.2rem}
.gallery__main img{max-height:72vh; width:auto; object-fit:contain; transition:opacity .4s var(--ease)}
.gallery__thumbs{display:flex; gap:.9rem; flex-wrap:wrap}
.gallery__thumb{width:76px; height:76px; border:1px solid transparent; opacity:.55; overflow:hidden; transition:opacity .3s, border-color .3s}
.gallery__thumb img{width:100%; height:100%; object-fit:cover}
.gallery__thumb:hover{opacity:.85}
.gallery__thumb.is-active{opacity:1; border-color:var(--champagne)}

.werk__dims{font-size:.75rem; text-transform:uppercase; letter-spacing:.2em; color:var(--champagne); margin-bottom:.8rem}
.werk__title{font-size:clamp(2.2rem,4vw,3.2rem); color:var(--ivory)}
.werk__price{font-size:1.3rem; color:var(--ivory); margin:1.1rem 0 1.6rem}
.werk__price .muted{color:var(--ivory-50); font-size:1rem}
.werk__tech{border-left:2px solid var(--champagne); padding-left:1rem; font-style:italic; color:var(--ivory-70); margin:1.4rem 0}
.werk__desc{color:var(--ivory-70)}
.werk__desc p+p{margin-top:1rem}
.werk__note{font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:var(--champagne); margin-top:1.4rem}
.werk__facts{list-style:none; padding:0; margin:1.8rem 0; border-top:1px solid var(--line)}
.werk__facts li{display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.9rem}
.werk__facts span:first-child{color:var(--ivory-50); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem}
.werk__facts span:last-child{color:var(--ivory); text-align:right}

/* --- Formulare ----------------------------------------------------------- */
.formcard{background:rgba(255,255,255,.03); border:1px solid var(--line); padding:clamp(1.6rem,3vw,2.4rem); margin-top:2rem}
.formcard h3{font-size:1.7rem; color:var(--champagne); margin-bottom:.4rem}
.formcard p.hint{font-size:.85rem; color:var(--ivory-50); margin-bottom:1.4rem}
.field{margin-bottom:1rem}
.field label{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ivory-50); margin-bottom:.5rem}
.input,textarea.input,select.input{
  width:100%; background:var(--obsidian); border:1px solid var(--line-2);
  padding:.85em 1em; color:var(--ivory); font-size:.95rem; font-weight:300;
  transition:border-color .3s var(--ease), background .3s;
}
.input:focus,textarea.input:focus,select.input:focus{outline:none; border-color:var(--champagne); background:var(--obsidian-2)}
textarea.input{resize:vertical; min-height:120px; line-height:1.6}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.82rem; color:var(--ivory-70); margin:1rem 0 1.4rem; text-transform:none; letter-spacing:0}
.consent input{margin-top:.25rem; accent-color:var(--champagne)}
.consent a{color:var(--champagne); text-decoration:underline}
.form-status{margin-top:.9rem; font-size:.85rem; color:var(--ivory-50); min-height:1em}
.form-status.is-error{color:#e9b8a8}

/* --- Flash / Meldungen --------------------------------------------------- */
.flash{padding:1rem 1.2rem; border:1px solid var(--line-2); margin-bottom:1.2rem; font-size:.9rem}
.flash--success{border-color:var(--champagne-3); background:rgba(223,186,115,.08); color:var(--champagne)}
.flash--error{border-color:#a5533f; background:rgba(165,83,63,.12); color:#e9b8a8}

/* --- Feature-Karten (Service) ------------------------------------------- */
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem}
.feature{padding:2.2rem 1.8rem; border:1px solid var(--line); background:rgba(11,34,30,.14); transition:background .4s var(--ease), transform .4s var(--ease)}
.feature:hover{background:rgba(11,34,30,.28); transform:translateY(-4px)}
.feature__icon{color:var(--champagne); font-size:1.6rem; margin-bottom:1rem}
.feature h3{font-size:1.4rem; margin-bottom:.7rem}
.feature p{font-size:.9rem; color:var(--ivory-70)}

/* --- Split (Über / Teaser) ---------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split__media img{width:100%; object-fit:cover; box-shadow:var(--shadow-impasto)}
.split__media--portrait img{aspect-ratio:4/5; filter:grayscale(.15) contrast(1.05)}
.prose p{color:var(--ivory-70)} .prose p+p{margin-top:1.1rem}

/* --- Band / CTA ---------------------------------------------------------- */
.band{background:linear-gradient(180deg, var(--obsidian), var(--emerald) 220%); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band__inner{text-align:center; max-width:60ch; margin-inline:auto}

/* --- Footer -------------------------------------------------------------- */
.site-footer{flex-shrink:0; border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem); margin-top:2rem}
.site-footer__inner{display:flex; flex-direction:column; align-items:center; gap:1.5rem; text-align:center}
.site-footer__brand{display:flex; flex-direction:column; align-items:center; gap:.8rem}
.site-footer__tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--ivory-50)}
.site-footer__nav{display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem}
.site-footer__nav a{font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ivory-70); transition:color .3s}
.site-footer__nav a:hover{color:var(--champagne)}
.site-footer__copy{font-size:.72rem; letter-spacing:.1em; color:var(--ivory-35)}
.site-footer__credit{font-size:.72rem; letter-spacing:.08em; color:var(--ivory-35); margin-top:.1rem}
.site-footer__credit a{color:var(--champagne-3); transition:color .3s} .site-footer__credit a:hover{color:var(--champagne)}

/* Partner-Karten */
.partner-card{display:flex; flex-direction:column; text-decoration:none}
.partner-card__link{margin-top:auto; padding-top:1.1rem; color:var(--champagne); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em}

/* --- Rechtstexte --------------------------------------------------------- */
.legal-page{max-width:76ch; margin-inline:auto}
.legal-page h2{font-size:clamp(1.5rem,2.6vw,2rem); color:var(--champagne); margin:2.4rem 0 .8rem}
.legal-page h3{font-size:1.25rem; color:var(--ivory); margin:1.6rem 0 .6rem}
.legal-page p, .legal-page li{color:var(--ivory-70)}
.legal-page p+p{margin-top:.8rem}
.legal-page ul{margin:.6rem 0 .6rem 1.2rem} .legal-page li{margin:.35rem 0}
.legal-page a{color:var(--champagne); text-decoration:underline; text-underline-offset:2px}
.legal-page strong{color:var(--ivory); font-weight:400}
.datalist{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.6rem; margin:1.1rem 0}
.datalist dt{color:var(--ivory-50); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; padding-top:.15rem}
.datalist dd{color:var(--ivory); margin:0}
.legal-note{margin-top:2.2rem; padding:1rem 1.2rem; border:1px solid var(--line-2); background:rgba(223,186,115,.06); font-size:.85rem; color:var(--ivory-70)}
.legal-stand{font-size:.8rem; color:var(--ivory-50); margin-top:2rem}
@media (max-width:560px){.datalist{grid-template-columns:1fr; gap:.1rem} .datalist dd{margin-bottom:.7rem}}

/* --- Sonstiges ----------------------------------------------------------- */
.skip-link{position:absolute; left:-999px; top:0; z-index:100; background:var(--champagne); color:var(--obsidian); padding:.6em 1em}
.skip-link:focus{left:1rem; top:1rem}
.empty-note{text-align:center; color:var(--ivory-50); padding:4rem 0}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr; text-align:center; gap:2.5rem}
  .hero__actions{justify-content:center}
  .hero__lead{margin-inline:auto}
  .werk{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split__media{order:-1}
}
@media (max-width:760px){
  :root{--header-h:66px}
  .nav-toggle{display:flex}
  /* Wichtig: Auf Mobil KEIN backdrop-filter am Header — sonst wird er zum
     Bezugsrahmen für das fixed-Menü und sperrt es auf Header-Höhe ein (iOS). */
  .site-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(8,9,10,.94)}
  .nav{
    position:fixed; inset:0; z-index:45; flex-direction:column; justify-content:center; gap:2rem;
    background:rgba(8,9,10,.98); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    transform:translateX(100%); transition:transform .5s var(--ease);
    overflow-y:auto; padding:5rem 1.5rem;
  }
  .nav__link{font-size:1.15rem}
  body.nav-open .nav{transform:none}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .field-row{grid-template-columns:1fr}
  .hero__caption{left:0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}