/* Schriften liegen lokal in fonts/ - keine Verbindung zu Google */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-italic-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:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-italic-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;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-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:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-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;
}
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/raleway-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:'Raleway';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/raleway-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;
}

:root{
    --ink:#0e1620;
    --ink-2:#16202c;
    --ink-3:#1d2937;
    --brass:#c19a4b;
    --brass-hi:#e3c68a;
    --paper:#f2f1ed;
    --paper-2:#e8e6df;
    --text:#1b2330;
    --muted:#5e6673;
    --muted-dark:#9aa3b0;
    --line:#cfcbc1;
    --line-dark:#2c3846;
    --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    --sans:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:var(--sans);
    font-weight:400;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:1060px;margin:0 auto;padding-inline:20px}
  .narrow{max-width:680px}
  .eyebrow{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    font-weight:600;color:var(--brass);margin:0 0 18px;
  }
  h2{
    font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,40px);
    line-height:1.15;margin:0 0 18px;text-wrap:balance;letter-spacing:.01em;
  }
  h3{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.04em;margin:0 0 8px}
  p{margin:0 0 16px;max-width:64ch}
  section{padding-block:clamp(56px,8vw,96px)}

  /* ---------- Sticky Leiste ---------- */
  .bar{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
    background:rgba(14,22,32,.94);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-dark);color:#fff;
  }
  .bar-in{
    max-width:1060px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  }
  .bar-name{font-family:var(--serif);font-size:20px;letter-spacing:.06em}
  .bar-price{
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--brass-hi);margin-right:auto;
  }
  .btn{
    display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
    padding:12px 22px;border:1px solid var(--brass);color:#0e1620;background:var(--brass);
    transition:background .2s ease,color .2s ease,border-color .2s ease;
  }
  .btn:hover{background:var(--brass-hi);border-color:var(--brass-hi)}
  .btn-ghost{background:transparent;color:var(--brass-hi);border-color:rgba(193,154,75,.55)}
  .btn-ghost:hover{background:rgba(193,154,75,.12);color:var(--brass-hi);border-color:var(--brass)}
  .btn-sm{padding:9px 16px;letter-spacing:.12em}
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
    outline:2px solid var(--brass);outline-offset:3px;
  }

  /* ---------- Kopf ---------- */
  .hero{
    position:relative;background:var(--ink);color:#fff;overflow:hidden;
    padding-block:clamp(72px,11vw,132px);
  }
  .hero-bg{
    position:absolute;inset:0;background-image:url("../images/villa-nacht.webp");
    background-size:cover;background-position:center 58%;
  }
  .hero-veil{
    position:absolute;inset:0;
    background:
      linear-gradient(90deg,rgba(14,22,32,.9) 0%,rgba(14,22,32,.72) 42%,rgba(14,22,32,.5) 100%),
      linear-gradient(180deg,rgba(14,22,32,.38) 0%,rgba(14,22,32,.28) 38%,rgba(14,22,32,.78) 100%);
  }
  @media(max-width:700px){
    .hero-bg{background-position:center 52%}
    .hero-veil{
      background:
        linear-gradient(90deg,rgba(14,22,32,.84) 0%,rgba(14,22,32,.7) 100%),
        linear-gradient(180deg,rgba(14,22,32,.42) 0%,rgba(14,22,32,.34) 35%,rgba(14,22,32,.8) 100%);
    }
  }
  .hero-in{position:relative}
  .hero .eyebrow{color:var(--brass-hi);margin-bottom:22px}
  .hero h1{
    font-family:var(--serif);font-weight:500;
    font-size:clamp(46px,10vw,104px);line-height:.95;margin:0 0 6px;
    letter-spacing:.01em;
  }
  .hero h1 .tld{color:var(--brass)}
  .hero-claim{
    font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,26px);
    color:#e9e5dc;margin:0 0 28px;
  }
  .hero-lead{
    font-size:17px;color:#d7d9dd;max-width:50ch;margin:0 0 32px;
  }
  .hero-lead b{color:#fff;font-weight:600}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .hero-mail{
    font-size:13px;letter-spacing:.06em;color:#b9bec7;text-decoration:none;
    border-bottom:1px solid rgba(193,154,75,.5);padding-bottom:2px;
  }
  .hero-mail:hover{color:var(--brass-hi)}

  /* ---------- Faktenband ---------- */
  .facts{background:var(--ink-2);color:#fff;padding-block:0;border-top:1px solid var(--line-dark)}
  .facts-grid{display:grid;grid-template-columns:1fr}
  @media(min-width:520px){.facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(min-width:860px){.facts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .fact{padding:26px 24px;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
  .fact:last-child{border-right:none}
  .fact dt{
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--brass);margin-bottom:8px;font-weight:600;
  }
  .fact dd{margin:0;font-family:var(--serif);font-size:21px;color:#f0ece3;line-height:1.3;font-variant-numeric:tabular-nums}
  .fact small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--muted-dark);margin-top:5px;line-height:1.45}

  /* ---------- Argumente ---------- */
  .why{background:var(--paper)}
  .why-lead{font-family:var(--serif);font-size:clamp(21px,2.8vw,27px);line-height:1.4;color:var(--text);max-width:24ch}
  .why-cols{
    display:grid;gap:34px;grid-template-columns:1fr;
    margin-top:44px;padding-top:34px;border-top:1px solid var(--line);
  }
  @media(min-width:620px){.why-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(min-width:1000px){.why-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}}
  .why-cols p{font-size:15px;color:var(--muted);margin:0}
  .why-cols a{color:var(--text);text-underline-offset:3px}
  .why-cols h3{color:var(--text)}

  /* ---------- Bilder ---------- */
  .gallery{background:var(--paper-2)}
  .shots{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:30px}
  .shots img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
  .caption{font-size:13px;color:var(--muted);margin-top:18px;max-width:70ch}

  /* ---------- Eignung ---------- */
  .uses{background:var(--paper)}
  .use-list{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
  .use-list li{
    display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:10px 28px;
    padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;
  }
  .use-list .use-name{font-family:var(--serif);font-size:22px;line-height:1.2}
  .use-list p{margin:0;font-size:15px;color:var(--muted)}
  @media(max-width:560px){.use-list li{grid-template-columns:1fr;gap:4px}}

  /* ---------- Ablauf ---------- */
  .steps{background:var(--ink);color:#fff}
  .steps h2{color:#fff}
  .step-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:40px}
  .step{border-top:1px solid var(--brass);padding-top:18px}
  .step .num{
    font-family:var(--serif);font-size:15px;color:var(--brass);letter-spacing:.2em;
    display:block;margin-bottom:10px;font-variant-numeric:tabular-nums;
  }
  .step h3{color:#f0ece3}
  .step p{color:var(--muted-dark);font-size:15px;margin:0}

  /* ---------- Angebot / Formular ---------- */
  .deal{background:var(--paper)}
  .deal-top{
    display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;
    padding-bottom:28px;border-bottom:1px solid var(--line);
  }
  .price{font-family:var(--serif);font-size:clamp(44px,8vw,72px);line-height:1;margin:0;font-variant-numeric:tabular-nums}
  .price span{font-size:.36em;color:var(--muted);letter-spacing:.04em;display:block;margin-top:10px;font-family:var(--sans)}
  .deal-note{font-size:15px;color:var(--muted);max-width:38ch;margin:0}

  form{margin-top:34px;display:grid;gap:18px;max-width:640px}
  .row{display:grid;gap:18px;grid-template-columns:1fr 1fr}
  @media(max-width:560px){.row{grid-template-columns:1fr}}
  label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:7px}
  input[type=text],input[type=email],input[type=tel],textarea{
    width:100%;font-family:var(--sans);font-size:16px;color:var(--text);
    background:#fff;border:1px solid var(--line);padding:13px 14px;border-radius:0;
  }
  textarea{min-height:130px;resize:vertical}
  .choice{display:flex;flex-wrap:wrap;gap:10px}
  .choice label{
    margin:0;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    border:1px solid var(--line);background:#fff;padding:12px 16px;
    font-size:12px;letter-spacing:.08em;color:var(--text);text-transform:none;font-weight:500;
  }
  .choice input{accent-color:var(--brass);margin:0}
  .choice label:has(input:checked){border-color:var(--brass);background:#fffdf7}
  .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  button[type=submit]{
    justify-self:start;cursor:pointer;font-family:var(--sans);
    font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    padding:16px 34px;border:1px solid var(--ink);background:var(--ink);color:#fff;
    transition:background .2s ease;
  }
  button[type=submit]:hover{background:var(--ink-3)}
  .form-alt{font-size:14px;color:var(--muted);margin:0}
  .form-alt a{color:var(--text);text-underline-offset:3px}
  .note{font-size:13px;color:var(--muted);margin:0}
  #meldung{font-size:15px;padding:14px 16px;border-left:3px solid var(--brass);background:#fffdf7}
  #meldung a{color:var(--text);text-underline-offset:3px}

  /* ---------- Fragen ---------- */
  .faq{background:var(--paper-2)}
  .faq-list{margin-top:34px;border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--line)}
  summary{
    cursor:pointer;list-style:none;padding:18px 0;font-size:16px;font-weight:500;
    display:flex;justify-content:space-between;gap:20px;align-items:center;
  }
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-family:var(--serif);font-size:24px;color:var(--brass);line-height:1}
  details[open] summary::after{content:"–"}
  details p{font-size:15px;color:var(--muted);padding-bottom:18px;margin:0}

  /* ---------- Fuß ---------- */
  footer{background:var(--ink);color:var(--muted-dark);padding-block:56px;font-size:14px}
  .foot-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  footer strong{display:block;color:#f0ece3;font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:10px;letter-spacing:.04em}
  footer a{color:var(--muted-dark);text-decoration:none;border-bottom:1px solid var(--line-dark)}
  footer a:hover{color:var(--brass-hi)}
  .foot-en{font-size:13px;line-height:1.6;color:#8b939f}
  .foot-base{
    margin-top:36px;padding-top:20px;border-top:1px solid var(--line-dark);
    display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;letter-spacing:.06em;
  }

  /* ---------- Rechtstexte als Overlay ---------- */
  dialog.rechtstext{
    width:min(760px,calc(100vw - 32px));max-height:86svh;
    padding:0;border:none;background:var(--paper);color:var(--text);
    box-shadow:0 30px 80px rgba(8,13,20,.45);
  }
  dialog.rechtstext[open]{display:flex;flex-direction:column}
  dialog.rechtstext::backdrop{background:rgba(8,13,20,.8)}
  .rt-kopf{
    flex:0 0 auto;background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 24px;border-bottom:1px solid var(--brass);
  }
  .rt-kopf h2{font-size:26px;margin:0;color:#fff}
  .rt-zu{
    appearance:none;background:transparent;border:1px solid rgba(193,154,75,.5);
    color:var(--brass-hi);font-family:var(--sans);font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;cursor:pointer;
    white-space:nowrap;
  }
  .rt-zu:hover{background:rgba(193,154,75,.12);border-color:var(--brass)}
  .rt-koerper{flex:1 1 auto;overflow-y:auto;padding:26px 24px 34px}
  .rt-text h3{
    font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.01em;
    margin:28px 0 8px;color:var(--text);
  }
  .rt-text h3:first-child{margin-top:0}
  .rt-text p{font-size:14.5px;color:var(--muted);margin:0 0 12px;max-width:none}
  .rt-text address{font-style:normal;font-size:15px;color:var(--text);line-height:1.7;margin:0 0 14px}
  .rt-text a{color:var(--text);text-underline-offset:3px}
  .rt-marke{
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
    font-weight:600;margin:0 0 4px;
  }
  @media(max-width:560px){
    .rt-kopf{padding:14px 16px}
    .rt-kopf h2{font-size:21px}
    .rt-koerper{padding:20px 16px 28px}
  }

  @media(max-width:620px){
    .bar-in{flex-wrap:nowrap;gap:10px;padding:10px 16px}
    .bar-price{display:none}
    .bar-name{margin-right:auto;font-size:18px}
    .btn-sm{padding:9px 12px;font-size:11px;letter-spacing:.08em;white-space:nowrap}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  /* ---------- Rechtstexte als eigene Seite (ohne JavaScript) ---------- */
  .rt-seite{background:var(--paper);padding-block:clamp(44px,7vw,80px)}
  .rt-seite h1{
    font-family:var(--serif);font-weight:500;letter-spacing:.01em;
    font-size:clamp(32px,5vw,46px);line-height:1.1;margin:0 0 30px;
  }
  .rt-seite .rt-text{max-width:70ch}