/*
 * gretyl.net – Markenschicht über Unify v3.2.2 (theme.min.css)
 * Hell, einladend, natürlich bis mystisch. Das Unify-Theme selbst bleibt unverändert.
 */

/* ---------- Schriften (lokal, DSGVO) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../vendor/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/fraunces-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/fraunces-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url(../vendor/fonts/fraunces-latin-400-italic.woff2) format('woff2'); }

/* ---------- Farben ---------- */
:root {
  --g-moss: #3e6b3a;          /* Moosgrün – Primärfarbe */
  --g-moss-rgb: 62, 107, 58;
  --g-moss-dark: #2f532c;
  --g-forest: #1f2e23;        /* Tannendunkel – Überschriften */
  --g-gold: #b9852f;          /* Abendlicht – Akzent */
  --g-gold-rgb: 185, 133, 47;
  --g-paper: #faf7f0;         /* Seitenhintergrund */
  --g-sand: #f1ebdd;          /* Flächen, Footer */
  --g-text: #4a5249;

  --bs-primary: var(--g-moss);
  --bs-primary-rgb: var(--g-moss-rgb);
  --bs-link-color: var(--g-moss);
  --bs-link-hover-color: var(--g-moss-dark);
  --bs-body-bg: var(--g-paper);
  --bs-body-color: var(--g-text);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

body {
  background-color: var(--g-paper);
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-3, .display-4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--g-forest);
  letter-spacing: -.01em;
}

h5, h6, .h5, .h6 {
  color: var(--g-forest);
}

.g-serif {
  font-family: 'Fraunces', Georgia, serif;
}

.g-claim {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.text-cap {
  color: var(--g-gold);
  letter-spacing: .12em;
}

.text-gold {
  color: var(--g-gold) !important;
}

/* ---------- Unify-Primärfarbe auf Moosgrün ---------- */
.btn-primary {
  --bs-btn-bg: var(--g-moss);
  --bs-btn-border-color: var(--g-moss);
  --bs-btn-hover-bg: var(--g-moss-dark);
  --bs-btn-hover-border-color: var(--g-moss-dark);
  --bs-btn-active-bg: var(--g-moss-dark);
  --bs-btn-active-border-color: var(--g-moss-dark);
  --bs-btn-disabled-bg: var(--g-moss);
  --bs-btn-disabled-border-color: var(--g-moss);
  --bs-btn-focus-shadow-rgb: var(--g-moss-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--g-moss);
  --bs-btn-border-color: var(--g-moss);
  --bs-btn-hover-bg: var(--g-moss);
  --bs-btn-hover-border-color: var(--g-moss);
  --bs-btn-active-bg: var(--g-moss);
  --bs-btn-active-border-color: var(--g-moss);
  --bs-btn-focus-shadow-rgb: var(--g-moss-rgb);
}

.btn-ghost-dark {
  color: var(--g-forest);
}

.bg-soft-primary {
  background-color: rgba(var(--g-moss-rgb), .08) !important;
}

.step-icon-soft-primary {
  color: var(--g-moss);
  background-color: rgba(var(--g-moss-rgb), .09);
}

.bg-sand {
  background-color: var(--g-sand) !important;
}

.bg-paper {
  background-color: var(--g-paper) !important;
}

.list-checked-primary .list-checked-item::before,
.list-checked-soft-bg-primary .list-checked-item::before {
  background-image: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='18' height='18' rx='9' fill='%233e6b3a' fill-opacity='0.1'/%3e%3cpath d='M12.0603 5.78792C12.2511 5.56349 12.5876 5.5362 12.8121 5.72697C13.0365 5.91774 13.0638 6.25432 12.873 6.47875L8.3397 11.8121C8.14594 12.04 7.80261 12.064 7.57901 11.8653L5.17901 9.73195C4.95886 9.53626 4.93903 9.19915 5.13472 8.979C5.33041 8.75885 5.66751 8.73902 5.88766 8.93471L7.88011 10.7058L12.0603 5.78792Z' fill='%233e6b3a'/%3e%3c/svg%3e");
}

.link-pointer::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233e6b3a' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z'/%3e%3c/svg%3e");
}

/* ---------- Header ---------- */
.navbar-brand-logo {
  min-width: 0;
  max-width: none;
  width: auto;
  height: 2.25rem;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--g-forest);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--g-moss);
}

.navbar.navbar-scrolled.navbar-light {
  background-color: rgba(250, 247, 240, .96);
  backdrop-filter: blur(6px);
}

@media (max-width: 1199.98px) {
  .navbar-light .navbar-absolute-top-scroller {
    background-color: #fff;
    border-radius: .75rem;
    padding: .5rem 1rem;
    margin-top: .5rem;
    box-shadow: 0 .375rem 1.5rem rgba(31, 46, 35, .08);
  }
}

/* ---------- Bildflächen ---------- */
.g-img-hero {
  height: 55vh;
  min-height: 18rem;
  max-height: 40rem;
  border-radius: 1.5rem;
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  .g-img-hero { height: 70vh; }
}

.g-img-hero-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(31, 46, 35, 0) 45%, rgba(31, 46, 35, .45) 100%);
}

.card-img-overlay .g-overlay-box {
  background-color: rgba(250, 247, 240, .94);
}

.g-rounded-xl {
  border-radius: 1.5rem !important;
}

/* ---------- Gretyl-Spur (Entwurf: Punkte/Striche als dezente Signatur) ---------- */
.g-spur {
  display: inline-block;
  width: 7.5rem;
  height: .5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3e%3cg fill='%23b9852f'%3e%3ccircle cx='4' cy='4' r='2.5'/%3e%3ccircle cx='16' cy='4' r='2.5'/%3e%3crect x='26' y='2.5' width='14' height='3' rx='1.5'/%3e%3ccircle cx='50' cy='4' r='2.5'/%3e%3crect x='60' y='2.5' width='14' height='3' rx='1.5'/%3e%3crect x='80' y='2.5' width='14' height='3' rx='1.5'/%3e%3ccircle cx='104' cy='4' r='2.5'/%3e%3ccircle cx='116' cy='4' r='2.5' fill-opacity='.4'/%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ---------- Icons ---------- */
.g-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: rgba(var(--g-moss-rgb), .09);
  color: var(--g-moss);
  font-size: 1.5rem;
}

.g-icon-stone {
  width: 1.6rem;
  height: 1.6rem;
}

.g-icon-gold {
  background-color: rgba(var(--g-gold-rgb), .12);
  color: var(--g-gold);
}

/* ---------- Gretyl-Karte (Kartenmuster) ---------- */
.g-card-deck {
  position: relative;
  aspect-ratio: 5 / 8;
  max-width: 17rem;
  margin-inline: auto;
  padding: 1.75rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #fffdf8 0%, var(--g-sand) 100%);
  border: 1px solid rgba(var(--g-gold-rgb), .45);
  box-shadow: 0 1.5rem 3rem rgba(31, 46, 35, .12);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.g-card-deck::before {
  content: "";
  position: absolute;
  inset: .5rem;
  border: 1px solid rgba(var(--g-gold-rgb), .3);
  border-radius: .65rem;
  pointer-events: none;
}

.g-card-deck-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--g-forest);
  font-size: 1.1rem;
}

.g-card-deck-quote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--g-forest);
  font-size: 1.05rem;
}

.g-card-deck-meta {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-gold);
}

.g-card-deck-tilt {
  transform: rotate(-4deg);
}

.g-card-deck-tilt-r {
  transform: rotate(5deg);
}

/* ---------- Gretyl-Steine (gezeichnet, Entwurf) ---------- */
.g-stone {
  aspect-ratio: 5 / 4;
  margin: 0 auto;
  max-width: 14rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  border-radius: 58% 42% 50% 50% / 55% 48% 52% 45%;
  background: radial-gradient(120% 90% at 30% 25%, #b7b2a6 0%, #8f8a7e 55%, #6f6a60 100%);
  box-shadow: inset -.75rem -1rem 1.5rem rgba(0, 0, 0, .18), 0 1rem 1.5rem rgba(31, 46, 35, .15);
  text-align: center;
}

.g-stone-2 { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; background: radial-gradient(120% 90% at 35% 25%, #a9a79d 0%, #7f7c72 60%, #625f57 100%); }
.g-stone-3 { border-radius: 50% 50% 60% 40% / 45% 60% 40% 55%; background: radial-gradient(120% 90% at 30% 30%, #c2bcae 0%, #9a9384 55%, #787163 100%); }
.g-stone-4 { border-radius: 62% 38% 55% 45% / 50% 52% 48% 50%; background: radial-gradient(120% 90% at 40% 25%, #a4a39a 0%, #7a786f 55%, #5c5a53 100%); }

.g-stone-word {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: .14em;
  font-size: .95rem;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.g-stone .g-spur {
  width: 4.5rem;
  filter: brightness(1.9) saturate(.6);
}

/* ---------- Emotionale Topografie ---------- */
.g-topo svg {
  width: 100%;
  height: auto;
  display: block;
}

.g-topo text {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  fill: var(--g-forest);
}

/* ---------- Sprungziele nicht unter dem fixierten Header ---------- */
main [id] {
  scroll-margin-top: 6rem;
}

/* ---------- Footer ---------- */
.g-footer {
  background-color: var(--g-sand);
}

.g-footer .link {
  color: var(--g-text);
}

.g-footer .link:hover {
  color: var(--g-moss);
}

.g-footer-logo {
  height: 2.5rem;
  width: auto;
}
