/* style.css - klassieke goud/bruin thema */
:root{
  --bg:#fffaf1;
  --text:#2e2b18;
  --muted:#6b5f3a;
  --accent:#c08b16;
  --yellow:#f4d35e;
  --wrap-width:1100px;
  --radius:8px;
  --sans: "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}

.wrap{max-width:var(--wrap-width);margin:0 auto;padding:1rem}

.wrapf{
  max-width: 900px(--wrapf-width);
  margin: 0 auto;
  padding: 1rem;
}



.site-header{border-bottom:3px solid var(--accent);padding:.6rem 0;margin-bottom:.5rem}

.brand{display:flex;gap:1rem;align-items:center}
.brand .icon{width:48px;height:48px;object-fit:cover;border-radius:6px}
.muted{color:var(--muted);font-size:.95rem;margin:0}
.lang-switch{float:right;margin-top:-48px}
.lang-switch a{color:var(--muted);text-decoration:none;font-weight:700}
.lang-switch a.active{color:var(--accent)}
.notice{background:linear-gradient(90deg, rgba(192,139,22,0.06), rgba(244,211,94,0.04));padding:.6rem;border-radius:6px;margin:.8rem auto}
.grid{display:grid;grid-template-columns:1fr 320px;gap:1rem}
.main-card{background:#fff;padding:1rem;border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.side-card{background:#fff;padding:1rem;border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.links{display:flex;flex-direction:column;gap:.4rem}
.links a{display:flex;font-weight: 700;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);padding:.25rem 0}
.icon-small{width:34px;height:34px;object-fit:cover;border-radius:4px}
.meta{color:var(--muted);font-size:.9rem}
.site-footer{border-top:1px solid rgba(0,0,0,0.04);margin-top:1rem;padding-top:1rem;color:var(--muted);font-size:.95rem}
.card{background:#fff;padding:1rem;border-radius:var(--radius);box-shadow:0 1px 6px rgba(0,0,0,0.04)}
@media(max-width:900px){.grid{grid-template-columns:1fr}.lang-switch{float:none;margin-top:0;text-align:right}}

.main-card {
  position: relative;
  background-image: url('Images/hotei-ink.png');
  background-size: cover; /* vult de hele sectie */
  background-position: center; /* afbeelding gecentreerd */
  background-repeat: no-repeat; /* geen herhaling */
  padding: 20px; /* ruimte binnen de kaart */
  border-radius: 12px; /* optioneel: afgeronde hoeken */
  color: #fff; /* tekst wit als je een donkere bg hebt */
  overflow: hidden;
}

.main-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.0); /* pas dit aan */
  z-index: 0;
}

.main-card > * {
  position: relative;
  z-index: 1;
}


/* Alleen titel en tekst zwart maken */
.main-card h2,
.main-card h3,
.main-card li,
.main-card p {
 color: black;
}

form {
      background: #fff;
      padding: 20px;
      border: 1px solid #ccc;
      width: 400px;
      margin: auto;
      border-radius: 8px;
    }
label {
      display: block;
      margin-top: 10px;
      font-weight: bold;
    }
input, textarea {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      box-sizing: border-box;
    }
button {
      margin-top: 15px;
      padding: 10px 15px;
      background-color: #333;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
button:hover {
      background-color: #555;
    }