/* ============================================================
   Aminess Laurel Khalani Hotel — Mediterranean Luxury Design
   Makarska · Dalmacija · 5★ Hotel
   ============================================================ */

/* 0. SELF-HOSTED FONTS (DSGVO/GDPR-konform)
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. ROOT — Mediterranean Palette
   ------------------------------------------------------------ */
:root {
  --navy: #0f1d2f;
  --navy2: #162a42;
  --sand: #c4a265;
  --sand-light: rgba(196, 162, 101, .08);
  --teal: #1f7a8a;
  --teal-light: rgba(31, 122, 138, .07);

  --bg: #faf8f4;
  --surface: #ffffff;
  --surface2: #f1efe9;
  --text: #1a1e28;
  --muted: #3d4452;
  --line: rgba(15, 29, 47, .07);

  --shadow: 0 16px 48px rgba(15, 29, 47, .05), 0 4px 14px rgba(15, 29, 47, .03);
  --shadow-hover: 0 28px 64px rgba(15, 29, 47, .09), 0 10px 22px rgba(15, 29, 47, .05);
  --shadow-sand: 0 16px 40px rgba(196, 162, 101, .10);

  --radius: 20px;
  --radius-sm: 12px;
  --max: 1140px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
html, body { width: 100%; max-width: 100%; overflow-x: hidden !important }

/* 2. BODY — warm cream + subtle grain
   ------------------------------------------------------------ */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text); background: var(--bg);
  line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* 3. TYPOGRAPHY
   ------------------------------------------------------------ */
a { color: inherit }
img { max-width: 100%; height: auto; display: block }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.03em; line-height: 1.1 }
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin: 0 0 16px }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin: 0 0 14px }
h3 { font-size: clamp(1.05rem, 1.4vw, 1.2rem); margin: 0 0 8px }
p { margin: 0 0 14px }
.lead { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--muted); line-height: 1.7; max-width: 620px }

/* 4. LAYOUT
   ------------------------------------------------------------ */
.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; position: relative; z-index: 1 }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center }
.text-center { text-align: center }

/* Checkmark list */
.list { margin: 14px 0 0; padding: 0; list-style: none; color: var(--muted); line-height: 1.8 }
.list li { position: relative; padding: 10px 0 10px 34px }
.list li::before {
  content: ''; position: absolute; left: 0; top: 14px; width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-light), rgba(196, 162, 101, .06));
  border: 1px solid rgba(31, 122, 138, .15);
}
.list li::after {
  content: ''; position: absolute; left: 6px; top: 20px; width: 8px; height: 5px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.list li + li { border-top: 1px solid var(--line) }

/* 5. SKIP LINK
   ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: -999px; top: 12px;
  background: var(--navy); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); font-weight: 700; z-index: 99999; text-decoration: none;
}
.skip-link:focus { left: 20px }

/* 6. HEADER — frosted glass
   ------------------------------------------------------------ */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 244, .78);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: transform .35s var(--ease);
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px }
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none }
.brand img { width: 36px; height: 36px }
.brand .name { font-weight: 900; letter-spacing: -.01em; color: var(--navy); font-size: .9rem }
.brand .tag { display: block; font-size: .72rem; color: #96793a; letter-spacing: .06em; text-transform: uppercase; font-weight: 700 }
nav { display: flex; align-items: center; gap: 8px }
.nav-links { display: flex; gap: 2px; align-items: center }
.nav-links a {
  text-decoration: none; color: var(--muted); padding: 8px 13px;
  border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(15, 29, 47, .04) }
.nav-cta {
  text-decoration: none; padding: 8px 18px; border-radius: 999px;
  font-weight: 700; font-size: .84rem;
  color: var(--sand); background: var(--sand-light);
  border: 1px solid rgba(196, 162, 101, .2);
  transition: all .25s var(--ease);
}
.nav-cta:hover { background: var(--sand); color: #fff; box-shadow: var(--shadow-sand); transform: translateY(-1px) }
.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--radius-sm); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--text); margin: 4px auto }
.mobile-menu {
  display: none; border-top: 1px solid var(--line); padding: 8px 0 14px;
  background: rgba(250, 248, 244, .96); backdrop-filter: blur(12px);
}
.mobile-menu a {
  display: block; text-decoration: none; padding: 11px 14px;
  color: var(--muted); border-radius: var(--radius-sm); font-weight: 500;
}
.mobile-menu a:hover { background: rgba(15, 29, 47, .04); color: var(--text) }
.mobile-menu .nav-cta { display: inline-block; margin: 8px 14px 0 }

/* 7. HERO — cinematic fullwidth image overlay
   ------------------------------------------------------------ */
.hero-img {
  position: relative; overflow: hidden;
  min-height: min(88vh, 680px); display: flex; align-items: center;
}
.hero-img-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; filter: saturate(.88) brightness(.9);
}
.hero-img-dark {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(15, 29, 47, .7) 0%, rgba(15, 29, 47, .15) 45%, rgba(15, 29, 47, .6) 100%),
    linear-gradient(135deg, rgba(15, 29, 47, .35) 0%, transparent 50%);
}

.hero-img-inner {
  position: relative; z-index: 3;
  padding: 120px 0 80px; max-width: var(--max); margin: 0 auto; width: 100%; padding-left: 20px; padding-right: 20px;
}
.hero-img-inner h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 900; line-height: 1.02;
  color: #fff; margin: 0 0 20px; letter-spacing: -.04em;
  text-shadow: 0 2px 40px rgba(0,0,0,.3);
}
.hero-kicker {
  font-size: .78rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sand); margin: 0 0 14px;
}
.hero-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem); color: rgba(255,255,255,.82);
  line-height: 1.7; margin: 0 0 28px; max-width: 540px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.hero-badges span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  color: rgba(255,255,255,.88); background: rgba(255,255,255, .06);
  backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.1);
}

/* Hero — inner page variant (no full image) */
.hero { padding: 56px 0 36px; position: relative }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center }
.kicker {
  display: inline-flex; gap: 10px; align-items: center;
  color: #96793a; font-weight: 700; font-size: .84rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.kicker .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--sand);
  box-shadow: 0 0 0 4px rgba(196, 162, 101, .15), 0 0 20px rgba(196, 162, 101, .2);
}
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.badge {
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 999px;
  color: var(--muted); font-size: .84rem; font-weight: 600;
}
.hero-media img {
  border-radius: var(--radius); border: 1px solid var(--line);
  max-height: 420px; object-fit: cover; width: 100%; box-shadow: var(--shadow);
}

/* Hero — contact variant */
.hero-kontakt { position: relative; overflow: hidden; padding: 0 }
.hero-kontakt .hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 50%, #0a1420 100%);
}
.hero-kontakt .hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 500px 400px at 20% 40%, rgba(31, 122, 138, .06), transparent),
    radial-gradient(ellipse 400px 350px at 75% 60%, rgba(196, 162, 101, .04), transparent);
}
.hero-kontakt .hero-inner { position: relative; z-index: 2; padding: 90px 0 60px }
.hero-kontakt h1 {
  font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; line-height: 1.08;
  color: #fff; margin: 0 0 16px; letter-spacing: -.03em;
}

/* 8. BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .9rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow);
  transition: all .3s var(--ease);
}
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-hover) }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s }
.btn.primary {
  border: none; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 50%, var(--teal) 100%);
  background-size: 200% auto;
  box-shadow: 0 14px 36px rgba(15, 29, 47, .16), 0 4px 10px rgba(31, 122, 138, .08);
}
.btn.primary:hover {
  background-position: right center;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 22px 50px rgba(15, 29, 47, .2), 0 8px 18px rgba(31, 122, 138, .12);
}
.btn.secondary {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85); backdrop-filter: blur(8px);
}
.btn.secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff }
.btn.sand {
  border: none; color: #fff; background: var(--sand);
  box-shadow: var(--shadow-sand);
}
.btn.sand:hover { background: #b8944f; transform: translateY(-3px) }

/* 9. SECTIONS
   ------------------------------------------------------------ */
.section { padding: 72px 0; position: relative; z-index: 10; background: var(--bg) }
.section h2 { margin: 0 0 12px }
.section p { margin: 0 0 12px; color: var(--muted) }

/* Dark section */
.section--dark {
  background: var(--navy); color: rgba(255,255,255,.88);
  position: relative; overflow: hidden;
}
.section--dark::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 85% 20%, rgba(31, 122, 138, .04), transparent),
    radial-gradient(ellipse 500px 400px at 10% 80%, rgba(196, 162, 101, .03), transparent);
  pointer-events: none;
}
.section--dark h2, .section--dark h3 { color: #fff }
.section--dark p, .section--dark .lead { color: rgba(255,255,255,.6) }
.section--dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08) }
.section--dark .card h3 { color: #fff }
.section--dark .card p { color: rgba(255,255,255,.55) }

/* Gradient text for dark h2 */
.section--dark h2 {
  background: linear-gradient(135deg, #fff 0%, rgba(196, 162, 101, .7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section--dark h2::after {
  content: ''; display: block; width: 50px; height: 2px; margin-top: 12px;
  background: linear-gradient(90deg, var(--sand), rgba(196, 162, 101, .3));
  border-radius: 999px;
}

/* Curved section top */
.section--curve { border-radius: 28px 28px 0 0; margin-top: -14px; padding-top: 80px; box-shadow: 0 -8px 40px rgba(15, 29, 47, .04) }
.section--dark.section--curve { box-shadow: 0 -12px 50px rgba(15, 29, 47, .3) }


/* 11. CARDS — 3D perspective tilt
   ------------------------------------------------------------ */
.card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 29, 47, .06); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .4s var(--ease), border-color .3s;
}
.card.pad { padding: 26px }
.card:hover { box-shadow: var(--shadow-hover) }

/* Room / Service cards */
.room-card { overflow: hidden; display: grid; grid-template-rows: auto 1fr }
.room-card .room-photo {
  aspect-ratio: 4/3; overflow: hidden; position: relative;
}
.room-card .room-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), filter .4s;
  filter: saturate(.92) brightness(.96);
}
.room-card:hover .room-photo img { transform: scale(1.05); filter: saturate(1) brightness(1) }
.room-card .room-info { padding: 22px 24px 26px }
.room-card .room-type {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sand); margin-bottom: 6px;
}
.room-card h3 { margin: 0 0 8px; font-size: 1.1rem }
.room-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6 }
.room-card .room-price {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-weight: 800; color: var(--navy); font-size: 1.05rem;
}
.room-card .room-price small { font-weight: 500; color: var(--muted); font-size: .8rem }

/* Amenity icon cards */
.amenity { text-align: center; padding: 28px 18px }
.amenity-icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--teal-light), var(--sand-light));
  color: var(--teal);
}
.amenity h3 { font-size: .95rem; margin: 0 0 6px }
.amenity p { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.5 }

/* 12. PROCESS / STEPS
   ------------------------------------------------------------ */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; position: relative }
.steps-grid::before {
  content: ''; position: absolute; top: 36px; left: 10%; right: 10%;
  height: 2px; background: linear-gradient(90deg, transparent, var(--sand), transparent); opacity: .2;
}
.step { text-align: center; padding: 24px 16px; position: relative; z-index: 1 }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--navy); color: var(--sand); font-weight: 900; font-size: 1.1rem;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(15, 29, 47, .15), 0 0 0 4px rgba(196, 162, 101, .08);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.step:hover .step-num { transform: translateY(-6px) scale(1.08); box-shadow: 0 16px 36px rgba(15, 29, 47, .2), 0 0 0 6px rgba(196, 162, 101, .14) }
.step h3 { font-size: .98rem; margin-bottom: 6px }
.step p { font-size: .9rem; color: var(--muted); line-height: 1.55 }

/* 13. CALLOUT / CTA
   ------------------------------------------------------------ */
.callout {
  padding: 32px;
  background: linear-gradient(135deg, rgba(15, 29, 47, .03), rgba(196, 162, 101, .04));
  border: 1px solid rgba(196, 162, 101, .12); border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.callout::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sand), transparent);
}
.cta-dark {
  background: var(--navy); border-radius: var(--radius);
  padding: 56px 40px; position: relative; overflow: hidden;
  border: 1px solid rgba(196, 162, 101, .08);
}
.cta-dark::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 400px 300px at 80% 30%, rgba(31, 122, 138, .05), transparent),
    radial-gradient(ellipse 300px 250px at 15% 70%, rgba(196, 162, 101, .04), transparent);
  pointer-events: none;
}
.cta-dark::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 162, 101, .3), transparent);
}
.cta-dark * { position: relative; z-index: 1 }
.cta-dark h2 { color: #fff; margin-bottom: 12px }
.cta-dark p { color: rgba(255,255,255,.6) }

/* 14. FAQ
   ------------------------------------------------------------ */
.faq-list { margin-top: 20px }
details {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; background: rgba(255,255,255,.92);
  transition: border-color .25s, box-shadow .25s;
}
details:hover { border-color: rgba(196, 162, 101, .15); box-shadow: 0 8px 24px rgba(15, 29, 47, .04) }
details[open] { border-color: rgba(196, 162, 101, .2); box-shadow: 0 12px 36px rgba(15, 29, 47, .06); background: rgba(255,255,255,.95) }
details summary {
  padding: 16px 22px; font-weight: 700; cursor: pointer; list-style: none;
  font-size: .96rem; display: flex; align-items: center; gap: 12px; transition: color .2s;
}
details summary::-webkit-details-marker { display: none }
details summary::before {
  content: ''; display: inline-block; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand);
  transform: rotate(-45deg); transition: transform .25s var(--ease);
}
details[open] summary::before { transform: rotate(45deg) }
details[open] summary { color: var(--teal) }
details .faq-body { padding: 0 22px 18px 42px; color: var(--muted); line-height: 1.65 }
details p { padding: 0 22px 18px 42px; color: var(--muted); line-height: 1.65 }

/* 15. FORMS
   ------------------------------------------------------------ */
.form { display: grid; gap: 14px; margin-top: 16px }
.form label { font-weight: 700; font-size: .9rem; color: var(--text); margin-bottom: 4px; display: block }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid rgba(15, 29, 47, .1); background: rgba(255,255,255,.6);
  color: var(--text); font-size: .95rem; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  font-family: inherit;
}
.form textarea { min-height: 140px; resize: vertical }
.form input:focus, .form select:focus, .form textarea:focus {
  background: #fff; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 122, 138, .1);
}

/* 16. GALLERY — simple grid
   ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px }
.gallery img {
  border-radius: var(--radius-sm); width: 100%; aspect-ratio: 4/3;
  object-fit: cover; cursor: pointer;
  transition: transform .4s var(--ease), filter .3s;
  filter: saturate(.9);
}
.gallery img:hover { transform: scale(1.03); filter: saturate(1) }

/* 17. STAR RATING display
   ------------------------------------------------------------ */
.stars { display: inline-flex; gap: 3px; color: var(--sand) }
.stars svg { width: 18px; height: 18px; fill: currentColor }

/* 18. FOOTER
   ------------------------------------------------------------ */
footer {
  background: var(--navy); color: rgba(255,255,255,.65);
  padding: 56px 0 36px; position: relative; z-index: 10; overflow: hidden;
}
footer > .container { position: relative; z-index: 2 }
footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 162, 101, .3), transparent); z-index: 3;
}

/* Floating wave accents */
.footer-floats { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.footer-floats span {
  position: absolute; font-family: Georgia, 'Times New Roman', serif;
  color: rgba(31, 122, 138, .03);
}

.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px }
.footer-grid strong { color: rgba(255,255,255,.9); font-size: .88rem; letter-spacing: .03em }
.footer-grid a { text-decoration: none; color: rgba(255,255,255,.6); transition: color .2s }
.footer-grid a:hover { color: var(--sand) }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); font-size: .84rem;
}

/* Social links in footer */
.social-links { display: flex; gap: 10px; margin-top: 6px }
.social-links a {
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); transition: all .2s var(--ease);
}
.social-links a:hover { background: rgba(196, 162, 101, .15); border-color: rgba(196, 162, 101, .3); color: var(--sand) }
.social-links svg { width: 16px; height: 16px; fill: currentColor }

/* 19. BREADCRUMB
   ------------------------------------------------------------ */
.breadcrumb { padding: 14px 0; font-size: .88rem; color: var(--muted) }
.breadcrumb a { color: var(--teal); text-decoration: none; font-weight: 500 }
.breadcrumb a:hover { text-decoration: underline }

/* 20. FEATURE HIGHLIGHT CARDS
   ------------------------------------------------------------ */
.feature-card {
  display: grid; grid-template-columns: 60px 1fr; gap: 18px;
  padding: 24px; align-items: start;
}
.feature-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--teal-light), var(--sand-light));
  display: flex; align-items: center; justify-content: center;
  color: var(--teal); flex-shrink: 0;
}
.feature-icon svg { width: 26px; height: 26px }
.feature-card h3 { font-size: 1rem; margin: 0 0 4px; font-weight: 700 }
.feature-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55 }

/* 21. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr }
  .grid-3 { grid-template-columns: 1fr }
  .grid-4 { grid-template-columns: 1fr 1fr }
  .split { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr 1fr }
  .nav-links { display: none } .burger { display: inline-block }
  .mobile-menu { display: block } .mobile-menu[hidden] { display: none }
  .steps-grid { grid-template-columns: 1fr 1fr !important }
  .steps-grid::before { display: none }
  .section { padding: 52px 0 }
  .section--curve { border-radius: 22px 22px 0 0; margin-top: -10px; padding-top: 64px }
  .gallery { grid-template-columns: 1fr 1fr }
}
@media (max-width: 768px) {
  .site-header > .container.header-row .nav-cta { display: none !important }
  .header-row { position: relative }
  .brand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; gap: 8px }
  .brand img { justify-self: start } .brand > div { text-align: center; justify-self: center }
  .brand .name, .brand .tag { display: block; line-height: 1.2 }
  .hero-img { min-height: min(75vh, 500px) }
  .hero-img-inner { padding: 80px 20px 52px }
  .hero-img-inner h1 { font-size: clamp(2rem, 8vw, 3rem) }
  .section { padding: 44px 0 }
  .card.pad { padding: 22px }
  .footer-grid { grid-template-columns: 1fr }
  .cta-dark { padding: 36px 24px }
  .grid-4 { grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px) {
  .steps-grid { grid-template-columns: 1fr !important }
  .grid-2, .grid-4 { grid-template-columns: 1fr }
  .gallery { grid-template-columns: 1fr }
  .hero-kontakt .hero-inner { padding: 64px 0 44px }
}

/* 22. OVERFLOW SAFETY
   ------------------------------------------------------------ */
img, video, canvas { max-width: 100%; height: auto }
header, .hero, .hero-img, .section, footer { overflow-x: hidden }
.card p, .section p, .lead { overflow-wrap: break-word; word-wrap: break-word }

/* 23. PRINT
   ------------------------------------------------------------ */
@media print {
  body::before, body::after, .skip-link, header, .burger, .nav-cta, .footer-floats { display: none !important }
  .section, .card { break-inside: avoid }
  * { box-shadow: none !important; text-shadow: none !important }
}

/* Section dividers */
.section + .section:not(.section--dark):not(.section--curve) { border-top: 1px solid var(--line) }
.section--dark + .section { padding-top: 80px }