/* Keyword Strategie Builder – ruhiges Layout im Stil von seorado.de */

.keyword-tool-widget{max-width:100%;min-width:0;color:var(--ink)}
.keyword-tool-widget ul,.keyword-tool-widget ol{list-style:none;padding:0;margin:0}
.keyword-tool-widget li{margin:0}

/* Hilfsklassen aus dem Markup */
.keyword-tool-widget .text-sm{font-size:14px}
.keyword-tool-widget .text-xs{font-size:12.5px;line-height:1.5}
.keyword-tool-widget .text-gray{color:var(--gray)}
.keyword-tool-widget .font-bold{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.keyword-tool-widget .text-sky{color:var(--ink)}
.keyword-tool-widget .mb-1{margin-bottom:4px}
.keyword-tool-widget .mb-2{margin-bottom:8px}
.keyword-tool-widget .mb-4{margin-bottom:16px}
.keyword-tool-widget .mt-4{margin-top:16px}
.keyword-tool-widget .ml-4{margin-left:0}

/* Kopf */
.tool-header{margin:0 0 18px}
.tool-title{font-size:22px;letter-spacing:-.02em;line-height:1.25;margin:0 0 4px}
.tool-title .text-sky{color:var(--gray)}
.tool-subtitle{margin:0;font-size:14.5px;color:var(--gray)}

/* Kennzahlen */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 20px}
.stat-card{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 15px}
.stat-label{font-size:12.5px;line-height:1.35;color:var(--gray)}
.stat-value{font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.stat-value.text-sm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;min-height:28.6px;font-size:16px;line-height:1.3;letter-spacing:-.01em}
.stat-value>span{font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1.5;color:var(--gray);background:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px}

/* Tabs als Segment-Steuerung */
.tabs{margin:0 0 18px}
.tab-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--muted);padding:4px;border-radius:11px}
.keyword-tool-widget .tab-button{min-width:0;background:transparent;color:var(--gray);border:1px solid transparent;border-radius:8px;padding:8px 10px;font-size:13.5px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.keyword-tool-widget .tab-button:hover:not(.active){background:rgba(17,17,17,.04);color:var(--ink)}
.keyword-tool-widget .tab-button.active{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:0 1px 2px rgba(17,17,17,.06)}
.keyword-tool-widget .tab-button:focus-visible{outline-offset:1px}

/* Tab-Inhalte: nur der aktive ist sichtbar */
.keyword-tool-widget .tab-content{display:none}
.keyword-tool-widget .tab-content.active{display:block}
.tab-content>h3{font-size:17px;margin:0 0 14px}

/* Buttons */
.keyword-tool-widget .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;font-size:14px}
.keyword-tool-widget .btn-sm{background:var(--line);color:var(--ink);padding:8px 13px;font-size:13px}
.keyword-tool-widget .btn-sm:hover{background:var(--line-strong)}

/* Keyword-Liste: Auswahlleiste */
#keyword-liste>.mb-4{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:0 0 12px;padding:10px 10px 10px 16px;background:var(--muted);border-radius:12px}
#keyword-liste>.mb-4>div:first-child{flex:1 1 300px;display:flex;flex-wrap:wrap;gap:2px 18px;min-width:0}
#keyword-liste>.mb-4>div:last-child{flex:none}
#keyword-liste>.mb-4 .text-sm{font-size:13.5px;line-height:1.5}

/* Keyword-Tabelle: eigener Scroll-Container, falls sie zu breit wird */
#keyword-liste>div:last-child{border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;-webkit-overflow-scrolling:touch}
.keyword-table{margin:0;font-size:14px}
.keyword-table th,.keyword-table td{padding:10px 12px;vertical-align:middle}
.keyword-table th{white-space:nowrap}
.keyword-table th:first-child,.keyword-table td:first-child{width:1%;padding-left:14px;padding-right:4px}
.keyword-table th:nth-child(n+4),.keyword-table td:nth-child(n+4){text-align:right}
.keyword-table th:last-child,.keyword-table td:last-child{padding-right:16px}
.keyword-table td:nth-child(n+3){white-space:nowrap}
.keyword-table tbody tr{transition:background .12s}
.keyword-table tbody tr:hover{background:#fafafb}
.keyword-table tbody tr.selected{background:var(--muted)}
.keyword-table tbody tr.selected td:first-child{box-shadow:inset 2px 0 0 var(--ink)}
.keyword-table tbody tr:last-child td{border-bottom:0}
.keyword-table input[type=checkbox]{display:block;margin:0;cursor:pointer}

/* Karten und Raster */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* SERP: Globales Volumen links über zwei Zeilen, rechts Intent und weitere Metriken */
.grid-3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3>.card:first-child{grid-row:span 2}
.keyword-tool-widget .card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card-title{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.35;margin:0 0 6px}
.keyword-tool-widget .card p.text-xs{margin-bottom:0}
.keyword-tool-widget .card>p:last-child{margin-bottom:0}

/* Keyword-Ideen */
#keyword-ideen .card{display:flex;flex-direction:column}
#keyword-ideen .card>.text-sm{font-size:13px;margin:0 0 6px}
.keyword-list{flex:1 0 auto}
.keyword-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}
.keyword-item:last-child{border-bottom:0}
.keyword-item>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
#keywordQuestionsList .keyword-item{flex-direction:column;align-items:flex-start;gap:1px}
#keyword-ideen .card>.btn{align-self:flex-start;margin-top:12px}

/* Hinweisboxen */
.info-box{background:var(--muted);border-radius:12px;padding:16px 18px;margin-top:16px}
.info-title{font-size:14.5px;font-weight:500;letter-spacing:-.01em;margin:0 0 6px}
.info-text{font-size:14px;line-height:1.6;color:var(--gray);margin:0 0 8px}
.info-text:last-child{margin-bottom:0}
.info-text strong{font-weight:500;color:var(--ink)}

/* SERP-Analyse */
#serp-analyse>.grid-2{margin-bottom:12px}
#serp-analyse .card>.text-sm{margin:0 0 4px;line-height:1.5}
#serp-analyse .card strong{font-weight:500}
#globalVolumeList li{border-bottom:1px solid var(--line)}
#globalVolumeList li:last-child{border-bottom:0;padding-bottom:0!important}

/* Topical Authority: Außenkarte als ruhige Fläche ohne Rahmen */
#topical-authority>.card{background:none;border:0;border-radius:0;padding:0}
#topical-authority>.card>p{font-size:14.5px;line-height:1.65;margin:0 0 12px}
#topical-authority>.card>p+p{margin-bottom:16px}
.cluster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pillar-card,.cluster-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.pillar-card{border-color:var(--ink)}
.pillar-title,.cluster-title{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink);margin:0 0 2px}
.cluster-subtitle{font-size:12.5px;color:var(--gray);margin:0 0 10px}
.keyword-list-small{font-size:14px;line-height:1.5}
.keyword-list-small li{position:relative;padding-left:14px;margin:0 0 5px}
.keyword-list-small li:last-child{margin-bottom:0}
.keyword-list-small li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--gray-soft)}

/* Fußzeile */
.keyword-tool-widget>footer{margin-top:24px;padding-top:14px;border-top:1px solid var(--line)}
.keyword-tool-widget>footer p{margin:0;font-size:12.5px;color:var(--gray-soft)}

/* Modal: per Klasse .active ein- und ausgeblendet */
.keyword-tool-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(17,17,17,.4);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.keyword-tool-modal.active{opacity:1;visibility:visible}
.keyword-tool-modal-content{display:flex;flex-direction:column;width:100%;max-width:440px;background:#fff;border-radius:var(--radius);padding:22px;box-shadow:0 12px 32px rgba(17,17,17,.14);transform:translateY(6px);transition:transform .2s ease}
.keyword-tool-modal.active .keyword-tool-modal-content{transform:none}
.keyword-tool-modal-content h3{font-size:17px;margin:0 0 6px}
.keyword-tool-modal-content p{font-size:14.5px;line-height:1.6;color:var(--gray);margin:0 0 18px}
.keyword-tool-modal-content .btn{align-self:flex-end;min-width:88px}

/* Schmale Spalte und Handy */
@media (max-width:620px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .tool-title{font-size:19px}
  .tool-subtitle{font-size:14px}
  .stat-card{padding:12px 14px 13px}
  .grid-2,.grid-3,.cluster-grid{grid-template-columns:minmax(0,1fr)}
  .grid-3>.card:first-child{grid-row:auto}
  .keyword-tool-widget .card{padding:16px}
  .pillar-card,.cluster-card{padding:16px}
  #keyword-liste>.mb-4{padding:10px 12px}
  #keyword-liste>.mb-4>div:first-child{flex-direction:column}
  #keyword-liste>.mb-4>div:last-child,#keyword-liste>.mb-4 .btn{width:100%}
  .keyword-table{font-size:13.5px}
  .keyword-table th,.keyword-table td{padding:9px 8px}
  .keyword-table th:first-child,.keyword-table td:first-child{padding-left:12px}
  .keyword-table th:last-child,.keyword-table td:last-child{padding-right:12px}
  .info-box{padding:14px 16px}
}