/* ASGUHM Core — premium multi-step forms (journey / second-opinion / contact).
   Brand navy #092c74, coral #0c53c6, blue gradient #2f6bff→#1746c4. */

.asg-form{
	--navy:#092c74; --coral:#0c53c6; /* azure accent (v1.12.2) */ --blue:#2f6bff; --blue2:#1746c4;
	--ink:#16213d; --muted:#64708a; --line:#e6ebf3; --soft:#f6f8fc;
	font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	box-sizing:border-box; width:100%;
}
.asg-form *,.asg-form *::before,.asg-form *::after{box-sizing:border-box}
.asg-form .iti{width:100%}

/* ---------- head ---------- */
.asg-form-head{margin-bottom:18px}
.asg-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:800;letter-spacing:.14em;color:var(--coral);margin-bottom:12px}
.asg-eyebrow--blue{color:var(--blue)}
.asg-eyebrow-dash{width:26px;height:2px;background:currentColor;border-radius:2px}
.asg-form-title{font-size:2rem;line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:#fff}
.asg-form-title--navy{color:var(--navy)}
.asg-form-sub{margin:0;font-size:1.02rem;line-height:1.5;color:rgba(255,255,255,.72)}

/* ---------- progress + stepbar ---------- */
.asg-progress{display:flex;gap:8px;margin:18px 0 14px}
.asg-progress>span{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.18);transition:background .3s}
.asg-progress>span.is-active{background:linear-gradient(90deg,#5b8bff,#2f6bff)}
.asg-stepbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.asg-back,.asg-stepcount{background:none;border:0;cursor:pointer}
.asg-back{color:rgba(255,255,255,.85);font-size:.95rem;font-weight:600;padding:0}
.asg-stepcount{font-size:.78rem;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.asg-stepcount b{color:#fff}

/* ---------- step + question ---------- */
.asg-step{display:none;animation:asgIn .25s ease}
.asg-step.is-active{display:block}
@keyframes asgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.asg-step-q{font-size:1.35rem;font-weight:700;margin:0 0 18px;color:#fff;letter-spacing:-.01em}

/* ---------- tiles ---------- */
.asg-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.asg-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
	padding:22px 10px;border-radius:14px;cursor:pointer;
	background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
	color:#dfe7f7;transition:transform .14s,background .14s,border-color .14s,box-shadow .14s}
.asg-tile svg{width:30px;height:30px;color:#a9c2ff}
.asg-tile span{font-size:.92rem;font-weight:600;color:#eaf0ff;text-align:center}
.asg-tile:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.asg-tile.is-selected{background:rgba(47,107,255,.22);border-color:#5b8bff;box-shadow:0 0 0 2px rgba(91,139,255,.4) inset}

/* ---------- inputs ---------- */
.asg-lbl{display:block;font-size:.86rem;font-weight:700;color:#fff;margin:16px 0 7px}
.asg-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.asg-in{width:100%;border-radius:12px;padding:14px 15px;font-size:1rem;font-family:inherit;
	background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;transition:border-color .15s,box-shadow .15s,background .15s}
.asg-in::placeholder{color:rgba(255,255,255,.5)}
.asg-in:focus{outline:none;border-color:#5b8bff;box-shadow:0 0 0 3px rgba(91,139,255,.25);background-color:rgba(255,255,255,.12)}
textarea.asg-in{resize:vertical;min-height:96px}
select.asg-in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

/* ---------- consent / turnstile / actions ---------- */
.asg-consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0 6px;font-size:.85rem;color:rgba(255,255,255,.78);line-height:1.45}
.asg-consent input{margin-top:3px;flex:0 0 auto}
.asg-lead-turnstile{margin:14px 0 4px}
.asg-actions{display:flex;gap:10px;margin-top:22px}
.asg-btn{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:1.02rem;
	padding:15px 26px;border-radius:30px;color:#fff;flex:1;
	background:linear-gradient(90deg,#3b78ff,#1746c4);box-shadow:0 12px 26px rgba(23,70,196,.4);
	transition:transform .12s,filter .15s,box-shadow .15s}
.asg-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.asg-btn[disabled]{opacity:.65;cursor:default;transform:none}
.asg-btn--ghost{flex:0 0 auto;background:rgba(255,255,255,.1);box-shadow:none;border:1px solid rgba(255,255,255,.25)}

.asg-feedback{margin-top:14px;font-size:.92rem;font-weight:600;min-height:1.2em}
.asg-feedback.is-error{color:#ffb4a3}
.asg-feedback.is-success{color:#9be7b4}

/* ======================================================================
   GLASS preset (homepage hero) — transparent over the navy hero
   ====================================================================== */
.asg-form--glass{
	background:linear-gradient(180deg, rgba(10,28,72,.96), rgba(6,18,48,.975));
	border:1px solid rgba(125,165,255,.32);
	border-radius:26px;padding:36px 34px;
	backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
	box-shadow:0 44px 110px rgba(2,10,32,.62), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.04);
}
/* hero title on one line (glass preset only) */
.asg-form--glass .asg-form-title{ font-size:1.5rem; white-space:nowrap; }
@media (max-width:560px){ .asg-form--glass .asg-form-title{ white-space:normal; font-size:1.35rem; } }

/* ======================================================================
   LIGHT preset (second-opinion + contact) — white premium card
   ====================================================================== */
.asg-form--light{
	background:#fff;border:1px solid #eef1f7;border-radius:24px;
	padding:38px 38px 30px;box-shadow:0 30px 70px rgba(9,44,116,.12);color:var(--ink);
}
.asg-form--light .asg-form-title{color:var(--navy)}
.asg-form--light .asg-form-sub{color:var(--muted)}
.asg-form--light .asg-progress>span{background:#e8edf6}
.asg-form--light .asg-progress>span.is-active{background:linear-gradient(90deg,#3b78ff,#1746c4)}
.asg-form--light .asg-stepcount-l{font-size:.92rem;color:var(--muted);font-weight:600}
.asg-form--light .asg-stepcount-l b{color:var(--navy)}
.asg-form--light .asg-steptitle{font-size:.92rem;color:var(--muted);font-weight:600}
.asg-form--light .asg-stepbar{margin-bottom:24px}
.asg-form--light .asg-step-q{color:var(--navy)}
.asg-form--light .asg-lbl{color:var(--ink)}

.asg-form--light .asg-in{background-color:var(--soft);border:1px solid var(--line);color:var(--ink)}
.asg-form--light .asg-in::placeholder{color:#9aa4ba}
.asg-form--light .asg-in:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.15);background-color:#fff}
.asg-form--light select.asg-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231746c4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.asg-form--light .asg-consent{color:var(--muted)}
.asg-form--light .asg-btn--ghost{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.asg-form--light .asg-feedback.is-error{color:#c0341d}
.asg-form--light .asg-feedback.is-success{color:#1a7a3c}

/* radio cards */
.asg-cards{display:grid;gap:10px;margin:4px 0 4px}
.asg-cards--2{grid-template-columns:1fr 1fr}
.asg-cards--3{grid-template-columns:1fr 1fr}
.asg-card-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
	padding:15px 16px;border-radius:13px;background:#fff;border:1.5px solid var(--line);
	font-family:inherit;font-size:1rem;font-weight:700;color:var(--navy);transition:border-color .14s,background .14s,box-shadow .14s;text-align:left}
.asg-card-opt span{flex:1}
.asg-card-opt .asg-radio{width:20px;height:20px;border-radius:50%;border:2px solid #cdd6e6;flex:0 0 auto;position:relative;transition:border-color .14s}
.asg-card-opt:hover{border-color:#b9c6e4}
.asg-card-opt.is-selected{background:#eef4ff;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.asg-card-opt.is-selected .asg-radio{border-color:var(--blue);background:var(--blue)}
.asg-card-opt.is-selected .asg-radio::after{content:"";position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#fff}

/* review */
.asg-review{border:1px solid var(--line);border-radius:14px;padding:6px 16px;background:var(--soft);margin-bottom:6px}
.asg-review-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid #eaeef6;font-size:.95rem}
.asg-review-row:last-child{border-bottom:0}
.asg-review-row span{color:var(--muted)}
.asg-review-row b{color:var(--navy);text-align:right}

/* trust */
.asg-trust{text-align:center;margin-top:18px;font-size:.84rem;color:var(--muted);font-weight:600}

/* phone widget on light cards */
.asg-form--light .iti__selected-flag{border-radius:12px 0 0 12px;background:#eef1f7}

@media (max-width:640px){
	.asg-form--glass,.asg-form--light{padding:24px 20px}
	.asg-form-title{font-size:1.55rem}
	.asg-row,.asg-cards--2,.asg-cards--3{grid-template-columns:1fr}
	.asg-step-q{font-size:1.15rem}
}

/* ---- Homepage hero column: dark backdrop so the glass journey form reads as a hero ---- */
#home-secondOpinion:has(.asg-form--glass){
	background:#071f4d;display:flex;align-items:center;padding:30px 26px;
}
#home-secondOpinion .asg-form--glass{width:100%;max-width:560px;margin:0 auto}
/* Contact page: keep the premium card distinct inside the page box */
.page-context .asg-form--light{margin:8px 0}

/* ======================================================================
   THEME HARDENING — beat satellite premium.css (h4{color:ink}, .form framing)
   ====================================================================== */
/* Kill theme heading color/transform/font leaking into the form */
.asg-form .asg-form-title,
.asg-form .asg-step-q,
.asg-form .asg-lbl{
	text-transform:none !important;
	font-family:'Plus Jakarta Sans','Inter',-apple-system,sans-serif !important;
	letter-spacing:-.01em;
}
.asg-form .asg-form-title{margin:0 0 8px !important}
.asg-form .asg-step-q{margin:0 0 18px !important}
.asg-form--glass .asg-form-title,
.asg-form--glass .asg-step-q{color:#fff !important}
.asg-form--glass .asg-form-sub{color:rgba(255,255,255,.74) !important}
.asg-form--glass .asg-lbl{color:#fff !important}
.asg-form--light .asg-form-title,
.asg-form--light .asg-step-q{color:#092c74 !important}
.asg-form--light .asg-lbl{color:#16213d !important}
.asg-form .asg-eyebrow{text-transform:none}

/* Homepage hero: make the form column ONE clean navy panel (no card-in-card) */
#home-welcome.bg-light{background:#0a1f4a !important}
#home-secondOpinion.form{
	padding:0 !important;
	background:#0a1f4a !important;
	box-shadow:none !important;
	display:flex !important;
	align-items:center;
}
#home-secondOpinion .asg-form--glass{
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
	-webkit-backdrop-filter:none !important;
	backdrop-filter:none !important;
	border-radius:0 !important;
	max-width:none !important;
	width:100%;
	margin:0 !important;
	padding:46px 48px !important;
}
@media (max-width:991.98px){
	#home-secondOpinion .asg-form--glass{padding:32px 22px !important}
}

/* Give the hero form panel a touch more width so it breathes (image 58% / form 42%) */
@media (min-width:992px){
	#home-welcome .wimage{flex:0 0 58% !important;max-width:58% !important}
	#home-secondOpinion.form{flex:0 0 42% !important;max-width:42% !important}
}

/* ======================================================================
   CONTACT / INNER-PAGE FIX — one clean card, no double frame, calm space
   ----------------------------------------------------------------------
   The theme wraps the embedded form in `.page-context.uhm-box`, which is
   already a white, bordered, rounded, shadowed card (padding 44px 48px).
   The light form is ALSO a white card (padding 38px + border + shadow),
   so the two stack into a card-in-card with doubled padding on every side.
   When a light form is present we make the PAGE BOX the single card and
   let the form sit flush inside it.
   ====================================================================== */

/* (a) Form drops its own card chrome → no card-in-card, no doubled padding */
.page-context:has(.asg-form--light) .asg-form--light{
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
	border-radius:0 !important;
	padding:0 !important;
	margin:0 !important;
}

/* (b) Calm the page box so it breathes evenly on all four sides */
#page-content .page-context:has(.asg-form--light),
#page-content .page-context.uhm-box:has(.asg-form--light){
	padding:30px 34px 32px !important;
}

/* (c) Trim the section's tall top/bottom band */
#page-details:has(.asg-form--light){padding:44px 0 64px !important}

/* (d) Premium = sentence case, not a shouting ALL-CAPS page title */
#page-content:has(.asg-form--light) h1,
#page-content:has(.asg-form--light) h1.semiBorderBottom,
.page-context:has(.asg-form--light) h1,
.page-context:has(.asg-form--light) h1.semiBorderBottom{
	text-transform:none !important;
}

/* (e) Empty the_content() <h4> must not leave a gap above the form */
.page-context:has(.asg-form--light) > h4:empty{display:none !important}
.page-context:has(.asg-form--light) > h4{margin:0 0 18px !important}

/* (f) Tighten the form head once it's flush (title already sits under h1) */
.page-context:has(.asg-form--light) .asg-form-head{margin-bottom:16px}

@media (max-width:768.98px){
	#page-content .page-context:has(.asg-form--light),
	#page-content .page-context.uhm-box:has(.asg-form--light){padding:20px 18px 24px !important}
	#page-details:has(.asg-form--light){padding:28px 0 44px !important}
}

/* ======================================================================
   HERO JOURNEY — match the main-site reference (no button on the tile step)
   ----------------------------------------------------------------------
   On the first step the tiles auto-advance, so the action row is empty.
   The JS hides the button; this collapses the empty row as a CSS fallback
   (and prevents a leftover gap before the script runs).
   ====================================================================== */
.asg-actions:not(:has(.asg-btn:not([hidden]))){display:none !important}

/* Belt-and-suspenders: sentence-case headings everywhere (no Title Case
   leaking in from theme transforms), so "Wie können wir Ihnen helfen?"
   reads naturally like the reference site. */
.asg-form .asg-form-title,
.asg-form .asg-step-q,
.asg-form .asg-form-sub,
.asg-form .asg-eyebrow{ text-transform:none !important; }

/* ======================================================================
   PREMIUM UPGRADE (glass hero form) — defined tiles, glowing progress,
   refined card. Loaded last → wins the cascade.
   ====================================================================== */
.asg-form--glass{ padding:38px 36px; }

/* Tiles: more defined cards with depth, hover lift + glow + accent line */
.asg-form--glass .asg-tiles{ gap:13px; }
.asg-form--glass .asg-tile{
	padding:22px 12px 18px; border-radius:16px; gap:11px;
	background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
	border:1px solid rgba(150,185,255,.20);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
	position:relative; overflow:hidden;
}
.asg-form--glass .asg-tile::before{
	content:""; position:absolute; top:0; left:0; right:0; height:2px;
	background:linear-gradient(90deg, transparent, #6f9bff, transparent);
	opacity:0; transition:opacity .18s;
}
.asg-form--glass .asg-tile svg{ width:28px; height:28px; color:#9ec0ff; transition:color .18s, transform .18s; }
.asg-form--glass .asg-tile span{ font-size:.9rem; font-weight:600; color:#eaf0ff; }
.asg-form--glass .asg-tile:hover{
	transform:translateY(-3px);
	background:linear-gradient(180deg, rgba(91,139,255,.18), rgba(91,139,255,.07));
	border-color:rgba(130,170,255,.5);
	box-shadow:0 16px 34px -14px rgba(18,48,130,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
.asg-form--glass .asg-tile:hover::before{ opacity:1; }
.asg-form--glass .asg-tile:hover svg{ color:#fff; transform:scale(1.08); }
.asg-form--glass .asg-tile.is-selected{
	background:linear-gradient(180deg, rgba(47,107,255,.34), rgba(47,107,255,.18));
	border-color:#6f9bff;
	box-shadow:0 0 0 2px rgba(111,155,255,.55) inset, 0 14px 30px -12px rgba(20,50,130,.7);
}
.asg-form--glass .asg-tile.is-selected svg{ color:#fff; }

/* Progress: thicker + glow */
.asg-form--glass .asg-progress>span{ height:5px; border-radius:5px; }
.asg-form--glass .asg-progress>span.is-active{
	background:linear-gradient(90deg,#6f9bff,#2f6bff); box-shadow:0 0 12px rgba(47,107,255,.6);
}

/* Eyebrow + question polish */
.asg-form--glass .asg-eyebrow{ font-size:.74rem; letter-spacing:.18em; }
.asg-form--glass .asg-step-q{ font-size:1.2rem; }

/* Submit/next button: deeper premium gradient + shadow */
.asg-form--glass .asg-btn{
	background:linear-gradient(120deg,#3b78ff,#1746c4);
	box-shadow:0 16px 34px -10px rgba(23,70,196,.6);
}