:root { --gelb:#ffe000; --schwarz:#000000; }
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--gelb);
  color: var(--schwarz);
}

/* Header + Nav (sticky) */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--gelb);
  border-bottom: 3px solid var(--schwarz);
  text-align: center;
  padding: 18px 16px 12px;
}
header h1 { margin:0; font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height:1.1; }
header .sub { margin:6px 0 12px; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight:700; }
nav { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
nav a {
  text-decoration:none; color:var(--schwarz);
  border:2px solid var(--schwarz); border-radius:999px;
  padding:10px 14px; font-weight:800; background:transparent;
  box-shadow:4px 4px 0 var(--schwarz); transition:transform .15s, box-shadow .15s;
}
nav a:hover, nav a:focus { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--schwarz); outline:none; }
nav a.active { background:var(--schwarz); color:var(--gelb); }

/* Layout */
.container { width:min(100%, 1000px); margin:22px auto; padding:0 18px; }
h2 { font-size: clamp(1.3rem, 3vw, 2rem); margin: 0 0 10px; }
p { line-height:1.55; }

/* Hero image with solid overlay caption */
.hero {
  position: relative;
  margin: 0;
}
.hero img {
  width:100%;
  height:auto;
  display:block;
  border:4px solid var(--schwarz);
  border-radius:16px;
  background:#fff8b3;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
}
.hero .caption {
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  background:#ffe000; color:#000;
  border:2px solid var(--schwarz);
  border-radius:12px;
  padding:10px 16px; font-weight:900; letter-spacing:.2px;
  box-shadow:3px 3px 0 var(--schwarz);
  text-align:center; white-space:nowrap; max-width:calc(100% - 24px);
}
@media (max-width:420px) { .hero .caption { white-space: normal; } }

/* Cards / Boxes */
.card {
  border:2px solid var(--schwarz);
  border-radius:12px;
  padding:14px 16px;
  background:#fff8b3;
  box-shadow:4px 4px 0 var(--schwarz);
  margin:10px 0;
}

/* Grid helpers */
.grid {
  display:grid; gap:16px;
}
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }

/* Buttons */
.btn {
  display:inline-block; text-decoration:none; color:var(--schwarz);
  border:2px solid var(--schwarz); border-radius:999px; background:transparent;
  padding:12px 18px; font-weight:900;
  box-shadow:4px 4px 0 var(--schwarz); transition:transform .15s, box-shadow .15s;
}
.btn:hover, .btn:focus { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--schwarz); outline:none; }

/* Instagram embed + consent */
.notice { border:2px dashed var(--schwarz); background:#fff8b3; padding:12px 14px; border-radius:12px; }
.consent { border:2px solid var(--schwarz); background:#fff8b3; padding:14px; border-radius:12px; }
.lightwidget-widget { width:100%; border:0; border-radius:12px; box-shadow:0 10px 20px rgba(0,0,0,.15); background:#fff8b3; }

/* Kontaktbilder kompakt */
.kontakt-bilder { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.kontakt-bilder img { max-width:240px; height:auto; border:2px solid var(--schwarz); border-radius:10px; box-shadow:0 6px 12px rgba(0,0,0,.2); background:#fff8b3; }
@media (max-width:700px){ .kontakt-bilder img { max-width:100%; } }

/* Forms */
label { font-weight:700; }
input, textarea {
  width:100%; padding:10px 12px; font:inherit; color:var(--schwarz);
  background:transparent; border:2px solid var(--schwarz); border-radius:10px;
}

/* Footer */
footer { text-align:center; padding:20px 12px 28px; font-size:.95rem; }
footer a { color:var(--schwarz); }