/*
 * GEO-Fragen-Datenblock (Shortcode [osg_geo_fragen]).
 * Aus dem Mockup tasks/attachments/111/dev-fragen-datenblock-muenchen.html übernommen, Regeln mit
 * späteren Überschreibungen zusammengeführt und unter .osg-geo-fq gekapselt.
 * Farben: grün #2e9e5b, orange #e08a3c, rot #c0392b. Stufen berechnet der Server (pw-g/o/r, v-g/o/r).
 */

.osg-geo-fq {
    --navy: #134269;
    --blue: #195f98;
    --gold: #b5a355;
    --text: #3e3e3e;
    --muted: #6b7280;
    --line: #e5e7eb;
    --g: #2e9e5b;
    --o: #e08a3c;
    --r: #c0392b;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
    line-height: 1.55;
}
.osg-geo-fq *,
.osg-geo-fq *::before,
.osg-geo-fq *::after { box-sizing: border-box; }

/* Kopf */
.osg-geo-fq__header { text-align: center; max-width: 700px; margin: 0 auto 16px; }
.osg-geo-fq__eyebrow { text-transform: uppercase; font-size: .9rem; font-weight: 700; letter-spacing: 3px; color: var(--gold); margin-bottom: 16px; }
.osg-geo-fq__headline { font-size: 2.6rem; font-weight: 800; color: var(--text); margin: 0 0 16px; line-height: 1.15; letter-spacing: -1px; }
.osg-geo-fq__hl { color: var(--gold); }
.osg-geo-fq__sub { font-size: 1rem; color: var(--muted); line-height: 1.7; margin: 0 0 24px; }

/* Rahmen */
.osg-geo-fq .gc { background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: .88rem; overflow: visible; }
.osg-geo-fq .gc-col--full { background: #fff; padding: 14px 16px; border-radius: 14px; }

/* Kopfzeile und Fragen */
.osg-geo-fq .fq-head,
.osg-geo-fq .gc.fq details.q summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) 190px 160px; gap: 12px; align-items: center; }
.osg-geo-fq .fq-head { padding: 8px 0 10px; border-bottom: 1px solid var(--line); font-size: .66rem; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.osg-geo-fq .fq-head span:nth-child(n+3) { text-align: center; }

.osg-geo-fq .gc details.q { border-bottom: 1px solid #f1f2f4; }
.osg-geo-fq .gc details.q:last-of-type { border-bottom: none; }
.osg-geo-fq .gc.fq details.q summary { padding: 10px 0; cursor: pointer; list-style: none; }
.osg-geo-fq .gc details.q summary::-webkit-details-marker { display: none; }

.osg-geo-fq .q-plus { position: relative; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #eaf0f6; transition: background .2s, transform .2s; }
.osg-geo-fq .q-plus::before,
.osg-geo-fq .q-plus::after { content: ""; position: absolute; background: var(--navy); border-radius: 1px; transition: .2s; }
.osg-geo-fq .q-plus::before { left: 7px; right: 7px; top: 11px; height: 2px; }
.osg-geo-fq .q-plus::after { top: 7px; bottom: 7px; left: 11px; width: 2px; }
.osg-geo-fq .gc details.q summary:hover .q-plus { background: #dbe5f0; }
.osg-geo-fq .gc details.q[open] .q-plus { background: var(--navy); transform: rotate(180deg); }
.osg-geo-fq .gc details.q[open] .q-plus::after { transform: scaleY(0); }
.osg-geo-fq .gc details.q[open] .q-plus::before { background: #fff; }

.osg-geo-fq .q-text { font-size: .84rem; color: var(--text); font-weight: 600; }
.osg-geo-fq .q-tag,
.osg-geo-fq .q-int { justify-self: center; font-size: .7rem; font-weight: 700; text-align: center; border-radius: 4px; padding: 3px 8px; white-space: nowrap; }
.osg-geo-fq .q-tag { color: var(--text); background: #f3f5f7; }
.osg-geo-fq .q-int { color: var(--navy); background: #eaf0f6; }
.osg-geo-fq .q-emoji { margin-right: 5px; font-size: .8rem; }
.osg-geo-fq .q-body { padding: 4px 0 16px 28px; }
.osg-geo-fq .q-note { font-size: .72rem; color: var(--muted); margin: 9px 0 0; }

/* Domains je Frage */
.osg-geo-fq .qd-list { border: 1px solid var(--line); border-radius: 8px; }
.osg-geo-fq .qd,
.osg-geo-fq .qd-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) 70px 70px 70px 70px 80px 236px; gap: 10px; align-items: center; }
.osg-geo-fq .qd { padding: 8px 12px; border-bottom: 1px solid #f1f2f4; font-size: .82rem; }
.osg-geo-fq .qd:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }
.osg-geo-fq .qd > *:nth-child(n+3) { justify-self: center; text-align: center; }
.osg-geo-fq .qd > .pw-link,
.osg-geo-fq .qd > data { display: block; }
.osg-geo-fq .qd-head { padding: 6px 12px; font-size: .62rem; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 700; background: #f7f8fa; border-radius: 8px 8px 0 0; }
.osg-geo-fq .qd-head span { white-space: nowrap; letter-spacing: .3px; }
.osg-geo-fq .qd-head span:nth-child(n+3) { text-align: center; }
.osg-geo-fq .qd-rank { font-family: var(--mono); color: var(--muted); font-size: .76rem; }
.osg-geo-fq .qd > span:nth-child(2) { min-width: 0; }
.osg-geo-fq .qd-dom { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-family: var(--mono); font-size: .8rem; }
.osg-geo-fq a.qd-dom { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--blue); }
.osg-geo-fq a.qd-dom:hover { color: var(--blue); }
.osg-geo-fq .qd-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.osg-geo-fq .qd-line .qd-dom { min-width: 0; }
.osg-geo-fq .qd-tech { display: inline-flex; flex: none; align-items: center; gap: 4px; }
.osg-geo-fq .qd-tech-icon { display: block; width: 16px; height: 16px; }
.osg-geo-fq .qd-url { display: block; font-size: .7rem; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osg-geo-fq .qd-url a { color: var(--muted); text-decoration: none; }
.osg-geo-fq .qd-url a:hover { color: var(--blue); }

/* Badges 0–100 */
.osg-geo-fq .pw { display: inline-block; width: 44px; min-width: 0; font-family: var(--mono); font-size: .74rem; font-weight: 800; padding: 2px 0; border-radius: 4px; text-align: center; }
.osg-geo-fq .pw-g { background: #edf7f1; color: var(--g); }
.osg-geo-fq .pw-o { background: #fdf2e6; color: #b36f24; }
.osg-geo-fq .pw-r { background: #fdf0ee; color: var(--r); }
.osg-geo-fq .pw-n { background: #f0f2f4; color: #b2b8c0; }
.osg-geo-fq .pw-link { text-decoration: none; }
.osg-geo-fq .pw-link .pw { border-bottom: 1px dotted currentColor; cursor: pointer; }
.osg-geo-fq .pw-link:hover .pw { filter: brightness(.92); }

/* Ø Position und Chips */
.osg-geo-fq .gc-v { font-family: var(--mono); font-size: .8rem; color: var(--text); font-weight: 700; }
.osg-geo-fq .gc-v.v-g { color: var(--g); }
.osg-geo-fq .gc-v.v-o { color: var(--o); }
.osg-geo-fq .gc-v.v-r { color: var(--r); }
.osg-geo-fq .gc-v.v-n { color: #b2b8c0; }
.osg-geo-fq .gc-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.osg-geo-fq .gc-chips i { font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .2px; padding: 3px 6px; border-radius: 4px; background: #f0f2f4; color: #b2b8c0; white-space: nowrap; }
.osg-geo-fq .gc-chips i.on { background: #e4f3ea; color: var(--g); }
/* Position je KI-System: Tooltip am Chip (rechtsbündig, die Spalte steht am rechten Rand) */
.osg-geo-fq .gc-chips i[data-tip] { position: relative; cursor: help; }
.osg-geo-fq .gc-chips i[data-tip]:focus { outline: 2px solid #dbe5f0; outline-offset: 1px; }
.osg-geo-fq .gc-chips i[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: 220px; padding: 7px 10px; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 34px -14px rgba(19, 66, 105, .35); font-size: .72rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; text-align: left; white-space: normal; z-index: 30; }
.osg-geo-fq .gc-chips i[data-tip]:not(:hover):not(:focus)::after { display: none; }

/* Info-Tags: Erklärtexte nur hier, nicht im Markup */
.osg-geo-fq .info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; vertical-align: middle; border-radius: 50%; background: #dfe4ea; color: #5b6572; cursor: help; text-transform: none; letter-spacing: 0; }
.osg-geo-fq .info i { font-style: normal; font-family: Georgia, serif; font-size: .62rem; font-weight: 700; line-height: 1; }
.osg-geo-fq .info::after { content: ""; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: 250px; padding: 10px 12px; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 34px -14px rgba(19, 66, 105, .35); font-size: .74rem; font-weight: 500; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: 0; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 30; white-space: normal; }
.osg-geo-fq .info:not(:hover):not(:focus)::after { display: none; }
.osg-geo-fq .info:hover::after,
.osg-geo-fq .info:focus::after { opacity: 1; visibility: visible; }
.osg-geo-fq .info.i-auth::after { content: "Authority-Score: Wie viel Vertrauen eine Domain im Netz genießt, 0 bis 100. Starke Backlinks, Erwähnungen in Fachmedien und Empfehlungen anderer Seiten heben den Wert. KI-Systeme greifen bevorzugt auf Quellen mit hoher Autorität zurück. Klick auf den Wert öffnet den Backlink-Check."; }
.osg-geo-fq .info.i-tech::after { content: "Technik-Score: Wie leicht KI-Crawler und Suchmaschinen die Seite lesen können, 0 bis 100. Ladezeit, Crawlbarkeit, saubere Seitenstruktur und strukturierte Daten entscheiden hier."; }
.osg-geo-fq .info.i-cont::after { content: "Content-Score: Wie gut die Inhalte Fragen beantworten, 0 bis 100. Umfang und Tiefe der Texte, klare Antworten auf echte Userfragen, Aktualität und Zitierfähigkeit fließen ein."; }
.osg-geo-fq .info.i-geo::after { content: "GEO-Score: Die Gesamtnote für KI-Sichtbarkeit, 0 bis 100. Fasst Authority, Technik, Content und die Sichtbarkeit in KI-Antworten zu einem Wert zusammen. Ab 70 grün, unter 40 rot."; }
.osg-geo-fq .info.i-pos::after { content: "Ø Position: An welcher Stelle die Domain in der KI-Antwort steht, gemittelt über die KI-Systeme, die sie nennen. 1 heißt zuerst genannt. Die Position je System zeigt der Mauszeiger auf dem Chip."; }
.osg-geo-fq .info.i-ki::after { content: "Empfohlen von: Welche KI-Systeme diese Domain bei der Frage nennen. Grün heißt genannt, grau heißt nicht genannt."; }
.osg-geo-fq .qd-head span:last-child .info::after { left: auto; right: 0; transform: none; }

/* Mehr anzeigen */
.osg-geo-fq .gc-more { padding-top: 12px; border-top: 1px solid #f1f2f4; margin-top: 4px; text-align: center; }
.osg-geo-fq .fq-more { font: inherit; font-size: .8rem; font-weight: 700; color: var(--navy); background: #eaf0f6; border: none; border-radius: 6px; padding: 8px 18px; cursor: pointer; }
.osg-geo-fq .fq-more:hover { background: #dbe5f0; }
.osg-geo-fq .fq-more[disabled] { opacity: .6; cursor: wait; }

/* Legende und Quelle */
.osg-geo-fq .gc-legend { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; }
.osg-geo-fq .gc-legend__t { font-size: .7rem; letter-spacing: 1.1px; text-transform: uppercase; color: var(--navy); font-weight: 700; margin-bottom: 12px; }
.osg-geo-fq .gc-legend dl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 24px; margin: 0; }
.osg-geo-fq .gc-legend dt { font-size: .82rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.osg-geo-fq .gc-legend dd { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.osg-geo-fq .gc-cite { font-size: .85rem; color: var(--muted); margin-top: 14px; text-align: center; }
.osg-geo-fq .gc-cite a { color: var(--blue); font-weight: 700; text-decoration: none; border-bottom: 1px dotted var(--blue); }
.osg-geo-fq .gc-cite time { font-weight: 600; color: var(--text); }
.osg-geo-fq .gc-download { font-size: .85rem; color: var(--muted); margin-top: 6px; text-align: center; }
.osg-geo-fq .gc-download a { color: var(--blue); font-weight: 700; text-decoration: none; border-bottom: 1px dotted var(--blue); }

/* Responsive (Mockup: 1000 / 800 / 600 px) */
@media (max-width: 1000px) {
    /* Alle Spalten bleiben, die Domain-Tabelle scrollt waagerecht; Rang und Domain bleiben links stehen */
    /* width: 0 + min-width: 100%: die breite Tabelle zählt nicht zur Mindestbreite der Vorfahren. Sonst wächst
       z. B. eine Bootstrap-Spalte (.row > .col-sm-12, Flex) auf Tabellenbreite und nichts scrollt. */
    .osg-geo-fq .qd-list { width: 0; min-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .osg-geo-fq .qd,
    .osg-geo-fq .qd-head { grid-template-columns: 24px 180px 58px 58px 58px 58px 66px 210px; gap: 8px; width: max-content; min-width: 100%; box-sizing: border-box; }
    .osg-geo-fq .qd > .qd-rank,
    .osg-geo-fq .qd-head > span:nth-child(1) { position: sticky; left: 0; z-index: 2; background: inherit; align-self: stretch; display: flex; align-items: center; }
    .osg-geo-fq .qd > span:nth-child(2),
    .osg-geo-fq .qd-head > span:nth-child(2) { position: sticky; left: 24px; z-index: 2; margin-left: -8px; padding-left: 8px; background: inherit; align-self: stretch; display: flex; flex-direction: column; justify-content: center; box-shadow: 8px 0 8px -8px rgba(19, 66, 105, .25); }
    .osg-geo-fq .qd { background: #fff; }
    /* Tooltips würden im Scrollbereich abgeschnitten: Info-Texte stehen in der Legende, Chip-Tooltip links daneben */
    .osg-geo-fq .qd-head .info { display: none; }
    .osg-geo-fq .gc-chips i[data-tip]::after { right: calc(100% + 6px); bottom: auto; top: 50%; transform: translateY(-50%); max-width: none; white-space: nowrap; }
}
@media (max-width: 800px) {
    .osg-geo-fq__headline { font-size: 2rem; }
    .osg-geo-fq .fq-head,
    .osg-geo-fq .gc.fq details.q summary { grid-template-columns: 24px minmax(0, 1fr) 120px; }
    /* User Intent wandert unter die Branche (Spalte 3, zweite Zeile) */
    .osg-geo-fq .fq-head span:nth-child(4) { display: none; }
    .osg-geo-fq .fq-head span:nth-child(3)::after { content: " / Intent"; }
    .osg-geo-fq .gc.fq details.q summary { row-gap: 4px; }
    .osg-geo-fq .gc.fq details.q summary .q-plus,
    .osg-geo-fq .gc.fq details.q summary .q-text { grid-row: 1 / span 2; }
    .osg-geo-fq .gc.fq details.q summary .q-tag { grid-column: 3; grid-row: 1; align-self: end; }
    .osg-geo-fq .gc.fq details.q summary .q-int { grid-column: 3; grid-row: 2; align-self: start; }
    .osg-geo-fq .q-tag,
    .osg-geo-fq .q-int { max-width: 100%; box-sizing: border-box; white-space: normal; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
    .osg-geo-fq .q-body { padding-left: 0; }
    .osg-geo-fq .gc-legend dl { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .osg-geo-fq .gc-col--full { padding: 10px 12px; }
    .osg-geo-fq .qd,
    .osg-geo-fq .qd-head { grid-template-columns: 22px 124px 52px 52px 52px 52px 62px 210px; padding-left: 8px; padding-right: 8px; }
    .osg-geo-fq .qd > span:nth-child(2),
    .osg-geo-fq .qd-head > span:nth-child(2) { left: 22px; }
    .osg-geo-fq .qd-head { font-size: .58rem; letter-spacing: .2px; }
}