/* Design "herold": Pergament-Seite, Bannergrafik oben, Schriftrolle als Footer.
   Eigenstaendig (ersetzt default.css). Bilder: it-herold/img/ (erzeugt mit tools/mkgfx.py).
   Aufruf: anmeldeformular.html?design=herold */

body { font-family: Arial, sans-serif; background: #f1e7cc; color: #2b1d0e; margin: 0; padding: 24px 16px 40px; line-height: 1.55; }
a { color: #0b5c7a; }
p { margin: 0 0 16px; }
h2 { font-size: 16px; margin-top: 28px; }

/* Karte mit Bannergrafik (Titel steckt im Bild, die Ueberschrift bleibt fuer Screenreader im HTML) */
.box { max-width: 780px; margin: 0 auto; background: #fffaf0; border: 2px solid #5a3b1a; border-radius: 14px; overflow: hidden; box-shadow: 3px 4px 6px rgba(60, 40, 10, .28), 9px 12px 26px rgba(60, 40, 10, .32); }
.banner { padding: 0; position: relative; z-index: 1; box-shadow: 4px 5px 12px rgba(40, 25, 5, .50); aspect-ratio: 3936 / 1088; background: #0e1b33 url(img/banner.webp) center / cover no-repeat; }
.banner h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inner { padding: 24px; }
ul.topics { margin: 0 0 16px; padding-left: 20px; }
ul.topics li { margin-bottom: 4px; }
.note { font-size: 13px; color: #4a3a22; background: #f4ead0; border: 1px solid #d9c89c; border-radius: 8px; padding: 12px 14px; margin: 16px 0 0; }

/* Formular */
label { display: block; font-weight: bold; margin-bottom: 6px; }
input[type=email] { width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px; border: 1px solid #b59a68; border-radius: 8px; background: #fff; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: 14px; font-weight: normal; }
.consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
button { width: 100%; font-size: 16px; font-weight: bold; padding: 14px; border: 2px solid #5a3b1a; border-radius: 8px; background: #e8a23a; color: #2b1d0e; cursor: pointer; }
button:hover { background: #f0b252; }

/* Footer: Schriftrolle schwebt unter der Karte, die Links liegen auf dem Pergament */
.footer { container-type: inline-size; position: relative; width: min(460px, 100%); aspect-ratio: 1024 / 339; margin: 20px auto 0; }
.footer::before { content: ""; position: absolute; inset: 0; background: url(img/scroll.webp) center / contain no-repeat; filter: drop-shadow(3px 4px 3px rgba(40, 25, 5, .45)) drop-shadow(8px 10px 12px rgba(40, 25, 5, .30)); }
.foot { position: absolute; inset: 22% 17% 30% 19%; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .4em; text-align: center; font-size: max(11px, 3.2cqw); color: #3b2a14; }
.foot a { color: #5a3410; font-weight: bold; }

/* Textseiten (Impressum, Datenschutz) */
.w { max-width: 640px; margin: 0 auto; }
.w .foot { position: static; display: block; font-size: 12px; margin: 32px 0 0; text-align: left; }

/* Honeypot: fuer Menschen unsichtbar */
.hp { position: absolute; left: -9999px; }

/* Textseiten (Impressum, Datenschutz) in derselben Huelle: Bannertext steckt im Bild */
.banner .brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inner h1 { font-size: 24px; margin: 0 0 16px; }

/* Variante B: schmaler Bannerstreifen (alle n8n-Seiten ausser der Anmeldeseite) */
.box.slim .banner { aspect-ratio: auto; height: 92px; background-position: 62% 38%; }

/* Textseiten und Formulare in der Karte */
.inner h2 { font-size: 17px; margin: 24px 0 8px; }
.links { font-size: 13px; color: #4a3a22; margin: 20px 0 0; }
.inner input[type=text], .inner textarea { width: 100%; box-sizing: border-box; font-family: Arial, sans-serif; font-size: 16px; padding: 12px; border: 1px solid #b59a68; border-radius: 8px; background: #fff; margin-bottom: 12px; }
.inner textarea { resize: vertical; }
.inner input[type=email] { margin-bottom: 12px; }

/* Themen-Seite: Karten mit Auswahlfeldern */
.lead-hint { padding: 12px 16px; background: #f4ead0; border: 1px solid #d9a441; border-radius: 8px; font-weight: bold; font-size: 14.5px; }
.card { background: #f7efd9; border: 1px solid #d9c89c; border-radius: 10px; padding: 16px; margin: 0 0 16px; }
.card h2 { margin-top: 0; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border: 1px solid #c9b88a; border-radius: 8px; padding: 12px; margin-bottom: 8px; background: #fffaf0; min-height: 44px; font-weight: normal; }
.opt input { width: 18px; height: 18px; flex: none; }
.opt-name { flex: 1 1 0%; min-width: 0; }
.opt .src { flex: 1 0 100%; font-size: 11px; color: #6b5a3a; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.actions button { width: auto; padding: 12px 22px; }
.actions button[type=reset] { background: none; border: none; color: #6b5a3a; text-decoration: underline; font-weight: normal; padding: 4px 0; font-size: 13.5px; }