/* Tool-Block innerhalb deiner Landingpage */
.intlToolWrap { margin: 18px 0 22px 0; }
.intlToolTitle { margin: 0 0 10px 0; }
.intlControls {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
margin: 10px 0 10px 0;
font: 14px/1.35 Arial, sans-serif;
}
.intlControls label { cursor: pointer; user-select: none; }
.intlControls input { margin-right: 6px; }

#intlMapHost {
width: 100%;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e6e6e6;
background: #fafafa;
}

.intlHint {
margin-top: 8px;
font: 13px/1.35 Arial, sans-serif;
opacity: 0.8;
}

.intlTooltip {
position: absolute;
pointer-events: none;
background: rgba(20,20,20,0.92);
color: #fff;
padding: 8px 10px;
border-radius: 8px;
font: 13px/1.35 Arial, sans-serif;
max-width: 260px;
z-index: 9999;
box-shadow: 0 6px 20px rgba(0,0,0,0.18);
display: none;
}
.intlTooltip .ttTitle { font-weight: 700; margin-bottom: 4px; }
.intlTooltip .ttSmall { opacity: 0.85; font-size: 12px; margin-top: 4px; }

.intlLegend{
display:flex; gap:14px; flex-wrap:wrap; align-items:center;
margin-top:10px; font:13px/1.35 Arial,sans-serif; opacity:0.9;
}
.lgItem{ display:inline-flex; align-items:center; gap:8px; }
.lgSwatch{ width:14px; height:14px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,0.18); }
.lgGreen{ background:#2fbf71; }
.lgBlue{ background:#1e66ff; }



/* Seriöses Blau/Grau-Design für die Vergleichstabelle */
.intCompareWrap{margin:18px 0 24px 0;}
.intCompareTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font:14px/1.35 Arial,sans-serif;
  background:#fff;
  border:1px solid #d9e1ee;
  border-radius:12px;
  overflow:visible; /* statt hidden */
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.intCompareTable th,.intCompareTable td{
border-bottom:1px solid #e6edf7;
border-right:1px solid #e6edf7;
padding:12px 12px;
vertical-align:top;
}
.intCompareTable th:last-child,.intCompareTable td:last-child{border-right:none;}
.intCompareTable tr:last-child td{border-bottom:none;}

.intCompareTable thead th{
background:linear-gradient(180deg,#f4f7fc 0%, #eef3fb 100%);
color:#1f2a44;
font-weight:700;
}
.intCompareTable thead th:first-child{
background:linear-gradient(180deg,#2b5fb8 0%, #1f4d9a 100%);
color:#ffffff;
}

.intCompareTable .rowHead{
background:#f7f9fd;
color:#1f2a44;
font-weight:700;
width:22%;
white-space:nowrap;
}

/* leichte Zebra-Optik nur für Content-Zellen (nicht RowHead) */
.intCompareTable tbody tr:nth-child(even) td:not(.rowHead){
background:#fbfcff;
}

/* Sterne etwas harmonischer */
.stars{display:inline-flex;gap:3px;vertical-align:middle;}
.star{font-size:16px;line-height:1;color:#d5d9e2;}
.star.on{color:#d4af37;}

/* Weltkugel-Tooltip im seriösen Stil */
.globeTip{position:relative;display:inline-flex;align-items:center;gap:6px;}
.globe{
cursor:help;
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;height:22px;
border-radius:7px;
background:#eef3fb;
border:1px solid #d9e1ee;
color:#1f4d9a;
font-size:15px;
line-height:1;
}
.globe:hover{background:#e6eefc;}
.globe:focus{outline:2px solid #b3d4ff;outline-offset:2px;}

/* Tabelle-Tooltip: links oben vom Icon, kleiner, besser sichtbar */
.globe[data-tip]:hover::after,
.globe[data-tip]:focus::after{
  content: attr(data-tip);
  position:absolute;
  right: 0;                 /* an der rechten Kante des Triggers ausrichten */
  bottom: calc(100% + 10px);/* oberhalb statt unterhalb */
  min-width: 240px;
  max-width: 460px;
  background: rgba(20,20,20,0.95);
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  z-index:99999;
 white-space: pre-line;
  font-size:11px;           /* eine Stufe kleiner */
  line-height:1.3;
  box-shadow:0 12px 34px rgba(0,0,0,0.22);

}

.globe[data-tip]:hover::before,
.globe[data-tip]:focus::before{
  content:"";
  position:absolute;
  right:10px;
  bottom: 100%;
  transform: translateY(100%);
  border:7px solid transparent;
  border-top-color: rgba(20,20,20,0.95); /* Pfeil zeigt nach unten zum Icon */
}

/* Optional: kleine Hilfstexte */
.intCompareSmall{font-size:12px;color:#667089;margin-top:6px;}