.analytics{display:grid;gap:16px}
/* Rasterkinder duerfen unter ihre Inhaltsbreite schrumpfen, sonst sprengen
   lange Domains und URLs die Seite auf schmalen Geraeten. */
.analytics>*{min-width:0}
.analytics-head>div,.analytics-source-head>div{min-width:0}
.analytics-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;padding:20px 22px;background:#fff;border:1px solid #e4e4e1;border-radius:14px}
.analytics-head h2{margin-top:3px;font:600 clamp(20px,5vw,24px)/1.15 "Space Grotesk",sans-serif;overflow-wrap:anywhere}
.analytics-subline{margin-top:6px;color:#777;font-size:13px;overflow-wrap:anywhere}
.analytics-actions{display:flex;flex-wrap:wrap;gap:8px}
.analytics-actions .btn-primary,.analytics-actions .btn-secondary{padding:10px 15px;font-size:13px;border:1px solid #dededb;cursor:pointer}
.analytics-actions .btn-primary{border-color:#ff6400}
.analytics-actions .btn-primary:disabled{opacity:.55;cursor:wait;transform:none}
.analytics-actions .btn-secondary{background:#fff;color:#000}
.analytics-actions .btn-secondary:hover{border-color:#bbb}

.analytics-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:10px}
.analytics-kpi{padding:16px 18px;background:#fff;border:1px solid #e4e4e1;border-top:3px solid #000;border-radius:12px}
.analytics-kpi.tone-up{border-top-color:#22a652}
.analytics-kpi.tone-down{border-top-color:#d1341f}
.analytics-kpi.tone-neutral{border-top-color:#ff6400}
.analytics-kpi-label{display:block;color:#888;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.analytics-kpi strong{display:block;margin-top:8px;font:600 25px/1.1 "Space Grotesk",sans-serif;color:#000}
.analytics-kpi-meta{display:block;margin-top:6px;color:#777;font-size:11px;line-height:1.45}
.analytics-kpi-meta em{font-style:normal;font-weight:700;color:#444}
.analytics-kpi.tone-up .analytics-kpi-meta em{color:#19733a}
.analytics-kpi.tone-down .analytics-kpi-meta em{color:#b42318}
.analytics-kpis-inline{margin-top:16px}
.analytics-kpis-inline .analytics-kpi{background:#fafaf8}

.analytics-source{padding:20px 22px;background:#fff;border:1px solid #e4e4e1;border-radius:14px}
.analytics-source-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.analytics-source-head h3{font:600 18px/1.2 "Space Grotesk",sans-serif}
.analytics-source-head p{margin-top:4px;color:#888;font-size:12px}
.analytics-link{color:#b74600;font-size:13px;font-weight:700}
.analytics-link:hover{color:#ff6400}
.analytics-note{margin-top:12px;padding:10px 12px;border:1px solid #ffd8c1;border-radius:8px;background:#fff8f3;color:#7a4a20;font-size:12px;line-height:1.5}

.analytics-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px;margin-top:18px}
.analytics-chart{min-width:0;padding:14px 16px 16px;border:1px solid #ecece9;border-radius:12px;background:#fff}
.analytics-chart-wide{grid-column:1/-1}
.analytics-chart figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font:600 13px/1.35 "Space Grotesk",sans-serif;color:#000}
.analytics-chart-tools{display:flex;gap:6px;flex:none}
.analytics-chart-tools a,.analytics-chart-tools button{padding:4px 9px;border:1px solid #dededb;border-radius:6px;background:#fff;color:#666;font:700 10px/1.6 Roboto,sans-serif;letter-spacing:.04em;cursor:pointer}
.analytics-chart-tools a:hover,.analytics-chart-tools button:hover{border-color:#ff6400;color:#b74600}
/* Chart.js liest die Containerbreite. Ohne min-width:0 haelt das Raster die
   Standardbreite des Canvas von 300 Pixeln und die Karte laeuft ueber. */
.analytics-canvas{position:relative;min-width:0;height:260px}
.analytics-canvas>canvas{max-width:100%}
.analytics-chart-wide .analytics-canvas{height:300px}

.analytics-history .analytics-chart-tools{justify-content:flex-end;margin-bottom:10px}
.analytics-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.analytics-tabs button{padding:6px 11px;border:1px solid #e4e4e1;border-radius:99px;background:#fafaf8;color:#666;font:600 11px/1.3 "Space Grotesk",sans-serif;cursor:pointer}
.analytics-tabs button:hover{border-color:#ff6400;color:#b74600}
.analytics-tabs button.active{border-color:#ff6400;background:#fff3ec;color:#b74600}

.analytics-tag{display:inline-block;margin-right:7px;padding:2px 7px;border-radius:99px;font:700 10px/1.5 Roboto,sans-serif;letter-spacing:.03em;vertical-align:1px;white-space:nowrap}
.analytics-tag.tone-error{background:#fdecea;color:#b42318}
.analytics-tag.tone-warning{background:#fff2dc;color:#8b5a0b}
.analytics-tag.tone-notice{background:#eef1f5;color:#4a5566}
.analytics-tag.tone-ok{background:#e8f7ed;color:#19733a}

.analytics-table{margin-top:14px;border:1px solid #ecece9;border-radius:12px;background:#fafaf8;overflow:hidden}
.analytics-table summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;cursor:pointer;font:600 13px/1.3 "Space Grotesk",sans-serif;color:#000}
.analytics-table summary span{color:#888;font-family:Roboto,sans-serif;font-size:11px;font-weight:400}
.analytics-table summary .analytics-table-title{display:flex;align-items:center;min-width:0;color:#000;font:inherit}
.analytics-table-actions{padding:0 16px 10px}
.analytics-table-actions a{color:#b74600;font-size:12px;font-weight:700}
.analytics-table-scroll{max-height:460px;overflow:auto;border-top:1px solid #ecece9;background:#fff}
.analytics-table table{width:100%;border-collapse:collapse;font-size:12px}
.analytics-table th{position:sticky;top:0;padding:9px 12px;background:#f4f4f1;border-bottom:1px solid #e4e4e1;color:#555;font:700 11px/1.3 "Space Grotesk",sans-serif;text-align:left;white-space:nowrap}
.analytics-table td{padding:8px 12px;border-bottom:1px solid #f1f1ee;color:#444;vertical-align:top;overflow-wrap:anywhere}
.analytics-table td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.analytics-table td a{color:#d94f00}
.analytics-table .analytics-note{margin:10px 16px 14px}

.analytics-empty{padding:44px 24px;text-align:center;background:#fff;border:1px dashed #ccc;border-radius:14px}
.analytics-empty h3{font:600 17px/1.3 "Space Grotesk",sans-serif}
.analytics-empty p{max-width:520px;margin:8px auto 0;color:#777;font-size:13px;line-height:1.6}
.analytics-footnote{color:#999;font-size:11px}

@media(max-width:760px){
.analytics-head{align-items:stretch;flex-direction:column;padding:18px 16px}
.analytics-actions{flex-direction:column}
.analytics-actions .btn-primary,.analytics-actions .btn-secondary{width:100%;min-height:46px;text-align:center}
.analytics-source{padding:18px 16px}
.analytics-charts{grid-template-columns:1fr}
.analytics-canvas,.analytics-chart-wide .analytics-canvas{height:240px}
/* Alles Antippbare bekommt ein Ziel von mindestens 44 Pixeln. */
.analytics-link{display:inline-flex;align-items:center;min-height:44px}
.analytics-chart figcaption{gap:8px}
.analytics-chart-tools a,.analytics-chart-tools button{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:40px;padding:0 12px;font-size:11px}
.analytics-tabs{gap:8px}
.analytics-tabs button{min-height:40px;padding:0 14px;font-size:12px}
.analytics-table summary{min-height:52px;padding:14px 16px}
.analytics-table-actions{padding:0 16px 12px}
.analytics-table-actions a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
.analytics-periods{width:100%}
.analytics-periods button{flex:1 1 auto;min-height:42px}
.analytics-channels button{min-height:40px}
.impact-item{padding:15px 14px}
}

/* Sehr schmale Geraete: Kennzahlen und Diagramme bleiben einspaltig und
   ruecken naeher an den Rand, damit der Inhalt Platz behaelt. */
@media(max-width:400px){
.analytics-head,.analytics-source{padding:16px 13px}
.analytics-kpi{padding:14px 14px}
.analytics-kpi strong{font-size:22px}
.analytics-chart{padding:12px 11px 14px}
.analytics-table summary{padding:14px 13px}
.analytics-table th,.analytics-table td{padding:8px 10px}
}

@media print{
@page{size:A4;margin:14mm}
body{background:#fff}
.app-sidebar,.app-nav,.app-profile,.app-menu-toggle,.analytics-actions,.portal-nav,.portal-logout,header.h-16,.analytics-chart-tools,.analytics-table-actions{display:none!important}
.app-shell{display:block!important}
.analytics-source,.analytics-chart,.analytics-kpi,.analytics-head{break-inside:avoid;box-shadow:none}
.analytics-table{break-inside:auto}
.analytics-table[open] .analytics-table-scroll,.analytics-table-scroll{max-height:none;overflow:visible}
.analytics-canvas,.analytics-chart-wide .analytics-canvas{height:210px}
.analytics-charts{grid-template-columns:1fr 1fr}
.analytics-chart-wide{grid-column:1/-1}
a[href]:after{content:""}
}

.impact-list{display:grid;gap:10px;margin-top:18px}
.impact-item{padding:15px 17px;border:1px solid #ecece9;border-left:4px solid #bbb;border-radius:10px;background:#fafaf8}
.impact-item.tone-improved{border-left-color:#22a652}
.impact-item.tone-declined{border-left-color:#d1341f}
.impact-item.tone-unchanged{border-left-color:#ff6400}
.impact-item.tone-inconclusive,.impact-item.tone-pending{border-left-color:#bbb}
.impact-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.impact-item-head h4{flex:1;min-width:220px;font:600 15px/1.35 "Space Grotesk",sans-serif;color:#000}
.impact-verdict{padding:4px 8px;border-radius:5px;background:#ececea;color:#555;font:700 11px/1.4 Roboto,sans-serif;white-space:nowrap}
.impact-item.tone-improved .impact-verdict{background:#e8f7ed;color:#19733a}
.impact-item.tone-declined .impact-verdict{background:#fdecea;color:#b42318}
.impact-item.tone-unchanged .impact-verdict{background:#fff2dc;color:#8b5a0b}
.impact-age{color:#888;font-size:11px;white-space:nowrap}
.impact-summary{margin-top:9px;color:#555;font-size:13px;line-height:1.55}
.impact-metrics{display:grid;gap:5px;margin:12px 0 0;padding:0;list-style:none}
.impact-metrics li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:7px;background:#fff;border:1px solid #f1f1ee;font-size:12px}
.impact-metric-label{color:#444;font-weight:600}
.impact-metric-label small{display:block;margin-top:2px;color:#999;font-size:10px;font-weight:400}
.impact-metric-values{color:#777;font-variant-numeric:tabular-nums;white-space:nowrap}
.impact-metric-values strong{color:#000}
.impact-metric-values em{margin-left:6px;font-style:normal;font-weight:700;color:#666}
.impact-metrics li.tone-up .impact-metric-values em{color:#19733a}
.impact-metrics li.tone-down .impact-metric-values em{color:#b42318}
@media(max-width:760px){.impact-item-head h4{min-width:0}.impact-metrics li{flex-direction:column;align-items:flex-start}}
@media print{.impact-item{break-inside:avoid}}

/* Zeitraumauswahl der Search-Console-Ansicht, analog zur Segmentleiste im Tool. */
.analytics-periods{display:flex;flex-wrap:wrap;gap:2px;background:var(--paper,#f5f5f3);border:1px solid var(--line,#e5e5e0);border-radius:10px;padding:2px}
.analytics-periods button{border:0;background:transparent;padding:6px 10px;border-radius:8px;font:inherit;font-size:12px;color:var(--muted,#5b6169);cursor:pointer;white-space:nowrap}
.analytics-periods button:hover{background:#fff;color:#111}
.analytics-periods button.active{background:#fff;color:#111;font-weight:600;box-shadow:0 1px 2px rgba(23,35,41,.08)}
@media print{.analytics-periods{display:none}}

/* Kanalreiter (Metricool): Übersicht und je Netzwerk ein Reiter mit Netzwerkfarbe. */
.analytics-channels{display:flex;gap:6px;margin:4px 0 14px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.analytics-channels button{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;border:1px solid var(--line,#e5e5e0);background:#fff;border-radius:999px;padding:6px 13px;font:inherit;font-size:12px;color:var(--muted,#5b6169);cursor:pointer;white-space:nowrap}
.analytics-channels button small{font-size:11px;color:var(--muted,#8a8f98)}
.analytics-channels button:hover{color:#111;border-color:#c9c9c4}
.analytics-channels button.active{color:#111;font-weight:600;border-color:var(--channel-color,#111);box-shadow:inset 0 -3px 0 var(--channel-color,#111)}
.analytics-channel-dot{width:9px;height:9px;border-radius:50%;background:var(--channel-color,#96A3AC);flex:0 0 auto}
@media print{.analytics-channels{display:none}}

/* Aufbau der Datenansicht (nur interne Konten). Ausgeblendete Elemente liegen
   für interne Konten im HTML und erscheinen nur im Bearbeitungsmodus. */
.analytics-sections{display:grid;gap:16px}
.analytics-sections>*,.analytics-tables>*{min-width:0}
.analytics:not(.is-layout-editing) [data-layout-hidden]{display:none!important}
.analytics-layout-bar{position:sticky;top:12px;z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border:1px solid #ffc9a6;border-radius:14px;background:#fff8f3;box-shadow:0 8px 24px rgba(23,35,41,.1)}
.analytics-layout-bar p{flex:1 1 320px;margin:0;color:#6b3d17;font-size:13px;line-height:1.5}
.analytics-layout-bar p strong{color:#000}
.analytics-layout-bar-actions{display:flex;flex-wrap:wrap;gap:8px}
.analytics-layout-bar-actions button{padding:9px 14px;font-size:13px;border:1px solid #dededb;cursor:pointer}
.analytics-layout-bar-actions .btn-primary{border-color:#ff6400}
.analytics-layout-bar-actions .btn-primary:disabled{opacity:.55;cursor:wait}
.is-layout-editing [data-layout-section],.is-layout-editing [data-layout-item]{outline:1px dashed #d6d6d2;outline-offset:3px}
.is-layout-editing [data-layout-hidden]{opacity:.42;outline-color:#bbb}
.is-layout-editing [data-layout-hidden]:hover{opacity:.7}
.is-layout-editing .is-dragging{opacity:.9;outline:2px solid #ff6400;box-shadow:0 12px 30px rgba(23,35,41,.18)}
body.layout-dragging{cursor:grabbing;user-select:none}
.layout-controls{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.layout-controls-section{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #f0e3da}
.layout-label{flex:1;min-width:0;color:#888;font:600 11px/1.3 Roboto,sans-serif;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layout-handle,.layout-toggle{padding:4px 9px;border:1px solid #dededb;border-radius:6px;background:#fff;color:#555;font:700 11px/1.5 Roboto,sans-serif;cursor:pointer}
.layout-handle{cursor:grab;touch-action:none;font-size:14px;line-height:1.2}
.layout-handle:active{cursor:grabbing}
.layout-handle:hover,.layout-toggle:hover,.layout-handle:focus-visible,.layout-toggle:focus-visible{border-color:#ff6400;color:#b74600}
.layout-toggle.is-off{background:#fff3ec;border-color:#ffc9a6;color:#b74600}
.analytics-table summary .layout-controls{margin:0 8px 0 0;flex:none}
@media(max-width:760px){
.analytics-layout-bar{top:8px;padding:12px 14px}
.analytics-layout-bar-actions{width:100%;flex-direction:column}
.analytics-layout-bar-actions button{width:100%;min-height:44px}
.layout-handle,.layout-toggle{min-height:36px;min-width:40px}
}
@media print{.analytics-layout-bar,.layout-controls{display:none!important}[data-layout-hidden]{display:none!important}}
.analytics-layout-note{margin-top:0}
.analytics.is-layout-editing .analytics-layout-note{display:none}
@media print{.analytics-layout-note{display:none}}
/* Der PDF-Export folgt dem gespeicherten Aufbau. Während der Bearbeitung
   entfällt der Button, damit kein ungespeicherter Zwischenstand gedruckt wird. */
.analytics.is-layout-editing .analytics-actions{display:none}
@media print{
.is-layout-editing [data-layout-section],.is-layout-editing [data-layout-item]{outline:none!important;opacity:1!important;box-shadow:none!important}
.analytics-table summary{cursor:default}
}

/* Vorlagen je Kundentyp in der Bearbeitungsleiste. */
.analytics-layout-origin{margin:0;color:#888;font-size:12px}
.analytics-layout-templates{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-basis:100%;padding-top:12px;border-top:1px solid #f3d6c3}
.analytics-layout-templates label{color:#6b3d17;font-size:12px;font-weight:700}
.analytics-layout-templates select{min-width:220px;max-width:100%;padding:8px 10px;border:1px solid #dededb;border-radius:8px;background:#fff;font:inherit;font-size:13px}
.analytics-layout-templates button{padding:8px 12px;font-size:12px;border:1px solid #dededb;cursor:pointer}
.analytics-layout-templates .layout-danger:hover{border-color:#b42318;color:#b42318}
@media(max-width:760px){
.analytics-layout-templates{flex-direction:column;align-items:stretch}
.analytics-layout-templates select,.analytics-layout-templates button{width:100%;min-height:44px}
}
@media print{.analytics-layout-origin{display:none}}
.analytics-layout-hint{color:#8a6a55;font-size:12px}

.analytics-chart-hint{display:block;margin-top:2px;font-size:11px;font-weight:400;color:#8a8f98}
.analytics-chart-ranges{display:inline-flex;margin:0 0 10px}
@media print{.analytics-chart-ranges{display:none}}

/* Interne Hinweise (Kontonummern, Abfragefehler, Datenbestand): nur im Studio, sichtbar als intern markiert. */
.analytics-note.is-internal{border-color:#e4e4e1;background:#f7f7f5;color:#555}.analytics-note.is-internal>span{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:4px;background:#e8e8e4;color:#444;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* Kacheln als Schalter der Linien im Hauptchart (wie Search Console). */
.analytics-kpi.is-toggle{cursor:pointer}
.analytics-kpi.is-toggle.is-on{background:color-mix(in srgb,var(--metric-color,#1a73e8) 7%,#fff)}
/* Der Akzent oben (studio-ui.css :before) trägt bei aktiven Schaltern die Linienfarbe. */
.analytics-kpis .analytics-kpi.is-toggle:not(.is-on):before{background:#e4e4e1}
.analytics-kpi.is-toggle.is-on:before{height:4px;background:var(--metric-color,#1a73e8)}
.analytics-kpi.is-toggle:focus-visible{outline:2px solid var(--metric-color,#1a73e8);outline-offset:2px}
/* Tabellen als Reiter; im Bearbeitungsmodus und im Druck untereinander. */
.analytics-table-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid #e4e4e1;margin-bottom:8px}
.analytics-table-tabs button{padding:8px 14px;border:0;border-bottom:3px solid transparent;background:none;color:#5b6169;font:600 13px/1.2 inherit;cursor:pointer}
.analytics-table-tabs button.active{border-bottom-color:#1a73e8;color:#000}
.analytics:not(.is-layout-editing) .analytics-tables.has-tabs>details.analytics-table:not(.is-tab-active){display:none}
.analytics:not(.is-layout-editing) .analytics-tables.has-tabs>details.analytics-table>summary{display:none}
.is-layout-editing .analytics-table-tabs{display:none}
@media print{.analytics-table-tabs{display:none}.analytics .analytics-tables.has-tabs>details.analytics-table{display:block!important}.analytics .analytics-tables.has-tabs>details.analytics-table>summary{display:list-item!important}}
/* Nebenkennzahlen (z. B. Klicks, CTR, Ø CPC bei Google Ads) kleiner als die Kernkacheln. */
.analytics-kpi.is-secondary{padding:10px 14px}
.analytics-kpis .analytics-kpi.is-secondary strong{font-size:1.15rem}
/* Kopfzeile mit je einer Kernzahl pro Quelle; Sprung zum Abschnitt. */
.analytics-headline{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:16px 0 4px}
.analytics-headline-item{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid #e4e4e1;border-radius:12px;background:#fff;color:inherit;text-decoration:none}
.analytics-headline-item:hover{border-color:#bbb}
.analytics-headline-item span{color:#6b7078;font-size:11px;font-weight:600}
.analytics-headline-item strong{font-size:1.35rem;color:#111}
.analytics-headline-item em{font-style:normal;font-size:12px;color:#6b7078}
.analytics-headline-item.tone-up em{color:#19733a}.analytics-headline-item.tone-down em{color:#b42318}
.is-layout-editing .analytics-headline{display:none}

/* Beste Posting-Zeiten: Raster Wochentag × Stunde. Die Farbstärke steht in
   --heat (0 bis 1, relativ zum besten Feld). Auf schmalen Geräten scrollt nur
   das Raster, nicht die Seite. */
.analytics-heatmap-scroll{overflow-x:auto}
.analytics-heatmap table{width:100%;min-width:560px;border-collapse:separate;border-spacing:2px;table-layout:fixed}
.analytics-heatmap th{padding:2px 0;color:#888;font:600 10px/1.2 Roboto,sans-serif;text-align:center}
.analytics-heatmap tbody th{width:28px;text-align:left;color:#555}
.analytics-heatmap td{height:22px;border-radius:3px;background:color-mix(in srgb,#ff6400 calc(var(--heat,0)*100%),#f4f4f1)}
.analytics-heatmap .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){.analytics-heatmap td{height:26px}}
@media print{.analytics-heatmap-scroll{overflow:visible}.analytics-heatmap td{-webkit-print-color-adjust:exact;print-color-adjust:exact}}