/* ========================================================================== Ferienhaus Schwarzatalblick — Fragebogen-Seite Theme: Natur / Dunkelgrün (Cards + Grün) Fonts: Open Sans via Google Fonts (loaded in ) ========================================================================== */ /* ── Reset / Base ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 14px; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-weight: 400; color: #444444; background-color: #f4f0e6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(45%2C90%2C39%2C0.07)'/%3E%3C/svg%3E"); line-height: 1.7em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Headings ────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: #1a3d1a; font-weight: 500; line-height: 1.2em; padding-bottom: 10px; margin: 0; } h1 { font-size: 30px; } h2 { font-size: 26px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } p { margin: 0; padding-bottom: 1em; } p:last-of-type { padding-bottom: 0; } a { color: #2d5a27; text-decoration: none; } a:hover { text-decoration: underline; } blockquote { margin: 10px 0 20px; border-left: 4px solid #2d5a27; padding-left: 20px; } blockquote p { padding-bottom: 0; } hr { border: none; border-top: 1px solid #ddd8cc; margin: 20px 0; } /* ── Site Header ─────────────────────────────────────────────────────────── */ .site-header { position: relative; min-height: 460px; display: flex; flex-direction: column; background-image: linear-gradient(to bottom, rgba(5, 20, 5, 0.35) 0%, rgba(20, 50, 20, 0.60) 75%, rgba(244, 240, 230, 0) 100%), url('../img/header.jpg'); background-size: cover; background-position: center 35%; text-align: center; overflow: hidden; } .site-header__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 20px 44px; position: relative; z-index: 1; } .site-header__subtitle { margin: 0 0 10px; padding: 0; font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.28em; text-transform: uppercase; } /* Dekorativer Trennstrich unter dem Untertitel */ .site-header__subtitle::after { content: ''; display: block; width: 40px; height: 1px; background: rgba(255, 255, 255, 0.4); margin: 10px auto 0; } .site-header__name { font-family: 'Lora', Georgia, serif; color: #ffffff; font-size: 44px; font-weight: 400; line-height: 1.2; padding-bottom: 0; letter-spacing: 0.01em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); } /* Foto-Header: sanfter Übergang in den cremefarbenen Hintergrund */ .site-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, #f4f0e6); pointer-events: none; z-index: 0; } /* ── Page layout ─────────────────────────────────────────────────────────── */ .page-section { background-color: #f4f0e6; padding: 40px 20px 64px; } .form-container { background-color: #ffffff; border-radius: 14px; box-shadow: 0 8px 40px rgba(26, 61, 26, 0.12); width: 90%; max-width: 1080px; margin: 0 auto; padding: 48px 52px; } /* ── Intro block ─────────────────────────────────────────────────────────── */ .intro-block { margin-bottom: 32px; } .intro-block h2 { font-family: 'Lora', Georgia, serif; font-weight: 500; margin-bottom: 14px; font-size: 24px; color: #1a3d1a; } .intro-block hr { border-top: 1px solid #ddd8cc; margin-top: 28px; } .pflichtfeld-hinweis { font-size: 12px; color: #888; margin-bottom: 8px; padding-bottom: 0; } /* ── Person cards (fieldsets) ────────────────────────────────────────────── */ fieldset { border: none; border-top: 3px solid #2d5a27; padding: 24px 28px 28px; margin: 0 0 20px 0; background-color: #ffffff; border-radius: 10px; box-shadow: 0 2px 14px rgba(26, 61, 26, 0.08); } fieldset legend { /* float statt display:block — sonst rendert der Browser die legend auf dem Fieldset-Rahmen, außerhalb der Karte */ float: left; width: 100%; padding: 0; margin-bottom: 20px; } fieldset .field-grid { clear: both; } fieldset legend h2, fieldset legend h3 { font-family: 'Lora', Georgia, serif; font-weight: 500; color: #1a3d1a; margin-bottom: 0; } /* „Hauptansprechperson" als Bernstein-Badge */ fieldset legend blockquote { border: none; padding: 0; margin: 8px 0 0; display: inline-block; } fieldset legend blockquote p { display: inline-block; font-size: 10px; font-weight: 700; color: #7a4f10; background: #fdf3e0; border: 1px solid #d4a84b; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 8px; padding-bottom: 3px; } hr.person-separator { display: none; } /* ── Form field grid ─────────────────────────────────────────────────────── */ .field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; } /* Logisches Adress-Layout: breite Felder spannen 2 Spalten */ .field-grid .form-group:has([name^="e_mail"]), .field-grid .form-group:has([name^="strasse"]), .field-grid .form-group:has([name^="stadt"]) { grid-column: span 2; } /* ── Karten: Hover-Feedback ──────────────────────────────────────────────── */ fieldset, .weitere-fragen, .anzahl-group { transition: box-shadow 0.2s ease; } fieldset:focus-within, .weitere-fragen:focus-within, .anzahl-group:focus-within { box-shadow: 0 4px 20px rgba(26, 61, 26, 0.14); } /* Personen-Karten blenden sanft ein, wenn sie sichtbar werden */ fieldset[data-person] { animation: card-in 0.3s ease both; } @keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Form groups ─────────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; } .form-group--narrow { max-width: 180px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #2d5a27; font-size: 11px; } .field-grid .form-group label { text-transform: uppercase; letter-spacing: 0.06em; } .form-group--checkbox { margin-top: 28px; flex-direction: row; align-items: flex-start; gap: 0; background: #f7f9f7; border: 1px solid #c8dcc4; border-radius: 8px; padding: 16px 18px; } .form-group--checkbox label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13px; cursor: pointer; line-height: 1.55; color: #555; text-transform: none; letter-spacing: normal; } .form-group--checkbox input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; cursor: pointer; accent-color: #2d5a27; } /* ── Inputs, selects ─────────────────────────────────────────────────────── */ input[type="text"], input[type="email"], select { width: 100%; background-color: #ffffff; border: 1px solid #c4bfb0; border-radius: 6px; padding: 9px 11px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; transition: border-color 0.15s ease, box-shadow 0.15s ease; appearance: auto; } input[type="text"]:focus, input[type="email"]:focus, select:focus { outline: none; border-color: #2d5a27; box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.14); color: #222; } /* ── Required marker ─────────────────────────────────────────────────────── */ .required { color: #c0392b; font-style: normal; margin-left: 2px; } /* ── Weitere Fragen section ──────────────────────────────────────────────── */ .weitere-fragen { margin-top: 28px; padding: 24px 28px 28px; background-color: #ffffff; border-radius: 10px; border-top: 3px solid #2d5a27; box-shadow: 0 2px 14px rgba(26, 61, 26, 0.08); } .weitere-fragen > hr:first-child { display: none; } .weitere-fragen h4 { font-family: 'Lora', Georgia, serif; color: #1a3d1a; margin-bottom: 22px; font-size: 18px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; } .weitere-fragen .form-group { margin-bottom: 16px; max-width: 560px; } .weitere-fragen .form-group label { font-size: 13px; text-transform: none; letter-spacing: normal; font-weight: 600; color: #2d5a27; } /* ── PayPal hint ─────────────────────────────────────────────────────────── */ .paypal-hint { margin: 12px 0 16px; } .paypal-box { max-width: 420px; padding: 16px 18px; border: 1px solid #2d5a27; border-radius: 8px; background-color: #eef5ec; color: #1a3d1a; font-size: 14px; line-height: 1.6; } .paypal-box p { padding-bottom: 12px; } .paypal-btn { display: inline-block; font-size: 14px; font-weight: 700; color: #ffffff; background-color: #2d5a27; border-radius: 6px; padding: 10px 24px; letter-spacing: 0.04em; transition: background-color 0.2s ease; } .paypal-btn:hover { background-color: #1a3d1a; text-decoration: none; } .paypal-btn:focus-visible { outline: 3px solid rgba(45, 90, 39, 0.35); outline-offset: 2px; } .paypal-box .paypal-note { margin-top: 10px; padding-bottom: 0; font-size: 12px; color: #557a50; } /* ── Form message ────────────────────────────────────────────────────────── */ #form-message { margin-top: 16px; font-size: 14px; } .form-message--error { color: #8b1a1a; background-color: #fdf0ee; border: 1px solid #d9534f; border-radius: 6px; padding: 12px 16px; } /* ── Submit row ──────────────────────────────────────────────────────────── */ .submit-row { margin-top: 32px; padding-top: 28px; border-top: 1px solid #e8e3d8; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } button[type="submit"] { font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: 700; color: #ffffff; background-color: #2d5a27; border: none; border-radius: 6px; padding: 14px 48px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; box-shadow: 0 3px 10px rgba(45, 90, 39, 0.3); } button[type="submit"]:hover { background-color: #1a3d1a; box-shadow: 0 5px 16px rgba(45, 90, 39, 0.4); } button[type="submit"]:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(45, 90, 39, 0.3); } button[type="submit"]:focus-visible { outline: 3px solid rgba(45, 90, 39, 0.35); outline-offset: 2px; } /* Lade-Zustand: Button gesperrt + Spinner statt Doppel-Klick */ button[type="submit"]:disabled { cursor: default; opacity: 0.75; } button[type="submit"].is-loading { position: relative; color: transparent; } button[type="submit"].is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; animation: btn-spin 0.7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .submit-hint { font-size: 12px; color: #999; padding-bottom: 0; margin: 0; } /* ── Anzahl: erster Schritt, prominent ───────────────────────────────────── */ .anzahl-group { background: #ffffff; border-top: 3px solid #2d5a27; border-radius: 10px; box-shadow: 0 2px 14px rgba(26, 61, 26, 0.08); padding: 20px 28px 24px; max-width: 440px; margin-bottom: 28px; } .anzahl-group__label { display: block; font-size: 15px; font-weight: 600; color: #1a3d1a; margin-bottom: 12px; } .anzahl-pills { display: flex; gap: 10px; } .anzahl-pill { position: relative; cursor: pointer; } .anzahl-pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .anzahl-pill span { display: flex; align-items: center; justify-content: center; min-width: 56px; height: 48px; border: 1px solid #c4bfb0; border-radius: 8px; background: #ffffff; font-size: 17px; font-weight: 600; color: #444444; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; user-select: none; } .anzahl-pill:hover span { border-color: #2d5a27; color: #1a3d1a; } .anzahl-pill input:checked + span { background: #2d5a27; border-color: #2d5a27; color: #ffffff; box-shadow: 0 3px 10px rgba(45, 90, 39, 0.3); } .anzahl-pill input:focus-visible + span { outline: 3px solid rgba(45, 90, 39, 0.35); outline-offset: 2px; } .anzahl-hint { margin-top: 10px; padding-bottom: 0; font-size: 12px; color: #888; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .field-grid { grid-template-columns: repeat(2, 1fr); } .field-grid .form-group:has([name^="e_mail"]), .field-grid .form-group:has([name^="strasse"]), .field-grid .form-group:has([name^="stadt"]) { grid-column: span 2; } } /* ── Danke-Seite ─────────────────────────────────────────────────────────── */ .danke-card { text-align: center; padding: 24px 0 8px; } .danke-card__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: #eef5ec; border: 2px solid #2d5a27; color: #2d5a27; } .danke-card h2 { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 26px; margin-bottom: 8px; } .danke-card p { max-width: 560px; margin: 0 auto; } .danke-card .btn-back { display: inline-block; margin-top: 28px; font-size: 14px; font-weight: 700; color: #ffffff; background-color: #2d5a27; border-radius: 6px; padding: 12px 32px; letter-spacing: 0.08em; text-transform: uppercase; transition: background-color 0.2s ease; } .danke-card .btn-back:hover { background-color: #1a3d1a; text-decoration: none; } /* ── Reduzierte Bewegung ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { fieldset[data-person] { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } button[type="submit"].is-loading::after { animation-duration: 0.7s !important; animation-iteration-count: infinite !important; } } @media (max-width: 600px) { .site-header { min-height: 280px; } .site-header__name { font-size: 26px; } .form-container { width: 100%; border-radius: 8px; padding: 24px 16px; } fieldset { padding: 18px 16px; } .weitere-fragen { padding: 18px 16px; } .field-grid { grid-template-columns: 1fr; gap: 12px; } .field-grid .form-group:has([name^="e_mail"]), .field-grid .form-group:has([name^="strasse"]), .field-grid .form-group:has([name^="stadt"]) { grid-column: auto; } .form-group--narrow { max-width: 100%; } .weitere-fragen .form-group { max-width: 100%; } button[type="submit"] { width: 100%; font-size: 14px; } /* 16px verhindert den automatischen Zoom von iOS beim Fokussieren */ input[type="text"], input[type="email"], select { font-size: 16px; } .anzahl-group { max-width: 100%; padding: 18px 16px 20px; } .anzahl-pills { gap: 8px; } .anzahl-pill { flex: 1; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 15px; } }