/*
Theme Name: Upper 17
Theme URI: https://upper17.capetown
Author: Upper 17
Description: Ferienhaus-Theme für Upper · 17, Kapstadt. Alle Texte und Bilder sind unter "Design → Customizer" pflegbar, zweisprachig DE/EN.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: upper17
*/


/* — Farbgebung nach Vorlage: gedecktes Blaugrau + Weiß statt des roten
   Modernist-Akzents; Struktur, Typografie und Raster bleiben unverändert — */
:root {
  --color-bg: #f6f7f5;
  --color-surface: #ffffff;
  --color-text: #1e1e1e;
  --color-divider: #9ba6a2;
  --color-accent: #7fa5a8;
  --color-accent-100: #f0f4f4;
  --color-accent-200: #dde7e7;
  --color-accent-300: #c2d3d4;
  --color-accent-400: #a1bcbe;
  --color-accent-500: #7fa5a8;
  --color-accent-600: #688e91;
  --color-accent-700: #4f7275;
  --color-accent-800: #3a5557;
  --color-accent-900: #263739;
  --color-accent-2: #c2a083;
  --color-accent-2-100: #f7f2ec;
  --color-accent-2-200: #ece0d3;
  --color-accent-2-300: #ddc9b3;
  --color-accent-2-400: #d0b59b;
  --color-accent-2-500: #c2a083;
  --color-accent-2-600: #a8866a;
  --color-accent-2-700: #8a6a51;
  --color-accent-2-800: #664d3a;
  --color-accent-2-900: #443326;
  --color-ink: #344955;
  --color-sand: #ddd6cc;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-heading-weight: 500;
}
/* elegantere Typografie: Serifen-Display über der sachlichen Grotesk */
.display, .close h3 { letter-spacing: -0.005em; margin-left: -0.02em; }
.split-title, .enquiry-title, .f-title, .nav-brand { color: var(--color-ink); }
.display { font-size: clamp(50px, 7.4vw, 100px); line-height: 1.02; }
.close h3 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1.05; }
.split-title, .enquiry-title { font-size: clamp(28px, 2.5vw, 34px); line-height: calc(1.5 * var(--leading)); letter-spacing: -0.005em; text-wrap: balance; }
.f-title { font-size: 30px; letter-spacing: 0; }
.stat-num { font-size: clamp(40px, 4vw, 56px); letter-spacing: -0.01em; margin-left: -0.02em; }
.nav-brand { font-family: var(--font-heading); font-size: 26px; letter-spacing: 0.02em; }
.quote blockquote { letter-spacing: 0; }
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
section[id], div[id] { scroll-margin-top: calc(3.5 * var(--leading)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
@media (max-width: 900px) { .nav a { display: none; } }

/* — Kopfbereich: Hauptfoto als Hintergrund von Menü und Überschrift — */
.hero-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column;
  color: #fff; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { display: block; width: 100%; height: 100%; }
.hero-shell::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(23,34,44,.62) 0%, rgba(23,34,44,.28) 38%, rgba(23,34,44,.72) 100%); }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: var(--half) clamp(18px, 2.4vw, 34px); padding-top: var(--leading); padding-bottom: var(--leading); }
.nav[data-over] { background: transparent; border-bottom: 0; color: #fff; }
.nav:not([data-over]) { background: var(--color-bg); border-bottom: 2px solid var(--color-divider); }
.nav .nav-brand { display: none; }
.nav .nav-brand { margin-right: 0; }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
.nav[data-over] .nav-brand, .nav[data-over] a { color: #fff; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--half) clamp(18px, 2.4vw, 34px); }
.nav-right { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px);
  position: absolute; right: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-right { position: static; }
  /* Mobiles Menü: Panel unter der Kopfzeile */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
  .nav { justify-content: space-between; }
  .nav-links { position: static; left: auto; transform: none; }
  .nav-links[data-open] { display: flex; flex-direction: column; align-items: center;
    width: 100%; order: 3; gap: 0; margin-top: var(--half);
    border-top: 1px solid rgba(255,255,255,.35); }
  .nav-links[data-open] a { display: block; width: 100%; text-align: center;
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .btn, .input, textarea.input { min-height: 44px; }
  .lang button { min-height: 44px; padding-inline: 4px; }
  .dot-btn { width: 14px; height: 14px; }
}
@media (min-width: 901px) { .nav-toggle { display: none; } }
.nav[data-over] a:hover, .nav[data-over] a[aria-current='location'] { color: var(--color-accent-300); }
.nav:not([data-over]) a[aria-current='location'] { color: var(--color-accent-700); }
.nav:not([data-over]) .nav-links[data-open] { background: var(--color-bg); border-top-color: var(--color-divider); }
.nav:not([data-over]) .nav-links[data-open] a { border-bottom-color: var(--color-divider); }
.nav[data-over] .btn-ghost, .hero-shell .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.lang { display: flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0.08em; }
/* Vollflächige Flächenfarbe: der tiefe Schritt trägt weiße Schrift, das helle
   Salbei-Blau bleibt Marke, Hover und Rahmen */
.btn-primary { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.btn-primary:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-primary:active { background: var(--color-accent-900); border-color: var(--color-accent-900); }
.lang button { background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit;
  letter-spacing: inherit; color: inherit; opacity: .6; }
.lang button[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lang span { opacity: .5; }
.nav[data-over] .btn-ghost:hover, .hero-shell .hero .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.hero-shell > .wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-shell .hero { padding-top: calc(3 * var(--leading)); display: flex; flex-direction: column;
  padding-bottom: calc(2 * var(--leading)); }
.hero-shell .hero .sub { color: rgba(255,255,255,.92); max-width: 52ch; }
.hero-shell .hero-meta { color: rgba(255,255,255,.85); border-top: 2px solid rgba(255,255,255,.4);
  padding-top: var(--leading); margin-top: calc(1.5 * var(--leading)); }

.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — hero — */
.hero { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6.2vw, 84px);
  line-height: clamp(44.5px, 6.57vw, 89px);
  letter-spacing: -0.02em; margin: 0;
  margin-left: -0.058em;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.display .mid { display: inline-block; margin: 0 0.14em; vertical-align: 0.25em; font-size: 0.6em; }
.display { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0; }
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--half) calc(1.5 * var(--leading));
  margin: var(--leading) 0 0; padding: 0; list-style: none;
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — stats — */
.stats { padding: calc(2.5 * var(--leading)) 0; }
.stats .grid { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
.stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  color: var(--color-accent);
  margin: 0; margin-left: -0.045em;
  text-box: trim-both cap alphabetic; }
.stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; }

/* — imagery split (Beschreibung) — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.split-copy .note + .note { margin-top: calc(1.5 * var(--leading)); }
.split-figure { margin: 0; }
.split-figure img { display: block; width: 100%; aspect-ratio: 951 / 665; }
.map-box { position: relative; width: 100%; aspect-ratio: 951 / 665; background: var(--color-accent-100);
  border: 2px solid var(--color-divider); }
.map-box iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-gate { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: var(--half); padding: var(--leading); }
.map-note { font-size: 13px; line-height: var(--half); max-width: 34ch; margin: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* — Slidegalerie im Beschreibungsteil — */
.slider .track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider .track::-webkit-scrollbar { display: none; }
.slider .track img { scroll-snap-align: start; }
.slider-bar { display: flex; align-items: center; gap: var(--half); margin-top: var(--half); }
.slider-count { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-feature-settings: "tnum" 1; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.slider-dots { display: flex; gap: 8px; margin-left: auto; }
.dot-btn { width: 10px; height: 10px; padding: 0; border: 2px solid var(--color-accent);
  background: transparent; cursor: pointer; }
.dot-btn[aria-current="true"] { background: var(--color-accent); }
.dot-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — Zimmer / feature rows — */
.features { padding: calc(2.5 * var(--leading)) 0; }
.feature { display: grid; grid-template-columns: minmax(56px, 110px) minmax(0, 280px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.5 * var(--leading)) 0; }
.feature + .feature { border-top: 2px solid var(--color-divider); }
.f-num { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--leading); color: var(--color-text);
  font-feature-settings: "tnum" 1; margin: 0; text-box: trim-both cap alphabetic; }
.f-num::before { content: ""; position: absolute; left: -24px; top: calc(0.5cap - 5px);
  width: 10px; height: 10px; background: var(--color-accent); }
@media (max-width: 1280px) { .f-num::before { display: none; } }
.f-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic; }
.f-photo { margin: 0; }
.f-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; }
@media (min-width: 1101px) {
  .feature { grid-template-rows: auto 1fr; }
  .f-photo { grid-column: 2; grid-row: 2; align-self: start; }
  .f-photo img { aspect-ratio: 4 / 3; }
  .f-copy { grid-column: 3; grid-row: 2; align-self: start; max-width: 56ch; }
}
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic; }

/* — Ausstattung: modular grid of icon cells, drawn with rules — */
.amen { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.amen-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(1.5 * var(--leading)) var(--leading); }
.amen-cell { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--half); }
.amen-cell svg { width: 32px; height: 32px; stroke: var(--color-accent); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.amen-name { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0;
  font-size: 20px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.amen-note { display: none; font-size: 14px; line-height: calc(var(--leading) - 4px);
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: 6px 0 0; }
@media (max-width: 980px) { .amen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .amen-grid { grid-template-columns: minmax(0, 1fr); } }

/* — Galerie — */
.gallery { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.gal-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--half); }
.gal-grid figure { margin: 0; }
.gal-grid img { display: block; width: 100%; height: 100%; }
.gal-cap { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: var(--half) 0 0; }
.g-wide { grid-column: span 3; } .g-wide img { aspect-ratio: 3 / 2; }
.g-third { grid-column: span 2; } .g-third img { aspect-ratio: 1 / 1; }
.g-half { grid-column: span 3; } .g-half img { aspect-ratio: 4 / 3; }
.g-full { grid-column: span 6; } .g-full img { aspect-ratio: 21 / 9; }
@media (max-width: 720px) {
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-wide, .g-third, .g-half, .g-full { grid-column: span 2; }
  .g-full img { aspect-ratio: 3 / 2; }
}

/* — Anfrage / Kontaktformular — */
.enquiry { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.enquiry-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: start; }
.enquiry-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic; }
.enquiry-copy { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 40ch; }
.enquiry-contact { font-size: 15.5px; line-height: var(--leading); margin: var(--leading) 0 0; }
.enquiry-contact a { color: var(--color-accent-700); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--leading); }
.form-row.one { grid-template-columns: minmax(0, 1fr); }
form > .field + .form-row, form .form-row + .form-row, form .form-row + .field, form > .field + .field { margin-top: var(--leading); }
.form-row > .field { margin-top: 0; }
form textarea.input { min-height: calc(5 * var(--leading)); resize: vertical; font-family: var(--font-body); }
.form-actions { display: flex; align-items: center; gap: var(--leading); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
.form-note { font-size: 13px; line-height: var(--half);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); max-width: 44ch; }
@media (max-width: 880px) {
  .enquiry-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* — the red poster close — */
.close { background: var(--color-ink); color: #fff; }
.close .wrap { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.close h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: clamp(36px, 4.45vw, 59.4px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
  text-box: trim-both cap alphabetic; }
.close h3 .line { display: block; }
.close .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
.close .btn-ghost { color: #fff; border-color: rgba(255,255,255,.8); }
footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  display: flex; justify-content: space-between; gap: var(--leading); flex-wrap: wrap; }
footer a { color: inherit; }
footer a:hover { color: var(--color-accent-700); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }

@media (max-width: 1100px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
  .f-photo { margin-top: var(--half); max-width: 340px; }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2 * var(--leading)); }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
}


/* --- WordPress-Anpassungen --- */
.hero .row, .close .row { gap: 16px; }
.hero .row .btn { padding-inline: 22px; }
img { display: block; max-width: 100%; object-fit: cover; }
.hero-media img { width: 100%; height: 100%; }
.gal-grid img { width: 100%; height: 100%; }
.wp-page { padding: calc(5 * var(--leading)) 0 calc(3 * var(--leading)); max-width: 900px; margin: 0 auto; }
.wp-page h1 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 5vw, 64px); line-height: 1.05; color: var(--color-ink);
  margin: 0 0 var(--leading); font-variant-numeric: lining-nums; }
.wp-page h2 { font-family: var(--font-heading); font-weight: 700; font-size: 22px;
  line-height: var(--leading); color: var(--color-ink); margin: calc(1.5 * var(--leading)) 0 var(--half);
  padding-top: calc(1.5 * var(--leading)); border-top: 2px solid var(--color-divider); }
.wp-page p, .wp-page li { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 82%, transparent); max-width: 62ch; }
.form-ok { background: var(--color-accent-200); padding: var(--half) var(--leading);
  font-size: 15.5px; line-height: var(--leading); margin: 0 0 var(--leading); }