/* =========================================================
B2D - Wedding Form (Form-1) v3.6
Change:
- Style the Nimbus "thank you" / result screen:
body.nimbuscloud-custom-form-result + .form-result
-> ~50% larger + centered on screen (desktop & mobile)
-> works with dark mode automatically
Keep:
- Darkmode h1 fix (form page)
- Mobile radio buttons fixed (exclude radios from global input styling + custom radio layout)
- Automatic Dark Mode via prefers-color-scheme: dark
- Required asterisk globally visible (red) BUT hidden for package group label (Option B)
- Fix for \A swallowing: always terminate \A with SPACE
- Paket 1 has no "mit eurem Song"
- Feature text under divider is ~20% larger (17px)
- Individuell: "Dauer Privatstunde = 45 Minuten"
- ASCII-only file; umlaut in header via unicode escape (G\00E4nsehaut)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
/* ----------------------------
Light defaults
---------------------------- */
:root{
--background: radial-gradient(circle at center, #F3EEFF 0%, #7640E5 100%);
--color-form: rgba(255,255,255,0.35);
--color-font: #222222;
--b2d-purple: #7640E5;
--b2d-purple-dark: #5b2ec4;
--b2d-gold: #D4AF37;
--card-bg: rgba(255,255,255,0.96);
--card-border: rgba(0,0,0,0.10);
--shadow: 0 18px 45px rgba(0,0,0,0.18);
--shadow-soft: 0 10px 25px rgba(0,0,0,0.12);
--input-bg: rgba(255,255,255,0.75);
--input-text: var(--color-font);
--input-border: rgba(0,0,0,0.10);
--input-focus: rgba(118,64,229,0.35);
/* radio styling */
--radio-size: 24px;
--radio-accent: var(--b2d-purple);
--radio-border: rgba(0,0,0,0.35);
/* Layout */
--card-h: 520px;
--header-h: 78px;
--content-pad-x: 26px;
/* Divider position */
--divider-y: 265px;
/* Feature block position */
--features-top: calc(var(--divider-y) + 16px);
/* Feature font size (was 14px) */
--features-font: 17px;
}
/* ----------------------------
Auto Dark Mode
---------------------------- */
@media (prefers-color-scheme: dark){
:root{
--background: radial-gradient(circle at center, #2a1b4d 0%, #0f0b1b 100%);
--color-form: rgba(20,14,35,0.55);
--color-font: #EDEAF7;
--b2d-purple: #7640E5;
--b2d-purple-dark: #5b2ec4;
/* keep cards LIGHT for readability */
--card-bg: rgba(255,255,255,0.96);
--card-border: rgba(255,255,255,0.18);
--shadow: 0 20px 55px rgba(0,0,0,0.55);
--shadow-soft: 0 12px 28px rgba(0,0,0,0.45);
--input-bg: rgba(18,12,30,0.70);
--input-text: #F2F0F8;
--input-border: rgba(255,255,255,0.18);
--input-focus: rgba(212,175,55,0.35);
--radio-border: rgba(255,255,255,0.65);
}
}
/* Base */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{
font-family:'Poppins',sans-serif;
line-height:1.5;
font-weight:500;
color:var(--color-font);
}
body{ background: var(--background); min-height: 100vh; }
h1,h2,h3,h4,h5,h6{ font-weight:700; text-align:center; }
/* =========================================================
RESULT / THANK YOU SCREEN (Nimbus)
========================================================= */
/* Center the result screen content */
body.nimbuscloud-custom-form-result{
background: var(--background);
min-height: 100vh;
display:flex;
align-items:center;
justify-content:center;
padding: 24px;
}
/* Bigger, centered message + premium "card" */
body.nimbuscloud-custom-form-result .form-result{
font-size: 1.5em; /* ~50% larger */
font-weight: 600;
line-height: 1.35;
text-align: center;
max-width: 820px;
width: 100%;
padding: 28px 26px;
border-radius: 18px;
background: var(--color-form);
backdrop-filter: blur(10px);
box-shadow: 0 25px 60px rgba(0,0,0,0.25);
color: var(--color-font);
}
/* Slightly more contrast in dark mode */
@media (prefers-color-scheme: dark){
body.nimbuscloud-custom-form-result .form-result{
box-shadow: 0 28px 70px rgba(0,0,0,0.55);
}
}
/* Smaller screens: keep it roomy but readable */
@media (max-width: 520px){
body.nimbuscloud-custom-form-result .form-result{
font-size: 1.45em;
padding: 24px 20px;
border-radius: 16px;
}
}
/* Make intro text readable in dark mode too + FIX headings */
@media (prefers-color-scheme: dark){
body.nimbuscloud-custom-form[data-id="6"] h1,
body.nimbuscloud-custom-form[data-id="6"] h2,
body.nimbuscloud-custom-form[data-id="6"] h3,
body.nimbuscloud-custom-form[data-id="6"] h4,
body.nimbuscloud-custom-form[data-id="6"] h5,
body.nimbuscloud-custom-form[data-id="6"] h6{
color: var(--color-font) !important;
text-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
body.nimbuscloud-custom-form[data-id="6"] p,
body.nimbuscloud-custom-form[data-id="6"] label,
body.nimbuscloud-custom-form[data-id="6"] .form-group{
color: var(--color-font);
}
}
/* Form shell */
form{
background-color: var(--color-form);
backdrop-filter: blur(10px);
border-radius: 1.5em;
margin: 2em;
padding: 2em;
box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}
@media (prefers-color-scheme: dark){
form{ box-shadow: 0 28px 70px rgba(0,0,0,0.55); }
}
/* ----------------------------
Inputs (IMPORTANT FIX)
Only style "real" inputs, not radio/checkbox
---------------------------- */
input:not([type="radio"]):not([type="checkbox"]):not(.checkbox-inline):not(.checkbox):not(.radio-inline):not(.radio),
.form-group > textarea,
.form-group > select{
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 1em;
padding: 0.8em 1em;
color: var(--input-text);
}
/* Placeholder color */
input:not([type="radio"]):not([type="checkbox"])::placeholder,
textarea::placeholder{
color: rgba(255,255,255,0.55);
}
@media (prefers-color-scheme: light){
input:not([type="radio"]):not([type="checkbox"])::placeholder,
textarea::placeholder{
color: rgba(0,0,0,0.35);
}
}
/* Focus for inputs */
input:not([type="radio"]):not([type="checkbox"]):focus,
textarea:focus,
select:focus{
outline: none;
box-shadow: 0 0 0 3px var(--input-focus);
}
/* Submit button (Nimbus injects button inside .form-submit-container) */
.form-group > button,
.form-submit-container button,
.form-submit-container .btn{
background: var(--b2d-purple);
color:#fff;
font-weight:600;
padding: 0.85em 1.6em;
border-radius: 2em;
transition: 0.25s ease;
border:none;
}
.form-group > button:hover,
.form-submit-container button:hover,
.form-submit-container .btn:hover{
background: var(--b2d-purple-dark);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
/* =========================================================
Required asterisk handling (Option B)
========================================================= */
.required-item{
display:inline;
color:#e53935;
font-weight:800;
margin-left:6px;
vertical-align:baseline;
}
body.nimbuscloud-custom-form[data-id="6"] label[for="form_radio-group-1771783449515"] + .required-item{
display:none !important;
}
/* =========================================================
NORMAL radio groups (Song, Tanzerfahrung, etc.)
Fix layout on mobile + keep consistent on desktop
EXCLUDES package tiles group.
========================================================= */
/* Container spacing */
body.nimbuscloud-custom-form[data-id="6"] .form-group > div[id^="form_radio-group-"]:not(#form_radio-group-1771783449515){
margin-top: 10px;
}
/* Each option line: align circle + text nicely */
body.nimbuscloud-custom-form[data-id="6"] .form-group > div[id^="form_radio-group-"]:not(#form_radio-group-1771783449515) label.radio,
body.nimbuscloud-custom-form[data-id="6"] .form-group > div[id^="form_radio-group-"]:not(#form_radio-group-1771783449515) label.radio-inline{
display:flex;
align-items:center;
gap: 12px;
margin: 10px 0;
line-height: 1.25;
}
/* Make sure inputs render as normal radios (no padding box) */
body.nimbuscloud-custom-form[data-id="6"] .form-group > div[id^="form_radio-group-"]:not(#form_radio-group-1771783449515) input[type="radio"]{
appearance: auto;
-webkit-appearance: radio;
width: var(--radio-size);
height: var(--radio-size);
margin: 0;
flex: 0 0 var(--radio-size);
accent-color: var(--radio-accent);
}
/* If some browsers ignore accent-color, keep a readable outline */
@media (prefers-color-scheme: dark){
body.nimbuscloud-custom-form[data-id="6"] .form-group > div[id^="form_radio-group-"]:not(#form_radio-group-1771783449515) input[type="radio"]{
outline: 1px solid rgba(255,255,255,0.20);
outline-offset: 2px;
}
}
/* On very small screens, prevent wrapping weirdness */
@media (max-width: 520px){
body.nimbuscloud-custom-form[data-id="6"] .form-group > div[id^="form_radio-group-"]:not(#form_radio-group-1771783449515) label.radio,
body.nimbuscloud-custom-form[data-id="6"] .form-group > div[id^="form_radio-group-"]:not(#form_radio-group-1771783449515) label.radio-inline{
gap: 10px;
}
}
/* =========================================================
Package tiles - Wedding (Form ID 6)
========================================================= */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515{
display:grid;
grid-template-columns: repeat(2, minmax(320px, 1fr));
gap: 28px;
margin-top: 14px;
align-items: stretch;
}
@media (max-width: 980px){
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515{
grid-template-columns: 1fr;
}
}
/* Hide radio input inside package tiles */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio > input[type="radio"]{
position:absolute;
opacity:0;
pointer-events:none;
}
/* Card */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio{
position:relative;
display:block;
cursor:pointer;
user-select:none;
background: var(--card-bg);
border: 2px solid var(--card-border);
border-radius: 10px;
box-shadow: var(--shadow-soft);
height: var(--card-h);
overflow:hidden;
padding: 0;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
font-size: 0; /* hide raw text */
}
/* Hover */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:hover{
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: rgba(118,64,229,0.40);
}
/* Selected */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[type="radio"]:checked){
border-color: rgba(212,175,55,0.95);
box-shadow: 0 22px 55px rgba(0,0,0,0.22);
}
/* Header */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio::before{
position:absolute;
left:0; right:0; top:0;
height: var(--header-h);
background: var(--b2d-purple);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding: 10px 16px;
white-space: pre-line;
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.02em;
text-shadow: 0 2px 10px rgba(0,0,0,0.25);
content: "";
}
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_1"])::before{
content: "Paket 1\A der stilvolle Einstieg";
}
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_2"])::before{
content: "Paket 2\A der Klassiker";
}
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_3"])::before{
content: "Paket 3\A der G\00E4nsehaut-Moment";
}
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="individuell"])::before{
content: "Individuell\A Abrechnung pro Stunde";
}
/* Features (fixed area) */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio::after{
position:absolute;
left:0; right:0;
top: var(--features-top);
height: calc(var(--card-h) - var(--features-top));
padding: 22px var(--content-pad-x) 22px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
white-space: pre-line;
text-align:center;
font-size: var(--features-font);
font-weight: 500;
color: rgba(0,0,0,0.62);
line-height: 1.35;
content:"";
}
/* Feature texts */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_1"])::after{
content: "2 Stunden \00E0 60 Minuten";
}
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_2"])::after{
content: "4 Stunden \00E0 60 Minuten";
}
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_3"])::after{
content: "6 Stunden \00E0 60 Minuten";
}
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="individuell"])::after{
content: "Abrechnung zum regul\00E4ren Preis \201EPrivatunterricht (Paar, extern)\201C (siehe Website).\A \A Dauer Privatstunde = 45 Minuten";
}
/* Divider (1 line) */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio{
background-image: linear-gradient(to right, rgba(0,0,0,0.14), rgba(0,0,0,0.14));
background-repeat: no-repeat;
background-size: 68% 1px;
background-position: center var(--divider-y);
}
/* PRICE SVG overlay positioning */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value]){
background-repeat: no-repeat, no-repeat;
background-size: 68% 1px, 420px 180px;
background-position: center var(--divider-y), center calc(var(--header-h) + 34px);
}
/* Price SVGs (Euro is URL-encoded: %E2%82%AC) */
/* Paket 1: 180 */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_1"]){
background-image:
linear-gradient(to right, rgba(0,0,0,0.14), rgba(0,0,0,0.14)),
url("data:image/svg+xml;utf8,");
}
/* Paket 2: 360 */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_2"]){
background-image:
linear-gradient(to right, rgba(0,0,0,0.14), rgba(0,0,0,0.14)),
url("data:image/svg+xml;utf8,");
}
/* Paket 3: 540 */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="paket_3"]){
background-image:
linear-gradient(to right, rgba(0,0,0,0.14), rgba(0,0,0,0.14)),
url("data:image/svg+xml;utf8,");
}
/* Individuell */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:has(> input[value="individuell"]){
background-image:
linear-gradient(to right, rgba(0,0,0,0.14), rgba(0,0,0,0.14)),
url("data:image/svg+xml;utf8,");
}
/* Focus */
body.nimbuscloud-custom-form[data-id="6"] #form_radio-group-1771783449515 label.radio:focus-within{
outline: 3px solid rgba(118,64,229,0.35);
outline-offset: 3px;
}