/**
 * SeoGoal Accessibility – Frontend Styles (v1.2)
 * Neues, ruhigeres Karten-Design mit Icon-Chips, gleichmäßigen Abständen
 * und robustem Theme-Schutz.
 */

/* ---- OpenDyslexic ---- */
@font-face { font-family:'OpenDyslexic'; src:url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'OpenDyslexic'; src:url('../fonts/OpenDyslexic-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
	--sga-accent:#1a56db;
	--sga-accent-soft:rgba(26,86,219,0.10);
	--sga-accent-strong:#143fa8;
	--sga-btn-size:60px;
	--sga-bg:#f6f7fb;
	--sga-card:#ffffff;
	--sga-fg:#1f2430;
	--sga-muted:#71757f;
	--sga-border:#e8eaf0;
	--sga-radius:16px;
	--sga-shadow:0 18px 50px rgba(20,28,46,0.22);
	--sga-shadow-sm:0 1px 2px rgba(20,28,46,0.05);
	--sga-z:2147483000;
	/* Kachel-Tokens */
	--sga-chip:46px;
	--sga-tile-icon:23px;
	--sga-tile-min:98px;
	--sga-tile-font:12.5px;
	--sga-tile-pad:14px 8px;
	--sga-gap:10px;
}

/* ---- Trigger ---- */
.sga-trigger {
	position:fixed; z-index:var(--sga-z);
	width:var(--sga-btn-size); height:var(--sga-btn-size);
	border-radius:50%; border:none;
	background:linear-gradient(145deg, var(--sga-accent), var(--sga-accent-strong));
	color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
	box-shadow:0 8px 24px rgba(26,86,219,0.45); padding:0; transition:transform .18s ease, box-shadow .18s ease;
}
.sga-trigger:hover { transform:scale(1.07); box-shadow:0 12px 30px rgba(26,86,219,0.55); }
.sga-trigger:focus-visible { outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px var(--sga-accent); }
.sga-trigger svg { width:56%; height:56%; fill:currentColor; }

.sga-pos-bottom-right{bottom:20px;right:20px;} .sga-pos-bottom-left{bottom:20px;left:20px;}
.sga-pos-top-right{top:20px;right:20px;} .sga-pos-top-left{top:20px;left:20px;}
.sga-pos-middle-right{top:50%;right:20px;transform:translateY(-50%);} .sga-pos-middle-left{top:50%;left:20px;transform:translateY(-50%);}
.sga-pos-middle-right:hover,.sga-pos-middle-left:hover{transform:translateY(-50%) scale(1.07);}

/* ---- Panel ---- */
.sga-panel {
	position:fixed; z-index:var(--sga-z);
	width:380px; max-width:calc(100vw - 28px); max-height:calc(100vh - 110px);
	background:var(--sga-bg); color:var(--sga-fg);
	border-radius:var(--sga-radius); box-shadow:var(--sga-shadow);
	overflow:hidden; display:flex; flex-direction:column;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:14px; line-height:1.45;
	opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
	transition:opacity .22s ease, transform .22s ease;
}
.sga-panel.sga-open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.sga-panel.sga-oversize { width:468px; --sga-chip:58px; --sga-tile-icon:29px; --sga-tile-min:122px; --sga-tile-font:14px; --sga-tile-pad:18px 10px; --sga-gap:12px; }

.sga-panel-bottom-right{bottom:calc(20px + var(--sga-btn-size) + 14px);right:20px;}
.sga-panel-bottom-left{bottom:calc(20px + var(--sga-btn-size) + 14px);left:20px;}
.sga-panel-top-right{top:calc(20px + var(--sga-btn-size) + 14px);right:20px;}
.sga-panel-top-left{top:calc(20px + var(--sga-btn-size) + 14px);left:20px;}
.sga-panel-middle-right{top:50%;right:calc(20px + var(--sga-btn-size) + 14px);transform:translateY(-50%);}
.sga-panel-middle-left{top:50%;left:calc(20px + var(--sga-btn-size) + 14px);transform:translateY(-50%);}
.sga-panel-middle-right.sga-open,.sga-panel-middle-left.sga-open{transform:translateY(-50%);}

/* Header */
.sga-header {
	display:flex; align-items:center; justify-content:space-between;
	padding:16px 18px; background:linear-gradient(135deg, var(--sga-accent), var(--sga-accent-strong));
	color:#fff; flex-shrink:0;
}
.sga-header h2 { margin:0; font-size:17px; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.sga-header-actions { display:flex; gap:8px; }
.sga-icon-btn {
	background:rgba(255,255,255,0.18); border:none; color:#fff;
	width:36px; height:36px; border-radius:10px; cursor:pointer;
	display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.sga-icon-btn:hover { background:rgba(255,255,255,0.32); }
.sga-icon-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Body */
.sga-body { overflow-y:auto; overflow-x:hidden; padding:16px; flex:1; }

/* Sprachauswahl + Profil-Kopf: gemeinsame Pillen-Optik */
.sga-pill {
	width:100%; display:flex; align-items:center; gap:11px;
	background:var(--sga-card); border:1px solid var(--sga-border);
	border-radius:12px; padding:12px 14px; cursor:pointer;
	font-size:14px; font-weight:600; color:var(--sga-fg);
	box-shadow:var(--sga-shadow-sm); transition:border-color .15s ease, box-shadow .15s ease;
}
.sga-pill:hover { border-color:var(--sga-accent); box-shadow:0 3px 10px rgba(26,86,219,0.10); }
.sga-pill:focus-visible { outline:3px solid var(--sga-accent); outline-offset:2px; }
.sga-pill .sga-chev { margin-left:auto; transition:transform .18s ease; }

.sga-lang { position:relative; margin-bottom:12px; }
.sga-lang-btn { } /* nutzt .sga-pill */
.sga-lang.sga-lang-open .sga-chev { transform:rotate(180deg); }
.sga-lang-list {
	display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
	background:#fff; border:1px solid var(--sga-border); border-radius:12px;
	box-shadow:var(--sga-shadow); z-index:5; max-height:250px; overflow-y:auto; padding:6px;
}
.sga-lang.sga-lang-open .sga-lang-list { display:block; }
.sga-lang-list button {
	display:block; width:100%; text-align:left; background:none; border:none;
	padding:10px 12px; cursor:pointer; font-size:14px; color:var(--sga-fg); border-radius:8px;
}
.sga-lang-list button:hover { background:var(--sga-accent-soft); }
.sga-lang-list button[aria-selected="true"] { background:var(--sga-accent); color:#fff; font-weight:700; }

/* Klappbare Profile */
.sga-collapse { margin-bottom:14px; }
.sga-collapse-head { } /* nutzt .sga-pill, margin via wrapper */
.sga-collapse.sga-coll-open .sga-collapse-head .sga-chev { transform:rotate(180deg); }
.sga-collapse-body { display:none; padding-top:10px; }
.sga-collapse.sga-coll-open .sga-collapse-body { display:block; }

/* Oversize-Schalter */
.sga-switch-row {
	display:flex; align-items:center; gap:11px;
	padding:6px 2px 14px; margin-bottom:14px; border-bottom:1px solid var(--sga-border);
}
.sga-switch-row .sga-switch-label { font-weight:600; font-size:14px; }
.sga-switch-row .sga-xl {
	font-weight:800; font-size:12px; color:var(--sga-accent);
	background:var(--sga-accent-soft); border-radius:6px; padding:3px 7px;
}
.sga-switch { margin-left:auto; position:relative; width:48px; height:27px; background:#cfd4de; border-radius:14px; border:none; cursor:pointer; transition:background .18s ease; flex:0 0 auto; }
.sga-switch::after { content:''; position:absolute; top:3px; left:3px; width:21px; height:21px; background:#fff; border-radius:50%; transition:transform .18s ease; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.sga-switch[aria-checked="true"] { background:var(--sga-accent); }
.sga-switch[aria-checked="true"]::after { transform:translateX(21px); }
.sga-switch:focus-visible { outline:3px solid var(--sga-accent); outline-offset:2px; }

/* Raster */
.sga-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sga-gap); width:100%; max-width:100%; }
.sga-grid-2 { grid-template-columns:repeat(2,1fr); }

/* Karte / Kachel */
.sga-tile {
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
	padding:var(--sga-tile-pad); border:1px solid var(--sga-border); border-radius:14px;
	background:var(--sga-card); color:var(--sga-fg); cursor:pointer;
	font-size:var(--sga-tile-font); font-weight:600; text-align:center;
	min-height:var(--sga-tile-min); box-shadow:var(--sga-shadow-sm); min-width:0; max-width:100%;
	transition:border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .08s ease;
}
.sga-tile:hover { border-color:var(--sga-accent); box-shadow:0 4px 14px rgba(26,86,219,0.12); }
.sga-tile:focus-visible { outline:3px solid var(--sga-accent); outline-offset:2px; }
.sga-tile:active { transform:scale(0.96); }

/* Icon-Chip */
.sga-ic {
	display:flex; align-items:center; justify-content:center;
	width:var(--sga-chip); height:var(--sga-chip); border-radius:50%;
	background:var(--sga-accent-soft); flex:0 0 auto; overflow:hidden;
}
.sga-tile .sga-label { display:block; line-height:1.25; hyphens:none; overflow-wrap:break-word; word-break:normal; max-width:100%; }

/* Aktiv-Zustand */
.sga-tile[aria-pressed="true"], .sga-tile.sga-tile-active {
	border-color:var(--sga-accent); background:var(--sga-accent); color:#fff;
	box-shadow:0 8px 20px rgba(26,86,219,0.30);
}
.sga-tile[aria-pressed="true"] .sga-ic, .sga-tile.sga-tile-active .sga-ic { background:rgba(255,255,255,0.22); }

/* Stufen-Punkte (immer direkt unter dem Label) */
.sga-dots { display:flex; gap:5px; }
.sga-dots i { width:6px; height:6px; border-radius:50%; background:var(--sga-border); display:block; transition:background .12s ease; }
.sga-dots i.on { background:var(--sga-accent); }
.sga-tile.sga-tile-active .sga-dots i { background:rgba(255,255,255,0.35); }
.sga-tile.sga-tile-active .sga-dots i.on { background:#fff; }

/* Footer */
.sga-footer {
	padding:13px 16px; border-top:1px solid var(--sga-border); background:var(--sga-card);
	display:flex; align-items:center; justify-content:space-between; gap:8px;
	font-size:12px; color:var(--sga-muted); flex-shrink:0;
}
.sga-footer a { color:var(--sga-accent); text-decoration:none; font-weight:600; }
.sga-footer a:hover { text-decoration:underline; }

/* ====================================================== */
/* Effekte auf der Ziel-Website                           */
/* ====================================================== */
html.sga-high-contrast body { background:#000 !important; }
html.sga-high-contrast body * { background-color:#000 !important; color:#ff0 !important; border-color:#ff0 !important; }
html.sga-high-contrast a, html.sga-high-contrast a * { color:#0ff !important; }
html.sga-high-contrast img { filter:none !important; }
html.sga-dark body { background:#0f172a !important; }
html.sga-dark body *:not(.sga-trigger):not(.sga-panel):not(.sga-panel *) { background-color:#0f172a !important; color:#e2e8f0 !important; border-color:#334155 !important; }
html.sga-dark a:not(.sga-panel a) { color:#7dd3fc !important; }
html.sga-light body { background:#fff !important; }
html.sga-light body *:not(.sga-trigger):not(.sga-panel):not(.sga-panel *) { background-color:#fff !important; color:#111 !important; }
html.sga-invert { filter:invert(1) hue-rotate(180deg); }
html.sga-invert .sga-trigger, html.sga-invert .sga-panel { filter:invert(1) hue-rotate(180deg); }
html.sga-readable-font body *:not(.sga-panel):not(.sga-panel *):not(.sga-trigger):not(.sga-trigger *) { font-family:'OpenDyslexic',Verdana,Tahoma,sans-serif !important; letter-spacing:0.03em !important; }
html.sga-align-left body p, html.sga-align-left body li, html.sga-align-left body td { text-align:left !important; }
html.sga-highlight-links a:not(.sga-panel a) { outline:2px solid #ff7a00 !important; background:#fff3e0 !important; color:#7a3b00 !important; text-decoration:underline !important; }
html.sga-highlight-titles h1, html.sga-highlight-titles h2, html.sga-highlight-titles h3, html.sga-highlight-titles h4, html.sga-highlight-titles h5, html.sga-highlight-titles h6 { outline:2px dashed var(--sga-accent) !important; background:rgba(26,86,219,0.08) !important; }
html.sga-big-cursor, html.sga-big-cursor * { cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="black" stroke="white" stroke-width="1" d="M4 2l16 8-7 2-3 7z"/></svg>') 4 4, auto !important; }
html.sga-stop-animations *, html.sga-stop-animations *::before, html.sga-stop-animations *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
html.sga-hide-images img:not(.sga-panel img), html.sga-hide-images picture, html.sga-hide-images video, html.sga-hide-images svg:not(.sga-trigger svg):not(.sga-panel svg) { visibility:hidden !important; }
.sga-mask-overlay { position:fixed; left:0; right:0; background:rgba(0,0,0,0.78); z-index:calc(var(--sga-z) - 2); pointer-events:none; }
#sga-mask-top{top:0;} #sga-mask-bottom{bottom:0;}
#sga-guide { position:fixed; left:0; right:0; height:28px; background:rgba(26,86,219,0.25); border-top:2px solid var(--sga-accent); border-bottom:2px solid var(--sga-accent); z-index:calc(var(--sga-z) - 1); pointer-events:none; }
.sga-tts-reading { background:#fff59d !important; outline:2px solid #fbc02d !important; }
.sga-skip-link { position:absolute; left:-9999px; top:0; background:var(--sga-accent); color:#fff; padding:12px 18px; z-index:var(--sga-z); border-radius:0 0 8px 0; font-weight:700; }
.sga-skip-link:focus { left:0; }

@media (max-width:480px) {
	.sga-panel, .sga-panel.sga-oversize { width:calc(100vw - 24px); left:12px !important; right:12px !important; bottom:12px !important; top:auto !important; transform:translateY(14px); max-height:82vh; }
	.sga-panel.sga-open { transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) { .sga-trigger,.sga-panel,.sga-tile { transition:none !important; } }

/* ====================================================== */
/* THEME-SCHUTZ                                           */
/* ====================================================== */
#sga-root, #sga-root *, #sga-root *::before, #sga-root *::after { box-sizing:border-box; }
#sga-root button { min-width:0 !important; min-height:0 !important; max-width:none !important; width:auto; text-transform:none !important; letter-spacing:normal !important; margin:0; box-shadow:none; font-family:inherit; }
.sga-trigger { width:var(--sga-btn-size) !important; height:var(--sga-btn-size) !important; }
#sga-root svg { vertical-align:middle; box-sizing:content-box; flex:0 0 auto; }
.sga-trigger svg { width:56% !important; height:56% !important; fill:#fff !important; }
.sga-icon-btn svg { width:20px !important; height:20px !important; fill:#fff !important; }
.sga-pill .sga-globe { width:20px !important; height:20px !important; fill:var(--sga-accent) !important; }
.sga-pill .sga-chev { width:16px !important; height:16px !important; fill:var(--sga-muted) !important; }
.sga-pill .sga-lead { width:20px !important; height:20px !important; fill:var(--sga-accent) !important; }
.sga-ic svg { width:var(--sga-tile-icon) !important; height:var(--sga-tile-icon) !important; fill:var(--sga-accent) !important; }
.sga-tile[aria-pressed="true"] .sga-ic svg, .sga-tile.sga-tile-active .sga-ic svg { fill:#fff !important; }
.sga-switch::after { box-sizing:content-box; }
.sga-tile { min-width:0 !important; }
.sga-tile .sga-label { overflow-wrap:break-word; hyphens:none; }
#sga-root a { box-shadow:none; }
#sga-root p { margin:0; }