:root{
  --gold:#c3a762; --gold-dk:#a98d4c; --dark:#282f32; --paper:#f4f4f4;
  --ink:#2b2f33; --muted:#63635f; --line:#dcdcda; --card:#fbfbfb;
  --err:#a6382e; --ok:#2f6b46;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--paper); color:var(--ink);
  line-height:1.75; font-size:16px;
  display:flex; flex-direction:column; min-height:100dvh;
}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);
  transition:color .18s,border-color .18s}
a:hover{color:var(--gold-dk);border-color:var(--gold-dk)}
:focus-visible{outline:2px solid var(--gold-dk);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:#fff;
  padding:.7rem 1.2rem;z-index:20;border:0}
.skip:focus{left:0}

/* Kopf */
.top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;padding:1.5rem clamp(1.2rem,5vw,4rem);
  border-bottom:1px solid var(--line);background:#f8f8f7}
.top .brand{border:0;display:block;flex:none}
.top .brand img{height:44px;width:auto;display:block}
.top nav{display:flex;gap:clamp(1rem,2.5vw,2.2rem);flex-wrap:wrap}
.top nav a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom-width:1px;padding-bottom:2px}
.top nav a[aria-current=page]{color:var(--gold-dk);border-bottom-width:2px}

/* Inhalt */
main{flex:1;width:100%;max-width:60rem;margin:0 auto;
  padding:clamp(2.4rem,7vh,4.5rem) clamp(1.2rem,5vw,4rem)}
h1{font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:400;letter-spacing:.13em;
  line-height:1.35;margin-bottom:.4rem}
h1+.lead{color:var(--muted);font-size:.95rem;letter-spacing:.04em;margin-bottom:2.4rem;max-width:52ch}
h1::after{content:"";display:block;width:74px;height:2px;background:var(--gold);margin:1.3rem 0}
h2{font-size:1.02rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  margin:2.6rem 0 .9rem;color:var(--ink)}
h3{font-size:.92rem;font-weight:600;letter-spacing:.06em;margin:1.6rem 0 .4rem}
p,li{font-size:.94rem;color:#41413e}
p+p{margin-top:.9rem}
ul,ol{margin:.7rem 0 .7rem 1.3rem}
li+li{margin-top:.35rem}
section+section{margin-top:.4rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem 2.4rem}

/* Platzhalter fuer noch fehlende Angaben */
.ph{display:inline-block;font-weight:700;color:#5a4407;background:#f7e6ab;
  border:1px dashed var(--gold-dk);border-radius:3px;padding:.05em .5em;
  letter-spacing:.02em}
.ph-note{margin:1.6rem 0 2rem;padding:1rem 1.2rem;background:#fdf6e0;
  border-left:4px solid var(--gold);font-size:.86rem;color:#5a4407}
.ph-note strong{font-weight:700}
.ph-note p+p{margin-top:.7rem}
.ph-note ul{margin:.5rem 0 0 1.2rem}
.ph-note li{font-size:.86rem;color:#5a4407}
.ph-note li+li{margin-top:.3rem}
.ph-note a{color:#5a4407;border-bottom-color:var(--gold-dk);word-break:break-all}

/* Karten / Kontaktdaten */
.card{background:var(--card);border:1px solid var(--line);padding:1.5rem 1.6rem}
.card h2{margin-top:0}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;font-size:.92rem}
dl.kv dt{color:var(--muted);letter-spacing:.08em;font-size:.76rem;text-transform:uppercase;
  padding-top:.15rem}
dl.kv dd{color:#41413e}

/* Formular */
form{margin-top:1.2rem;max-width:38rem}
.field{margin-bottom:1.4rem}
.field label{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.field .req{color:var(--gold-dk)}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid #cfcfcd;border-radius:0;
  padding:.75rem .9rem;transition:border-color .18s,box-shadow .18s}
textarea{min-height:11rem;resize:vertical;line-height:1.6}
input:focus,textarea:focus{border-color:var(--gold-dk);outline:none;
  box-shadow:0 0 0 3px rgba(195,167,98,.22)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--err)}
.hint{font-size:.78rem;color:var(--muted);margin-top:.4rem}
.err{font-size:.82rem;color:var(--err);margin-top:.4rem;font-weight:600}
.check{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.6rem}
.check input{margin-top:.35rem;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--gold-dk)}
.check label{font-size:.86rem;color:#41413e;letter-spacing:0;text-transform:none}
button{font:inherit;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--dark);color:#fff;border:0;padding:.95rem 2.2rem;cursor:pointer;
  transition:background .18s}
button:hover{background:#3b4249}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.note{padding:1.1rem 1.3rem;font-size:.9rem;margin-bottom:2rem;border-left:4px solid}
.note.ok{background:#eef5f0;border-color:var(--ok);color:#245135}
.note.bad{background:#f9edec;border-color:var(--err);color:#7d2a22}

/* Fuss */
.bottom{background:var(--dark);color:#cfcfcb;margin-top:3rem}
.fin{max-width:60rem;margin:0 auto;padding:1.6rem clamp(1.2rem,5vw,4rem);
  display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;align-items:center}
.fin p{font-size:.78rem;color:#a0a09c;letter-spacing:.08em}
.fin nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.fin a{color:#e2e2de;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  border-bottom-color:rgba(195,167,98,.5)}
.fin a:hover{color:var(--gold)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}