/* locations.css – Dominik Olesch Photography · HELLES Theme (passend zu site.css) */

/* Alias-Variablen, damit Inline-Styles der Location-Seiten hell rendern */
:root{
    --gold:#7f9070; --gold-light:#5e6c50; --gold-dark:#4a5640;
    --cream:#22201d; --text-light:#403b34; --text-muted:#8c8275;
    --dark:#f7f6f0; --dark-2:#edefe6; --dark-3:#ffffff;
    --font-serif:'Cormorant Garamond', Georgia, serif;
    --font-sans:'Jost', system-ui, -apple-system, sans-serif;
}

/* Helfer-Klassen (werden im Body noch genutzt, z. B. Galerie-Header) */
.section-label{ display:block; font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--accent-d); margin-bottom:14px; }
.section-title{ font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:400; line-height:1.18; color:var(--ink); margin-bottom:16px; }
.section-title em{ font-style:italic; color:var(--accent-d); }
.section-sub{ font-size:.98rem; font-weight:300; color:var(--muted); line-height:1.7; max-width:580px; }
.divider-a{ width:64px; height:1px; background:var(--accent); opacity:.6; margin:20px 0 22px; }
.divider-b{ display:flex; align-items:center; gap:10px; color:var(--accent); opacity:.7; margin:6px 0 22px; }
.btn-gold{ display:inline-block; font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:14px 32px; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:2px; box-shadow:0 8px 24px rgba(127,144,112,.3); transition:background .3s, color .3s, border-color .3s, transform .3s; }
.btn-gold:hover{ background:var(--accent-d); border-color:var(--accent-d); color:#fff; transform:translateY(-2px); }

/* ── Hub: Location card grid (Alt-Hub, falls noch genutzt) ──────── */
.loc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1180px; margin:0 auto; }
.loc-card{ position:relative; height:320px; overflow:hidden; display:block; text-decoration:none; }
.loc-card-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .55s ease; }
@media (hover:hover){ .loc-card:hover .loc-card-bg{ transform:scale(1.05); } }
.loc-card-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.05) 28%, rgba(20,18,15,.72) 100%); }
.loc-card-content{ position:absolute; bottom:0; left:0; right:0; padding:24px 26px; }
.loc-card-town{ display:block; font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:6px; }
.loc-card-name{ font-family:var(--serif); font-size:1.4rem; font-weight:400; color:#fff; line-height:1.2; margin-bottom:10px; }
.loc-card-link{ font-family:var(--sans); font-size:.64rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#fff; display:inline-flex; align-items:center; gap:6px; opacity:.92; }

/* ── Breadcrumb ────────────────────────────────────────────────── */
.loc-breadcrumb{ background:var(--paper); padding:104px 60px 0; }
.loc-breadcrumb nav{ max-width:900px; margin:0 auto; font-size:.72rem; color:var(--muted); letter-spacing:.04em; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.loc-breadcrumb a{ color:var(--muted); transition:color .25s; }
.loc-breadcrumb a:hover{ color:var(--accent-d); }
.loc-breadcrumb .sep{ color:var(--accent); }
.loc-breadcrumb .current{ color:var(--ink); }

/* ── Intro ─────────────────────────────────────────────────────── */
.loc-intro{ background:var(--paper); padding:44px 60px 80px; }
.loc-intro-inner{ max-width:980px; margin:0 auto; display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:start; }
.loc-intro-text h1, .loc-intro-text h2{ font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:400; line-height:1.2; color:var(--ink); margin-bottom:8px; }
.loc-intro-text h1 em, .loc-intro-text h2 em{ font-style:italic; color:var(--accent-d); }
.loc-intro-text .loc-sub{ font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-d); display:block; margin-bottom:16px; }
.loc-intro-text p{ font-size:.98rem; font-weight:300; color:var(--ink2); line-height:1.85; margin-bottom:16px; }

/* ── Feature box ───────────────────────────────────────────────── */
.loc-feature-box{ background:var(--paper2); border:1px solid var(--line); border-radius:4px; padding:28px 26px; position:sticky; top:90px; }
.loc-feature-box h3, .loc-feature-box .loc-feature-title{ font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-d); margin-bottom:18px; }
.loc-feature-list{ list-style:none; }
.loc-feature-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.86rem; font-weight:300; color:var(--ink2); padding:9px 0; border-bottom:1px solid var(--line); line-height:1.55; }
.loc-feature-list li:last-child{ border-bottom:none; }
.loc-feature-list li i{ color:var(--accent-d); font-size:.72rem; flex-shrink:0; margin-top:4px; }

/* ── Foto-Abschnitt ────────────────────────────────────────────── */
.loc-photo-section{ background:var(--paper2); padding:80px 60px; }
.loc-photo-inner{ max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.loc-photo-inner.reverse{ direction:rtl; }
.loc-photo-inner.reverse > *{ direction:ltr; }
.loc-photo-text h2{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:400; color:var(--ink); margin-bottom:16px; line-height:1.25; }
.loc-photo-text h2 em{ font-style:italic; color:var(--accent-d); }
.loc-photo-text p{ font-size:.96rem; font-weight:300; color:var(--ink2); line-height:1.85; margin-bottom:14px; }
.loc-photo-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; }

/* ── Foto-Hinweisbanner ────────────────────────────────────────── */
.loc-photo-notice{ background:var(--paper2); border-top:2px solid var(--accent); border-bottom:1px solid var(--line); padding:18px 60px; display:flex; align-items:center; gap:14px; }
.loc-photo-notice i{ color:var(--accent-d); font-size:1.15rem; flex-shrink:0; }
.loc-photo-notice span{ font-size:.84rem; font-weight:500; color:var(--ink); letter-spacing:.02em; line-height:1.5; }
.loc-photo-notice span em{ font-style:normal; color:var(--accent-d); }
@media (max-width:768px){ .loc-photo-notice{ padding:14px 24px; } }

/* ── Galerie ───────────────────────────────────────────────────── */
.loc-gallery{ background:var(--paper); padding:80px 60px; }
.loc-gallery-header{ max-width:900px; margin:0 auto 36px; text-align:center; }
.loc-gallery-header .divider-a{ margin-left:auto; margin-right:auto; }
.loc-gallery-header .divider-b{ justify-content:center; }
.loc-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:900px; margin:0 auto; }
.loc-gallery-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; transition:opacity .3s, transform 1s ease; }
.loc-gallery-grid img:hover{ opacity:.94; }

/* ── Weitere Locations ─────────────────────────────────────────── */
.loc-others{ background:var(--paper2); padding:60px; border-top:1px solid var(--line); }
.loc-others-inner{ max-width:900px; margin:0 auto; }
.loc-others h2{ font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-d); margin-bottom:20px; }
.loc-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.loc-pills a{ padding:9px 18px; border:1px solid var(--line); color:var(--ink2); font-size:.76rem; letter-spacing:.05em; border-radius:30px; transition:border-color .25s, color .25s, background .25s; }
.loc-pills a:hover{ border-color:var(--accent); color:var(--accent-d); background:var(--paper); }

/* ── CTA-Streifen ──────────────────────────────────────────────── */
.loc-cta{ background:var(--accent); padding:80px 40px; text-align:center; }
.loc-cta .loc-cta-label{ display:block; font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:rgba(30,26,20,.6); margin-bottom:14px; }
.loc-cta h2{ font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:400; color:#2a2218; margin-bottom:12px; line-height:1.25; }
.loc-cta p{ font-size:.96rem; color:rgba(30,26,20,.78); max-width:520px; margin:0 auto 32px; line-height:1.7; font-weight:300; }
.loc-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-dark{ display:inline-block; padding:14px 36px; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; border-radius:0; transition:background .3s; }
.btn-dark:hover{ background:#33302a; }
.btn-dark-outline{ display:inline-block; padding:14px 36px; border:1px solid rgba(30,26,20,.5); color:#2a2218; font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; border-radius:0; transition:background .3s, border-color .3s; }
.btn-dark-outline:hover{ background:rgba(30,26,20,.08); border-color:#2a2218; }

/* ── SEO-Text ──────────────────────────────────────────────────── */
.loc-seo{ background:var(--paper); padding:80px 60px; border-top:1px solid var(--line); }
.loc-seo-inner{ max-width:760px; margin:0 auto; }
.loc-seo h2{ font-family:var(--serif); font-size:clamp(1.5rem,2.5vw,2.1rem); font-weight:400; color:var(--ink); margin-bottom:20px; line-height:1.3; }
.loc-seo h2 em{ font-style:italic; color:var(--accent-d); }
.loc-seo h3{ font-family:var(--serif); font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:400; color:var(--ink); margin:34px 0 12px; line-height:1.35; }
.loc-seo p{ font-size:.96rem; font-weight:300; color:var(--ink2); line-height:1.85; margin-bottom:14px; }
.loc-seo p:last-child{ margin-bottom:0; }
.loc-seo strong{ color:var(--ink); font-weight:500; }
.loc-seo a{ color:var(--accent-d); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(127,144,112,.4); transition:color .2s; }
.loc-seo a:hover{ color:var(--ink); }
.loc-seo ul{ margin:0 0 16px; padding-left:0; list-style:none; }
.loc-seo ul li{ font-size:.92rem; font-weight:300; color:var(--ink2); line-height:1.8; padding:3px 0 3px 18px; position:relative; }
.loc-seo ul li::before{ content:'–'; position:absolute; left:0; color:var(--accent); opacity:.8; }
.loc-divider{ border:none; border-top:1px solid var(--line); margin:34px 0; }
.loc-faq{ margin-top:4px; }
.loc-faq-item{ border-top:1px solid var(--line); padding:16px 0; }
.loc-faq-item:last-child{ border-bottom:1px solid var(--line); }
.loc-faq-q{ font-size:.92rem; font-weight:500; color:var(--ink); margin-bottom:7px; line-height:1.4; }
.loc-faq-a{ font-size:.9rem; font-weight:300; color:var(--ink2); line-height:1.8; margin:0; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:960px){ .loc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
    .loc-breadcrumb{ padding:92px 24px 0; }
    .loc-intro{ padding:36px 24px 60px; }
    .loc-intro-inner{ grid-template-columns:1fr; gap:32px; }
    .loc-feature-box{ position:static; }
    .loc-photo-section{ padding:60px 24px; }
    .loc-photo-inner{ grid-template-columns:1fr; gap:36px; }
    .loc-photo-inner.reverse{ direction:ltr; }
    .loc-gallery{ padding:60px 24px; }
    .loc-gallery-grid{ grid-template-columns:repeat(2,1fr); }
    .loc-others{ padding:48px 24px; }
    .loc-seo{ padding:60px 24px; }
}
@media (max-width:560px){
    .loc-grid{ grid-template-columns:1fr; }
    .loc-card{ height:260px; }
    .loc-gallery-grid{ grid-template-columns:1fr; }
}