/* =============================
   Tannenkuss111 – modern, warm, logo-inspiriert
   - Warmbeiger Hintergrund + dezentes Papierkorn
   - Dünne Gold-Top-Border
   - 20 Tannen (größer & etwas dunkler) – jetzt einen Tick heller
   - Hero → Tipps Abstand kompakt
   - Maps-Buttons heller (zum Logo-Hintergrund passend)
============================== */

:root{
  --ink:#23221d; --muted:#5e5b51;
  --cream:#f1ebdc;              /* Grundfläche (warm) */
  --paper:#fff7ea;              /* Cards / Kontrast */
  --line:#deceb7;               /* feine Linien */

  --gold:#c8a14b; --gold-700:#ab8531;
  --green:#2e7d5f; --green-700:#23644c;

  --ring: color-mix(in oklch, var(--green) 62%, white);
  --shadow-sm:0 6px 18px rgba(0,0,0,.06);
  --shadow-md:0 18px 40px rgba(0,0,0,.10);
  --radius-lg:18px;

  /* Tanne als Data-URI (leicht heller gemacht: opacity im SVG reduziert) */
  --tree-svg: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path d='M32 4l15 19h-9l11 13h-9l9 11H15l9-11h-9l11-13h-9L32 4z' fill='%232e7d5f' opacity='0.30'/>\
<rect x='28' y='46' width='8' height='14' rx='1.5' fill='%232e7d5f' opacity='0.30'/>\
</svg>");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  line-height:1.6;

  /* Warm & ruhig */
  background:
    radial-gradient(1100px 580px at 12% -8%, #ffffffb3, transparent 55%),
    radial-gradient(900px 520px at 110% 10%, #ffffff26 0, transparent 60%),
    linear-gradient(180deg, #f6f0e2, var(--cream));
}

/* Dünne Gold-Top-Border */
body::after{
  content:""; position:fixed; left:0; top:0; right:0; height:3px; z-index:9999;
  background: linear-gradient(90deg, color-mix(in oklch, var(--gold) 92%, #fff), var(--gold-700));
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  pointer-events:none;
}

/* 20 Tannen + Paper Grain – fixiert hinter allem */
html::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;

  background-image:
    var(--tree-svg), var(--tree-svg), var(--tree-svg), var(--tree-svg),
    var(--tree-svg), var(--tree-svg), var(--tree-svg), var(--tree-svg),
    var(--tree-svg), var(--tree-svg), var(--tree-svg), var(--tree-svg),
    var(--tree-svg), var(--tree-svg), var(--tree-svg), var(--tree-svg),
    var(--tree-svg), var(--tree-svg), var(--tree-svg), var(--tree-svg),
    /* feines Papierkorn */
    repeating-linear-gradient(90deg, #00000010 0 1px, #0000 1px 6px),
    repeating-linear-gradient(0deg,  #00000008 0 1px, #0000 1px 5px);

  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat, repeat;

  /* Größen (doppelt, wie gewünscht) */
  background-size:
    60px, 52px, 44px, 68px,
    56px, 40px, 52px, 36px,
    48px, 56px, 44px, 52px,
    46px, 40px, 58px, 34px,
    50px, 42px, 38px, 54px,
    auto,  auto;

  background-position:
    7% 10%, 22% 24%, 38% 16%, 71% 13%,
    89% 22%, 12% 56%, 31% 64%, 55% 50%,
    79% 61%, 9% 82%, 47% 84%, 92% 74%,
    16% 34%, 64% 28%, 86% 46%, 42% 38%,
    28% 78%, 68% 70%, 58% 88%, 82% 86%,
    0 0, 0 0;

  /* Sichtbarkeit einen Tick heller als zuvor */
  opacity:.14; /* ggf. mit .12/.16 feinjustieren */
  filter: saturate(0.95);
}

/* Container & Grundlayout */
.container{width:min(1100px,92%); margin-inline:auto}
.skip-link{position:absolute; inset:auto auto auto -9999px; background:#fff; padding:.6rem 1rem; border-radius:.75rem; box-shadow:var(--shadow-sm)}
.skip-link:focus{left:14px; top:14px; outline:3px solid var(--ring); z-index:1000}

.topbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.05) blur(6px)}
.brand-dots{height:4px; width:100%;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--green) 46%, white), transparent 30%),
    linear-gradient(90deg, color-mix(in oklch, var(--gold) 60%, white), transparent 40%);
  mask: radial-gradient(7px 7px at 10px 50%, #000 98%, transparent 100%) repeat-x left center / 24px 10px;
  opacity:.22;
}

/* HERO – kompakter Abstand */
.hero{position:relative; padding-top: clamp(28px, 6vw, 70px); padding-bottom: clamp(12px, 2.4vw, 18px)}
.hero-inner{display:flex; flex-direction:column; align-items:center; gap:10px}
.logo{display:block; width:min(540px,86vw); max-height:250px; object-fit:contain; filter: drop-shadow(0 12px 34px rgba(0,0,0,.10))}

/* Claim in leichter Schreibschrift (systemnah, ohne externe Fonts) */
.hero-sub{
  margin:6px 0 6px;
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  color:var(--muted);
  letter-spacing:.2px;
  font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", "Apple Chancery", cursive;
  font-weight: 500;
}

/* CTA Buttons */
.cta-buttons{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:8px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.52rem .68rem; border-radius:999px; border:2px solid transparent;
  text-decoration:none; font-weight:700; letter-spacing:.2px; box-shadow:var(--shadow-sm);
  transition: transform .14s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-size:.82rem;
}

/* Airbnb (Gold) */
.btn-primary{color:#1d1a12; border-color:var(--gold-700);
  background: linear-gradient(135deg, var(--gold), color-mix(in oklch, var(--gold) 82%, black));
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);
  background: linear-gradient(135deg, color-mix(in oklch, var(--gold) 88%, black), var(--gold-700));
}

/* Maps (Apple/Google) – HELLER, am Logo-Hintergrund (paper/cream) orientiert */
.btn-map{
  color: var(--green-700);
  background: color-mix(in oklch, var(--green) 6%, var(--paper));
  border-color: color-mix(in oklch, var(--green) 28%, var(--paper));
}
.btn-map:hover{
  transform:translateY(-1px); box-shadow:var(--shadow-md);
  background: color-mix(in oklch, var(--green) 10%, var(--paper));
  border-color: color-mix(in oklch, var(--green) 40%, var(--paper));
}
.btn:focus-visible{outline:3px solid var(--ring)}
.btn:active{transform:translateY(0)}

/* Sektionen */
.section-pad{padding-top: clamp(8px, 1.5vw, 12px); padding-bottom: 48px}
.section-title{margin:0 0 .6rem; font-size:clamp(1.35rem, 2.6vw, 2.05rem); font-weight:850; letter-spacing:.2px; color: color-mix(in oklch, var(--ink) 88%, black)}
.section-title-center{text-align:center}

/* Cards */
.tip-groups{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.tip-card{position:relative; background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease}
.tip-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color: color-mix(in oklch, var(--gold) 28%, var(--line))}
.tip-card h3{margin:0 0 8px; font-size:1.03rem; font-weight:800; letter-spacing:.2px; color: color-mix(in oklch, var(--ink) 82%, black); position:relative; padding-bottom:8px}
.tip-card h3::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: linear-gradient(90deg, #0000, var(--line), #0000)}

/* Links */
.linklist{list-style:none; padding:0; margin:0; display:grid; gap:.48rem}
.linklist li{line-height:1.45}
.linklist a{color: var(--green); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--green) 35%, transparent); padding-bottom: 1px; transition: color .18s ease, border-color .18s ease, background .18s ease; word-break: break-word; overflow-wrap: anywhere}
.linklist a:hover{color: var(--green-700); border-bottom-color: var(--green-700)}
.meta{color:var(--muted); font-size:.92em}

/* Adresse */
.address-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px}
.address-title{font-size:.98rem; font-weight:820; letter-spacing:.3px; color:var(--muted)}
.address-lines{font-size:.92rem; color:var(--muted)}
.wa{font-size:.92rem}
.wa-link{color:var(--green); font-weight:700; text-decoration:none; border-bottom:1px solid color-mix(in oklch, var(--green) 40%, transparent)}
.wa-link:hover{color:var(--green-700); border-bottom-color: var(--green-700)}

/* Footer */
.site-footer{border-top:1px solid var(--line); background: var(--paper)}
.footer-inner{display:flex; flex-direction:column; gap:8px; align-items:center; padding:22px 0}
.site-footer a{color: var(--gold); font-weight:600; text-decoration:none; border-bottom:1px solid transparent}
.site-footer a:hover{text-decoration:none; border-bottom-color: color-mix(in oklch, var(--gold) 56%, transparent)}
.site-footer nav{display:flex; gap:.6rem; align-items:center}

/* Reveal */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .6s ease}
.reveal.revealed{opacity:1; transform:none}

/* Small phones */
@media (max-width:380px){
  .btn{font-size:.8rem; padding:.48rem .62rem}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important; transform:none !important}
  .btn, .tip-card, .logo{transition:none !important}
}
``