/*
Theme Name:  Hornemann Bold
Theme URI:   https://anne-hornemann.de
Author:      Anne Hornemann
Description: Schwarz · Pink · Weiß. Kraftvoll, klar, editorisch. Alle Inhalte über Design → Anpassen editierbar.
Version:     1.0.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 8.0
License:     GPL v2 or later
Text Domain: hornemann
Tags: photography, portfolio, dark, custom-colors, custom-logo, full-width-template
*/

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --black:   #0A0A0A;
  --black2:  #141414;
  --black3:  #1E1E1E;
  --pink:    #E8245C;
  --pink2:   #FF3D70;
  --pink3:   rgba(232,36,92,0.15);
  --white:   #FFFFFF;
  --grey1:   #F5F5F5;
  --grey2:   #EEEEEE;
  --grey3:   #BBBBBB;
  --grey4:   rgba(255,255,255,0.06);
  --line-d:  rgba(255,255,255,0.07);
  --line-l:  rgba(0,0,0,0.08);
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Crimson Pro', Georgia, serif;
  --fu: 'Jost', sans-serif;
  --gap: clamp(1.5rem, 5vw, 5rem);
  --ease: cubic-bezier(0.16,1,0.3,1);
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body { font-family:var(--fu); font-size:1rem; line-height:1.6; overflow-x:hidden; background:var(--black); color:var(--white) }
img,video { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
ul,ol { list-style:none }
address { font-style:normal }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.wrap       { max-width:1280px; margin-inline:auto; padding-inline:var(--gap) }
.wrap-n     { max-width:900px;  margin-inline:auto; padding-inline:var(--gap) }

/* ─── SECTIONS ───────────────────────────────────────────── */
.s-black  { background:var(--black);  color:var(--white) }
.s-black2 { background:var(--black2); color:var(--white) }
.s-black3 { background:var(--black3); color:var(--white) }
.s-pink   { background:var(--pink);   color:var(--white) }
.s-white  { background:var(--white);  color:var(--black) }
.s-grey   { background:var(--grey1);  color:var(--black) }
.pad      { padding:5rem var(--gap) }
.pad-sm   { padding:3rem var(--gap) }
.pad-lg   { padding:7rem var(--gap) }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
.t-disp {
  font-family:var(--fd);
  font-weight:700;
  line-height:0.88;
  letter-spacing:-0.04em;
}
.t-disp-light {
  font-family:var(--fd);
  font-weight:300;
  font-style:italic;
  line-height:0.92;
  letter-spacing:-0.03em;
}
.t-label {
  font-family:var(--fu);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.28em;
  text-transform:uppercase;
}
.t-pink  { color:var(--pink) }
.t-grey  { color:var(--grey3) }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--fu); font-size:0.7rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  padding:0.875rem 2rem; cursor:pointer;
  transition:all 0.3s var(--ease); white-space:nowrap;
  border:none;
}
.btn-pink  { background:var(--pink); color:var(--white) }
.btn-pink:hover { background:var(--pink2) }
.btn-black { background:var(--black); color:var(--white) }
.btn-black:hover { background:var(--black3) }
.btn-white { background:var(--white); color:var(--black) }
.btn-white:hover { background:var(--grey2) }
.btn-outline-w { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.25) }
.btn-outline-w:hover { border-color:var(--white) }
.btn-outline-b { background:transparent; color:var(--black); border:1px solid rgba(0,0,0,0.2) }
.btn-outline-b:hover { border-color:var(--black) }

/* ─── HEADER ─────────────────────────────────────────────── */
.site-header {
  position:fixed; inset-inline:0; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gap); height:54px;
  transition:background 0.4s var(--ease), border-color 0.4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled {
  background:rgba(10,10,10,0.97);
  backdrop-filter:blur(20px);
  border-bottom-color:var(--line-d);
}
/* light pages */
body.lh .site-header:not(.scrolled) { background:transparent }
body.lh .site-header.scrolled { background:rgba(10,10,10,0.97) }

.site-logo {
  font-family:var(--fu); font-size:0.72rem; font-weight:700;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--white);
  line-height:1;
}
body.lh .site-logo-wrap .site-logo { color:var(--black) }
body.lh .site-header.scrolled .site-logo { color:var(--white) }

.primary-nav { display:flex; align-items:center; gap:0 }
.primary-nav a {
  font-family:var(--fu); font-size:0.68rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  padding:0 1.25rem; height:54px; display:flex; align-items:center;
  border-right:1px solid var(--line-d);
  transition:color 0.2s;
}
.primary-nav a:hover { color:var(--white) }
body.lh .primary-nav a { color:rgba(0,0,0,0.35) }
body.lh .primary-nav a:hover { color:var(--black) }
body.lh .site-header.scrolled .primary-nav a { color:rgba(255,255,255,0.4) }
body.lh .site-header.scrolled .primary-nav a:hover { color:var(--white) }
.primary-nav .nav-cta {
  background:var(--pink); color:var(--white)!important;
  border-right:none; padding:0 1.5rem;
}
.primary-nav .nav-cta:hover { background:var(--pink2) }

.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px; z-index:300;
}
.nav-toggle span {
  display:block; width:24px; height:1.5px;
  background:var(--white); transition:all 0.3s var(--ease); transform-origin:center;
}
body.lh .site-header:not(.scrolled) .nav-toggle span { background:var(--black) }
.nav-toggle[aria-expanded=true] span:nth-child(1) { transform:rotate(45deg) translate(4px,4px) }
.nav-toggle[aria-expanded=true] span:nth-child(2) { opacity:0; transform:scaleX(0) }
.nav-toggle[aria-expanded=true] span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px) }

@media (max-width:900px) {
  .nav-toggle { display:flex }
  .primary-nav {
    display:none; position:fixed; inset:0; z-index:250;
    background:var(--black); flex-direction:column;
    align-items:center; justify-content:center; gap:0;
  }
  .primary-nav.open { display:flex }
  .primary-nav a {
    font-family:var(--fd)!important; font-size:2.5rem!important;
    font-weight:300!important; font-style:italic!important;
    letter-spacing:-0.02em!important; text-transform:none!important;
    color:var(--white)!important; height:auto; padding:1rem 0;
    border:none; border-bottom:1px solid var(--line-d); width:100%;
    text-align:center; justify-content:center;
  }
  .primary-nav a:hover { color:var(--pink)!important }
  .primary-nav .nav-cta {
    background:var(--pink)!important; color:var(--white)!important;
    font-family:var(--fu)!important; font-size:0.8rem!important;
    font-style:normal!important; letter-spacing:0.2em!important;
    text-transform:uppercase!important; padding:1rem 2rem!important;
    border:none!important;
  }
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  background:var(--black); min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:7rem var(--gap) 4rem; position:relative; overflow:hidden;
}
.hero__label {
  display:flex; align-items:center; gap:0.875rem;
  margin-bottom:1.5rem;
}
.hero__label::before {
  content:''; display:block; width:28px; height:1.5px;
  background:var(--pink);
}
.hero__h1 {
  font-family:var(--fd); font-weight:700;
  font-size:clamp(4rem, 11vw, 11rem);
  line-height:0.86; letter-spacing:-0.045em;
  color:var(--white); margin-bottom:2.5rem;
}
.hero__h1 em { font-style:italic; color:var(--pink); font-weight:300 }
.hero__sub {
  font-size:1rem; font-weight:300; color:rgba(255,255,255,0.45);
  letter-spacing:0.02em; line-height:1.75;
  max-width:50ch; margin-bottom:2.5rem;
}
.hero__ctas { display:flex; gap:0.5rem; flex-wrap:wrap }

.hero__num {
  position:absolute; right:var(--gap); bottom:4rem;
  font-family:var(--fd); font-size:clamp(8rem,18vw,18rem);
  font-weight:700; line-height:1; letter-spacing:-0.06em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.04);
  pointer-events:none; user-select:none;
}

/* ─── STATS BAND ─────────────────────────────────────────── */
.stats { display:grid; grid-template-columns:repeat(4,1fr) }
.stat {
  padding:1.75rem 2rem;
  border-right:1px solid var(--line-d);
  display:flex; flex-direction:column; gap:0.375rem;
}
.stat:last-child { border-right:none }
.stat__n {
  font-family:var(--fu); font-size:2.5rem; font-weight:900;
  line-height:1; color:var(--white); letter-spacing:-0.03em;
}
.s-white .stat__n, .s-grey .stat__n { color:var(--black) }
.stat__l { color:var(--pink); font-size:0.65rem }

/* ─── SERVICES ───────────────────────────────────────────── */
.svc-item { border-top:1px solid var(--line-d) }
.svc-item:last-child { border-bottom:1px solid var(--line-d) }
.s-white .svc-item, .s-grey .svc-item { border-top-color:var(--line-l) }
.s-white .svc-item:last-child, .s-grey .svc-item:last-child { border-bottom-color:var(--line-l) }

.svc-link {
  display:grid; grid-template-columns:2.5rem 1fr 1fr auto;
  align-items:center; gap:2rem; padding:1.5rem 0;
  cursor:pointer; transition:opacity 0.25s; color:inherit;
}
.svc-link:hover { opacity:0.6 }
.svc-n { font-weight:900; font-size:0.8rem; color:var(--pink) }
.svc-name {
  font-family:var(--fd); font-size:clamp(1.5rem,2.5vw,2.25rem);
  font-weight:700; letter-spacing:-0.025em;
}
.svc-desc { font-size:0.8rem; color:rgba(255,255,255,0.3); line-height:1.6 }
.s-white .svc-desc, .s-grey .svc-desc { color:rgba(0,0,0,0.35) }
.svc-arr { color:var(--pink); font-weight:900; font-size:1.1rem }

/* ─── SPLIT ──────────────────────────────────────────────── */
.split { display:grid; grid-template-columns:1fr 1fr }
.split-img {
  overflow:hidden; position:relative;
  background:var(--black3); aspect-ratio:3/4;
}
.split-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease) }
.split-img:hover img { transform:scale(1.04) }
.split-ph {
  width:100%; height:100%; min-height:420px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(255,255,255,0.15);
}
.split-body {
  padding:4rem var(--gap);
  display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
}
.split-kicker { color:var(--pink) }
.split-title {
  font-family:var(--fd); font-weight:700;
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:0.9; letter-spacing:-0.035em;
}
.split-title em { font-style:italic; font-weight:300; color:var(--pink) }
.split-text { font-size:0.95rem; line-height:1.8; color:rgba(255,255,255,0.45); max-width:38ch }
.s-white .split-text, .s-grey .split-text { color:rgba(0,0,0,0.5) }

/* ─── PORTFOLIO GRID ─────────────────────────────────────── */
.port-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px }
.port-grid--4 { grid-template-columns:repeat(4,1fr) }
.port-item { aspect-ratio:3/4; overflow:hidden; position:relative; background:var(--black3) }
.port-item--wide { grid-column:span 2; aspect-ratio:16/9 }
.port-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease), filter 0.8s var(--ease) }
.port-item:hover img { transform:scale(1.06); filter:brightness(0.7) }
.port-cap {
  position:absolute; bottom:0; left:0; right:0;
  padding:2rem 1.25rem 1.25rem;
  background:linear-gradient(transparent,rgba(0,0,0,0.85));
  opacity:0; transform:translateY(8px);
  transition:all 0.4s var(--ease);
}
.port-item:hover .port-cap { opacity:1; transform:translateY(0) }
.port-cap-name { font-family:var(--fd); font-size:1.25rem; font-weight:700; font-style:italic }
.port-cap-sub { color:var(--pink); margin-top:0.25rem }

/* ─── PRICING ────────────────────────────────────────────── */
.pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; background:var(--line-l) }
.pkg { background:var(--white); padding:2.5rem 2rem; display:flex; flex-direction:column; gap:1rem }
.pkg--hot { background:var(--black); color:var(--white); position:relative }
.pkg__badge {
  display:inline-block; background:var(--pink); color:var(--white);
  padding:0.3rem 0.875rem; font-size:0.6rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; margin-bottom:0.25rem;
}
.pkg__num { font-family:var(--fd); font-size:1.5rem; font-style:italic; font-weight:300; color:var(--pink) }
.pkg__name { font-family:var(--fd); font-size:1.875rem; font-weight:700; line-height:1; letter-spacing:-0.025em; color:var(--black) }
.pkg--hot .pkg__name { color:var(--white) }
.pkg__dur { color:var(--pink); font-size:0.65rem }
.pkg__price { font-family:var(--fu); font-size:2.75rem; font-weight:900; letter-spacing:-0.03em; color:var(--black); line-height:1 }
.pkg--hot .pkg__price { color:var(--white) }
.pkg__list { flex:1; display:flex; flex-direction:column; gap:0.5rem }
.pkg__list li { font-size:0.875rem; line-height:1.5; padding-left:1.25rem; position:relative; color:rgba(0,0,0,0.6) }
.pkg--hot .pkg__list li { color:rgba(255,255,255,0.55) }
.pkg__list li::before { content:'—'; position:absolute; left:0; color:var(--pink); font-size:0.75rem }
.pkg__foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.25rem; border-top:1px solid rgba(0,0,0,0.08);
  font-size:0.65rem; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; cursor:pointer; color:var(--black);
  transition:opacity 0.25s;
}
.pkg--hot .pkg__foot { border-top-color:rgba(255,255,255,0.1); color:var(--white) }
.pkg__foot:hover { opacity:0.6 }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-item { border-top:1px solid var(--line-l) }
.s-black .faq-item, .s-black2 .faq-item { border-top-color:var(--line-d) }
.faq-item:last-child { border-bottom:1px solid var(--line-l) }
.s-black .faq-item:last-child { border-bottom-color:var(--line-d) }
.faq-q {
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.25rem 0; cursor:pointer; user-select:none;
  font-family:var(--fd); font-size:clamp(1.1rem,2vw,1.5rem);
  font-weight:700; letter-spacing:-0.01em; transition:color 0.25s;
}
.faq-q:hover, .faq-item.open .faq-q { color:var(--pink) }
.faq-icon { font-size:1.5rem; color:var(--pink); flex-shrink:0; transition:transform 0.35s var(--ease); line-height:1; font-weight:300 }
.faq-item.open .faq-icon { transform:rotate(45deg) }
.faq-a { overflow:hidden; max-height:0; transition:max-height 0.5s var(--ease) }
.faq-item.open .faq-a { max-height:400px }
.faq-a p { padding-bottom:1.5rem; font-size:0.95rem; line-height:1.85; color:rgba(0,0,0,0.55) }
.s-black .faq-a p, .s-black2 .faq-a p { color:rgba(255,255,255,0.45) }

/* ─── PULLQUOTE ──────────────────────────────────────────── */
.pq { border-left:3px solid var(--pink); padding:0.5rem 0 0.5rem 2rem; max-width:860px }
.pq__text { font-family:var(--fd); font-size:clamp(1.5rem,3vw,2.75rem); font-weight:700; line-height:0.95; letter-spacing:-0.03em; margin-bottom:1rem }
.pq__attr { color:var(--pink) }

/* ─── CONTACT FORM ───────────────────────────────────────── */
.cf { display:flex; flex-direction:column; gap:1.25rem }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem }
.cf-field { display:flex; flex-direction:column; gap:0.5rem }
.cf-field label { font-size:0.65rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.3) }
.s-white .cf-field label, .s-grey .cf-field label { color:rgba(0,0,0,0.4) }
.cf-field input, .cf-field textarea, .cf-field select {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--white); font-family:var(--fb); font-size:1rem;
  padding:0.875rem 1rem; outline:none; width:100%;
  transition:border-color 0.25s, background 0.25s;
}
.s-white .cf-field input, .s-white .cf-field textarea, .s-white .cf-field select,
.s-grey  .cf-field input, .s-grey  .cf-field textarea, .s-grey  .cf-field select {
  background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.12); color:var(--black);
}
.cf-field input:focus, .cf-field textarea:focus { border-color:var(--pink); background:rgba(232,36,92,0.05) }
.cf-field textarea { min-height:140px; resize:vertical }
.cf-field input::placeholder, .cf-field textarea::placeholder { color:rgba(255,255,255,0.2) }
.s-white .cf-field input::placeholder { color:rgba(0,0,0,0.25) }
.cf-fb { font-size:0.8rem; padding:0.75rem 1rem; font-weight:500 }
.cf-fb.ok  { background:rgba(232,36,92,0.15); color:var(--pink); border-left:3px solid var(--pink) }
.cf-fb.err { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.6); border-left:3px solid rgba(255,255,255,0.2) }

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer { background:var(--black2); padding:4rem var(--gap) 2rem; border-top:1px solid var(--line-d) }
.footer-g { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem }
.footer-name { font-family:var(--fu); font-size:0.72rem; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--white); margin-bottom:0.5rem }
.footer-sub { font-size:0.75rem; color:var(--pink); font-weight:500; letter-spacing:0.1em; margin-bottom:1rem }
.footer-desc { font-size:0.875rem; line-height:1.75; color:rgba(255,255,255,0.3); max-width:36ch }
.footer-col h4 { font-size:0.6rem; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:1.25rem }
.footer-col a, .footer-col p { display:block; font-size:0.875rem; color:rgba(255,255,255,0.35); line-height:1.75; transition:color 0.25s }
.footer-col a:hover { color:var(--pink) }
.footer-bot { display:flex; justify-content:space-between; align-items:center; padding-top:1.5rem; border-top:1px solid var(--line-d); font-size:0.65rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.18) }
.footer-bot a { color:rgba(255,255,255,0.18); transition:color 0.25s }
.footer-bot a:hover { color:var(--pink) }

/* ─── REVEAL ─────────────────────────────────────────────── */
.rv { opacity:0; transform:translateY(28px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease) }
.rv.in { opacity:1; transform:translateY(0) }
.rv-d1 { transition-delay:0.1s } .rv-d2 { transition-delay:0.2s }
.rv-d3 { transition-delay:0.35s } .rv-d4 { transition-delay:0.5s }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1100px) {
  .stats { grid-template-columns:repeat(2,1fr) }
  .footer-g { grid-template-columns:1fr 1fr }
  .svc-link { grid-template-columns:2rem 1fr auto; gap:1.25rem }
  .svc-desc { display:none }
}
@media (max-width:860px) {
  .split { grid-template-columns:1fr }
  .pricing { grid-template-columns:1fr }
  .port-grid { grid-template-columns:repeat(2,1fr) }
  .cf-row { grid-template-columns:1fr }
}
@media (max-width:600px) {
  .stats { grid-template-columns:1fr 1fr }
  .footer-g { grid-template-columns:1fr }
  .footer-bot { flex-direction:column; gap:0.75rem; text-align:center }
}