/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:#222;
  background:#f7f7f8;
  line-height:1.6;
  overflow-x:hidden; /* kein horizontaler Scroll */
}

/* Helpers */
.center{text-align:center}
.container{max-width:920px;margin:0 auto;padding-left:16px;padding-right:16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;box-shadow:0 4px 12px rgba(0,0,0,0.4);margin:0 auto}

/* Höhe des Pfeilbereichs (damit der Pfeil immer sichtbar bleibt) */
:root{
  --scroll-hint-h: 56px; /* bei Bedarf anpassen (z.B. 64px) */
}

/* Hero (flyer) – um Pfeilhöhe verkürzt */
.full-viewport{min-height:calc(100vh - var(--scroll-hint-h));position:relative}
.flyer-frame{width:100%;height:calc(100vh - var(--scroll-hint-h));display:flex;align-items:center;justify-content:center;background:#111;overflow:hidden}
.flyer-img{max-width:100%;max-height:100%;height:auto;width:auto;display:block}

/* PDF-Fallback soll im selben Rahmen funktionieren */
.flyer-pdf{width:100%;height:100%}

/* ZENTRALER PFEIL – eigener Block UNTER dem Flyer */
.scroll-down-wrap{
  height:var(--scroll-hint-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111111;   /* identisch zum dunklen Rand/Übergang */
}
.scroll-down{
  display:inline-block;
  text-decoration:none;
  font-size:28px;
  color:#fff;
  opacity:.95;
  line-height:1;
}
.scroll-down:hover{opacity:1}

/* Contact */
.contact-section{padding:48px 0;background:#111111}
.logo-wrap{display:flex;justify-content:center;margin-bottom:16px}
.logo{max-width:180px;height:auto}

/* Typography */
.headline{font-size:36px;font-weight:700;margin:8px 0 4px}
.subheadline{font-size:28px;font-weight:600;margin:0 0 12px}
.intro{font-size:18px;margin:0 0 18px}

/* Form */
.form{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
.form label{font-weight:700;text-align:left;word-wrap:break-word;overflow-wrap:break-word}
.field{width:100%;padding:12px 14px;border:1px solid #c8b6a0;border-radius:10px;background:#eadcc7;font-size:16px}
.field:focus{outline:2px solid #b08968;border-color:#b08968}

/* Datenschutz-Checkbox – sauberes Umbruchverhalten */
.checkbox{
  display:block;           /* kein flex: vermeidet "Spalten" */
  margin-top:10px;
  text-align:left;
  line-height:1.4;
  font-weight:normal;
}
.checkbox input{
  margin-right:8px;
  vertical-align:top;
}
.checkbox .checkbox-text{
  display:inline;          /* normaler Inline-Text */
  white-space:normal;      /* normale Zeilenumbrüche */
  word-break:normal;       /* nicht brutal trennen */
  overflow-wrap:anywhere;  /* bricht nur im Notfall */
}

/* Button */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid #111;background:#111;color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(0.95)}
.small{font-size:.9rem;color:#666}

/* Footer */
.foot{padding:28px 0;text-align:center;color:#666}
.foot a{color:inherit}

/* Prevent horizontal overflow */
body, .container, .card, .form{max-width:100vw}
label, .intro{word-break:break-word}

/* Responsive tweaks */
@media (min-width:480px){
  .headline{font-size:40px}
  .subheadline{font-size:32px}
  .intro{font-size:20px}
  .card{padding:28px}
}
@media (min-width:768px){
  .headline{font-size:40px}
  .subheadline{font-size:35px}
  .intro{font-size:22px}
  .card{padding:32px}
}