/* =============================================================================
   NICOLE ORIVE — Revealed by Light
   Mehrseitige statische Website. Kein Build-Tool nötig — reines HTML/CSS/JS.
   Inhalte stehen direkt im HTML (auch ohne JavaScript sichtbar).
   JavaScript ist nur Komfort: Sprachumschalter, Menü, Lightbox, Einblenden.
   ============================================================================= */
:root{
  --paper:#F7F4EE; --ink:#40382D; --mist:#554C40;
  --gold:#8A6B33; --gold-soft:#CBB688; --brown:#5C4726; --line:#E7E0D3; --maxw:1180px;
}
/* --gold und --brown wurden vertieft (AAA-Kontrast bei Fließtext/Labels), --gold-soft bleibt
   die hellere Variante für rein dekorative Linien/Rahmen ohne Text. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:only light;background:#F7F4EE}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);min-height:100vh;min-height:100dvh;
  font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.serif{font-family:Georgia,"Times New Roman",serif;font-style:italic}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--brown);font-weight:500}
button{font-family:inherit}

/* ---------------------------------------------------------------------------
   HEADER — steht im normalen Textfluss (nicht sticky), scrollt mit weg.
   Kontakt steht als erstes Element jeder Seite immer oben, muss dafür
   nicht fixiert bleiben.
   --------------------------------------------------------------------------- */
header{position:relative;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;height:68px;gap:18px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:36px;width:auto}
.brand .nm{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);white-space:nowrap;font-weight:500}
.hcontact{margin-left:auto;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  font-weight:500;white-space:nowrap;transition:color .2s}
.hcontact:hover{color:var(--brown)}

/* Sprach-Dropdown */
.langbox{position:relative}
.langbtn{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;
  font-size:12px;letter-spacing:.14em;color:var(--mist);font-weight:500;padding:14px 8px;margin:-14px -8px}
.langbtn .arrow{font-size:9px;transition:transform .25s ease}
.langbtn[aria-expanded="true"] .arrow{transform:rotate(180deg)}
.langmenu{position:absolute;top:32px;right:0;min-width:120px;background:#FBF9F4;
  border:1px solid var(--gold-soft);box-shadow:0 14px 40px rgba(64,56,45,.18);padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s}
.langmenu.open{opacity:1;visibility:visible;transform:none}
.langmenu button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:9px 16px;font-size:11.5px;letter-spacing:.14em;color:var(--mist);font-weight:500}
.langmenu button:hover{color:var(--brown)}
.langmenu button.on{color:var(--brown);font-weight:700}

.burger{background:none;border:none;cursor:pointer;padding:14px 12px;margin:-14px -12px;display:block}
.burger span{display:block;width:22px;height:1.8px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

nav#sitenav{position:absolute;top:68px;right:32px;min-width:210px;background:#FBF9F4;
  border:1px solid var(--gold-soft);box-shadow:0 18px 50px rgba(64,56,45,.18);padding:14px 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s;z-index:70}
nav#sitenav.open{opacity:1;visibility:visible;transform:none}
nav#sitenav a{display:block;padding:12px 24px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500}
nav#sitenav a:hover{color:var(--brown)}
nav#sitenav a.current{color:var(--brown);font-weight:700}
@media (max-width:560px){nav#sitenav{left:16px;right:16px}}

/* Schmale Screens: Header darf nicht überlaufen */
@media (max-width:480px){
  .bar{gap:8px}
  .brand .nm{display:none}
  .hcontact{font-size:11.5px;letter-spacing:.14em}
}
@media (max-width:340px){
  .langbtn .cur{display:none}
}

main{}

/* ---------------------------------------------------------------------------
   LANDING — sehr reduziert, viel Weißraum, ein Link zu den Werken
   --------------------------------------------------------------------------- */
.gate{min-height:min(480px, calc(100dvh - 68px));display:flex;align-items:center;justify-content:center;text-align:center}
.gate .inner{max-width:640px;padding:40px 32px}
.gate .mono{width:120px;height:auto;margin:0 auto 40px;opacity:0;transform:translateY(12px);animation:rise 1.1s .1s ease forwards}
.gate .eyecatch{display:block;width:min(260px,68vw);margin:0 auto 40px;overflow:hidden;box-shadow:0 20px 60px rgba(64,56,45,.10);
  opacity:0;transform:translateY(12px);animation:rise 1.1s .1s ease forwards}
.gate .eyecatch img{width:100%;display:block}
.gate h1{font-size:clamp(24px,5vw,40px);letter-spacing:.32em;text-transform:uppercase;font-weight:200;margin:0 0 16px;
  opacity:0;animation:rise 1.1s .35s ease forwards}
.gate .rule{width:0;height:1px;background:var(--gold);margin:0 auto 16px;animation:grow 1.2s .8s ease forwards}
.gate .tag{font-size:clamp(18px,2.6vw,24px);color:var(--gold);opacity:0;animation:rise 1.1s .7s ease forwards}
@media (min-width:1024px){
  .gate h1{font-size:clamp(44px,4vw,60px)}
  .gate .tag{font-size:clamp(24px,2vw,32px)}
}
.gate .cta{display:inline-block;margin-top:34px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);font-weight:500;padding-bottom:6px;border-bottom:1px solid var(--gold);opacity:0;animation:rise 1.1s 1.05s ease forwards;
  transition:color .25s,letter-spacing .25s}
.gate .cta:hover{color:var(--brown);letter-spacing:.32em}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes grow{to{width:120px}}
@keyframes growLg{to{width:170px}}
@media (min-width:1024px){.gate .rule{animation-name:growLg}}
@media (prefers-reduced-motion:reduce){
  .gate .mono,.gate h1,.gate .tag,.gate .cta{opacity:1;transform:none;animation:none}
  .gate .rule{width:120px;animation:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:1024px){
  .gate .rule{width:170px}
}
/* Größere Screens: Hero nutzt die verfügbare Breite, statt in einer schmalen
   Spalte mit viel Leerraum links/rechts zu verschwinden. Teaser-Bild wächst mit. */
@media (min-width:640px){
  .gate .inner{max-width:720px}
  .gate .eyecatch{width:min(340px,40vw)}
}
@media (min-width:1024px){
  .gate .inner{max-width:900px}
  .gate .eyecatch{width:min(460px,34vw)}
}
@media (min-width:1440px){
  .gate .inner{max-width:980px}
  .gate .eyecatch{width:520px}
}
/* Kleine Screens: Vertikalen Rhythmus straffen, damit Footer/Copyright nicht
   knapp unterhalb des sichtbaren Viewports verschwindet. */
@media (max-width:480px){
  .gate .eyecatch{margin-bottom:28px}
  .gate .cta{margin-top:24px}
}

/* Kurzer, sichtbarer Einführungstext unterhalb des Hero — bewusst knapp und in
   gedämpfter Farbe gehalten, damit die Startseite optisch weiterhin reduziert
   wirkt, aber Suchmaschinen (und Menschen ohne Scroll-Geduld) etwas Substanz
   bekommen statt nur Name + Tagline. */
.intro-seo{padding:0 0 72px}
.intro-seo .lead{max-width:640px;margin:0 auto;padding:0 32px;text-align:center;
  font-size:15px;line-height:1.9;color:var(--mist)}
@media (max-width:480px){.intro-seo{padding:0 0 40px}}

/* ---------------------------------------------------------------------------
   Seiten allgemein
   --------------------------------------------------------------------------- */
.page-head{padding-top:32px;padding-bottom:4px}
.page-head .eyebrow{display:block;margin-top:26px}
.page-head p{max-width:680px;font-size:clamp(17px,2.2vw,21px);line-height:1.9;color:#463D30;margin:0}
.page-head p.compact{font-size:15px;line-height:1.6;color:var(--mist);max-width:600px}

/* ---- Serien-Anker-Leiste — robust bis 5 Einträge, dann horizontal scrollbar ---- */
.serienav{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:14px 0 16px;margin-bottom:4px;border-bottom:1px solid var(--line);scrollbar-width:none}
.serienav::-webkit-scrollbar{display:none}
.serienav a{flex:0 0 auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);white-space:nowrap;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;padding-right:9px;position:relative}
.serienav a:not(:last-child)::after{content:"|";position:absolute;right:1px;color:var(--line);border-bottom:none}
.serienav a:last-child{padding-right:0}
@media (max-width:400px){
  .serienav a{font-size:11px;letter-spacing:.1em;padding-right:7px}
  .serienav a:not(:last-child)::after{right:0}
}
.serienav a:hover{color:var(--brown);border-color:var(--gold-soft)}

section{padding:28px 0 100px}
@media (max-width:480px){section{padding:20px 0 56px}}
.section-head{max-width:660px;margin:0 0 44px}
.vz-note{font-size:11.5px;color:var(--mist);margin-top:36px;letter-spacing:.05em}
.section-head h2{font-size:clamp(19px,2.8vw,25px);letter-spacing:.26em;text-transform:uppercase;font-weight:400;margin:0 0 16px}
.section-head .desc{color:var(--mist);font-size:15px;line-height:1.9}
.series{margin-bottom:96px}
.series:last-child{margin-bottom:0}

/* ---- Werke-Grid: 2 Spalten mobil, 3 ab Tablet — nutzt die Breite bei
   größeren Screens, statt gestreckt/gequetscht zu wirken ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
@media (min-width:700px){.grid{grid-template-columns:1fr 1fr 1fr;gap:40px 28px}}
@media (min-width:1100px){.grid{gap:56px 40px}}
.grid.grid-3{grid-template-columns:1fr 1fr 1fr;gap:14px 12px}
@media (min-width:600px){.grid.grid-3{gap:28px 22px}}
figure{margin:0;cursor:pointer}
html.js figure{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
html.js figure.in{opacity:1;transform:none}
.plate{position:relative;width:100%;overflow:hidden;background:var(--pl,linear-gradient(150deg,#EEEAE2,#E4DFD5));box-shadow:0 1px 0 rgba(64,56,45,.03)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 30% 20%,rgba(203,182,136,0),rgba(203,182,136,0));transition:background .5s ease}
figure:hover .plate::after{background:radial-gradient(120% 90% at 30% 20%,rgba(203,182,136,.22),rgba(203,182,136,0) 60%)}
.plate img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
figcaption{margin-top:10px}
figcaption .t{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
figcaption .m{margin-top:4px;font-size:11.5px;letter-spacing:.08em;color:var(--mist)}
@media (min-width:720px){figcaption .m{font-size:11.5px}}
figcaption .poa{margin-top:4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
@media (min-width:720px){figcaption .poa{font-size:10.5px}}

/* ---- Werkverzeichnis (kompakte Liste, wie im PDF-Katalog) ----
   max-width hält Name/Jahr/Größe enger zusammen statt über die volle
   Containerbreite auseinandergezogen zu wirken. */
.verzeichnis{border-top:1px solid var(--line);padding-top:8px;max-width:660px}
.vz-series{margin-bottom:38px}
.vz-series:last-child{margin-bottom:0}
.vz-series h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-weight:500;margin:0 0 14px}
.vz-row{display:grid;grid-template-columns:1fr auto 84px;column-gap:18px;align-items:baseline;padding:14px 4px;margin:0 -4px;border-bottom:1px solid var(--line);font-size:13.5px;cursor:pointer;transition:background .15s}
.vz-row:hover,.vz-row:focus-visible{background:rgba(203,182,136,.12);outline:none}
.vz-row .n{color:var(--ink)}
.vz-row .y{color:var(--mist);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.vz-row .dim{color:var(--mist);white-space:nowrap;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}

/* ---- Lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:100;display:none;background:rgba(40,34,26,.88);
  backdrop-filter:blur(4px);overflow-y:auto;padding:64px 18px}
.lightbox.open{display:block}
.lb-inner{max-width:780px;margin:0 auto;background:var(--paper);padding:20px 20px 32px}
@media (min-width:640px){.lb-inner{padding:32px 40px 44px}}
.lb-close{display:block;margin:0 0 18px auto;background:none;border:none;cursor:pointer;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);font-weight:500}
.lb-close:hover{color:var(--brown)}
.lb-views{display:flex;flex-direction:column;gap:14px}
@media (min-width:640px){.lb-views{flex-direction:row}}
.lb-plate{flex:1;position:relative;overflow:hidden;background:var(--pl,#eee)}
.lb-img{position:absolute;inset:0}
.lb-img img{width:100%;height:100%;object-fit:cover;display:block}
.lb-label{position:absolute;bottom:10px;left:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(40,34,26,.55);padding:4px 9px}
.lb-info{margin-top:26px}
.lb-info .s{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-weight:500;margin-bottom:6px}
.lb-info .t{font-size:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.lb-info .m{margin-top:8px;font-size:13px;color:var(--mist)}
.lb-inquire{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--brown);border-bottom:1px solid var(--gold);padding-bottom:4px;transition:color .2s,border-color .2s}
.lb-inquire:hover{color:var(--ink);border-color:var(--brown)}

/* ---- Serien-Kontext (z. B. Remains I–III) — dezent, klar als Zusatz erkennbar ---- */
.lb-group{display:none;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.lb-group.show{display:block}
.lb-group-img{width:100%;aspect-ratio:1400/559;overflow:hidden;background:#eee}
.lb-group-img img{width:100%;height:100%;object-fit:cover;display:block}
.lb-group-note{margin-top:12px;font-size:12.5px;font-style:italic;color:var(--mist);max-width:520px}

/* ---- Über ---- */
.about p{font-size:17px;line-height:2;color:#463D30;margin:0 0 22px;max-width:720px}
.about .divider{width:56px;height:1px;background:var(--gold);margin:0 0 34px}
.about .portrait{width:180px;margin:32px 0 32px;overflow:hidden}
.about .portrait img{width:100%;display:block}
@media (min-width:640px){.about .portrait{width:220px}}
.more-toggle{display:inline-block;margin-top:6px;background:none;border:none;cursor:pointer;padding:0;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--brown);border-bottom:1px solid var(--gold-soft)}
.more-toggle:hover{color:var(--ink);border-color:var(--gold)}
.more-body{max-height:0;overflow:hidden;transition:max-height .5s ease}
.more-body.open{max-height:1200px}
.more-body p{font-size:15.5px;line-height:1.95;color:#544a3c;margin:22px 0 0;max-width:700px}
.more-body a{border-bottom:1px solid var(--gold);color:var(--brown);transition:color .2s}
.more-body a:hover{color:var(--ink)}

/* ---- Kontakt ---- */
.contact-hero{padding:70px 0 110px}
.contact-hero .tag{display:block;font-size:clamp(19px,2.8vw,24px);color:var(--gold);margin-bottom:26px}
.contact-hero a.big{font-size:clamp(19px,3vw,25px);color:var(--ink);font-weight:500;border-bottom:1px solid var(--gold-soft);padding-bottom:3px}
.contact-hero a.big:hover{color:var(--brown);border-color:var(--gold)}
.contact-hero .note{margin-top:26px;max-width:520px;font-size:15px;line-height:1.85;color:#463D30}
.contact-hero .row{margin-top:30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-weight:500}
.contact-hero .row a:hover{color:var(--ink)}
.contact-hero .poa{margin-top:40px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-weight:500}

/* ---- Footer — dezent, aber lesbar: Logo unten, Copyright daneben, Rechtslinks
   darunter. Beide Zeilen sind bündig auf denselben rechten Rand ausgerichtet —
   dafür keine horizontale Innenpolsterung auf den Legal-Links (nur .gap regelt
   den Abstand zwischen ihnen), sonst rückt "Datenschutz" optisch nach innen. ---- */
footer{border-top:1px solid var(--line);padding:28px 0 34px}
footer .fbar{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
footer .fmark{display:flex;align-items:center;gap:10px}
footer .fmark img{width:28px;height:auto;opacity:1}
footer .fmark .cr{font-size:13px;letter-spacing:.03em;color:var(--mist);font-weight:500}
footer .legal{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:500}
footer .legal a{display:inline-block;padding:12px 0;margin:-12px 0}
footer .legal a:hover{color:var(--brown)}

/* ---- Rechtsseiten ---- */
.legal-page{padding:120px 0 90px}
.legal-page .wrap{max-width:720px}
.legal-page h1{font-size:21px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin:0 0 8px}
.legal-page h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brown);margin:30px 0 8px;font-weight:600}
.legal-page p{font-size:14.5px;line-height:1.9;color:#4a4234;margin:0 0 12px}
.legal-page .field{color:var(--brown)}
.legal-page .note{background:#EFE8DA;border-left:2px solid var(--gold);padding:12px 16px;color:#5c4726;font-size:13px;line-height:1.7;margin-bottom:28px}
.legal-page .back{display:inline-block;margin-bottom:30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-weight:500}
.legal-page .back:hover{color:var(--ink)}

/* Barrierefrei versteckte Überschriften — für SEO/Screenreader, ändern nichts am Design */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lang-note{color:var(--mist);margin-bottom:24px}