/* Datei: css/ip-analyse.css
Ziel: Layout/Sizing + theme-fähige Farben über Variablen
*/

/* Kompakter Hero (ca. 300px) */
.heroStage--compact{
padding: 26px 0 34px 0;
min-height: 300px;
display: flex;
align-items: center;
}

/* Titel/Subtitel kompakter */
.heroTitle--sm{
font-size: 46px;
line-height: 1.06;
margin: 6px 0 10px 0;
}

.heroSub--sm{
margin-bottom: 16px;
max-width: 760px;
}

/* Wuselgusel: nur auf dieser Unterseite dezenter + kleiner */
.heroStage--compact .heroNet{
opacity: 0.55;
}

.heroStage--compact .heroNet canvas{
transform: scale(0.60);
transform-origin: 50% 50%;
filter: blur(0.2px);
}

/* Theme-Variablen (Light default) */
.heroSearch{
--search-field-bg: rgba(255,255,255,0.98);
--search-field-border: rgba(15,23,42,0.12);
--search-field-shadow: 0 10px 22px rgba(2,24,58,0.10);

--search-icon: rgba(11,103,185,0.92);
--search-text: rgba(15,23,42,0.92);
--search-placeholder: rgba(15,23,42,0.42);
}

/* Darkmode-Variablen */
html:not([data-theme="light"]) .heroSearch{
--search-field-bg: rgba(255,255,255,0.06);
--search-field-border: rgba(255,255,255,0.12);
--search-field-shadow: 0 18px 34px rgba(0,0,0,0.35);

--search-icon: rgba(255,255,255,0.82);
--search-text: rgba(255,255,255,0.92);
--search-placeholder: rgba(255,255,255,0.62);
}

/* Such-/Analyse-Leiste */
.heroPanel--search{
padding: 16px;
}

.heroSearch{
display: flex;
gap: 12px;
align-items: stretch;
}

.heroSearch__field{
flex: 1;
background: var(--search-field-bg);
border: 1px solid var(--search-field-border);
border-radius: 16px;
display: flex;
align-items: center;
padding: 12px 14px;
box-shadow: var(--search-field-shadow);
}

.heroSearch__icon{
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 12px;
color: var(--search-icon);
flex: 0 0 auto;
}

.heroSearch__input{
width: 100%;
border: 0;
outline: none;
background: transparent;
font-size: 22px;
line-height: 1.2;
color: var(--search-text);
}

.heroSearch__input::placeholder{
color: var(--search-placeholder);
}

.heroSearch__btn{
border: 0;
border-radius: 16px;
padding: 0 18px;
min-width: 220px;
font-weight: 800;
font-size: 20px;
color: #fff;
cursor: pointer;
box-shadow: 0 14px 28px rgba(2,24,58,0.24);
background: linear-gradient(90deg, rgba(74,187,255,1), rgba(45,118,255,1) 55%, rgba(44,60,255,1));
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.heroSearch__btn:disabled{
opacity: 0.72;
cursor: not-allowed;
}

.heroSearch__btnIcon{
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.ipAnalyseCards{
margin-top: 18px;
}

/* Karte etwas flacher als Startseite */
.ipMap .map{ height: 320px; }

/* Mobile */
@media (max-width: 820px){
.heroStage--compact{
min-height: 290px;
padding: 20px 0 28px 0;
}

.heroTitle--sm{ font-size: 34px; }

.heroSearch{
flex-direction: column;
gap: 10px;
}

.heroSearch__btn{
min-width: 100%;
height: 54px;
font-size: 18px;
}

.heroSearch__input{ font-size: 18px; }
}


#captchaBox[hidden]{display:none!important;}
#turnstileMount{min-height:90px!important;height:auto!important;}
#turnstileMount > div{min-height:90px!important;}