/* ==========================================================================
   spanischestaedte.de — Design-System "Sol y Azulejo"
   Warme spanische Töne (Terracotta, Azulejo-Blau, Safran), Fraunces + Inter,
   maurische Bogenkarten, Kachelornamente. Mobile-first, AA-Kontrast.
   ========================================================================== */

:root {
	/* Spaniens Flaggenfarben als Basis: tiefes Rot, warmes Gold, weiße Kalkwände.
	   Kein Signalrot, sondern ein satter Ton, der auf großen Flächen trägt. */
	--rot: #C1121F;
	--rot-dark: #97101A;
	--rot-deep: #6E0C13;
	--gold: #F2A20C;
	--gold-light: #FFD166;
	--gold-deep: #B57407;
	--azul: #1F6293;
	--azul-dark: #174C74;

	/* Legacy-Namen, damit ältere Regeln weiter greifen */
	--terracotta: var(--rot);
	--terracotta-dark: var(--rot-dark);
	--terracotta-deep: var(--rot-deep);
	--safran: var(--gold);
	--safran-deep: var(--gold-deep);

	--ink: #221A16;
	--ink-soft: #3A2C24;
	--text: #4A3C33;
	--muted: #7C6E63;

	/* Weiß als Grundfläche, Sand nur noch als warme Tönung */
	--fond: #FFFCF7;
	--sand: #FDF3E2;
	--sand-deep: #F6E3C6;
	--line: #EEE0CC;
	--card: #FFFFFF;
	--ok: #2E7D5B;
	--warn: #B3223B;
	--accent: var(--rot);

	--font-head: "Fraunces", Georgia, serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--wrap: 1160px;
	--header-h: 68px;
	--radius-s: 8px;
	--radius: 14px;
	--radius-l: 22px;
	--shadow-s: 0 1px 2px rgba(34, 26, 22, .05), 0 2px 8px rgba(34, 26, 22, .05);
	--shadow-m: 0 2px 6px rgba(34, 26, 22, .06), 0 14px 34px rgba(34, 26, 22, .11);

	/* Azulejo-Sternkachel, jetzt in Gold */
	--azulejo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C1121F' stroke-width='1.1'%3E%3Cpath d='M36 8 43 29l21 7-21 7-7 21-7-21-21-7 21-7z'/%3E%3Cpath d='M36 20.5 40.5 31.5 51.5 36 40.5 40.5 36 51.5 31.5 40.5 20.5 36 31.5 31.5z' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='3.4'/%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='72' cy='0' r='5'/%3E%3Ccircle cx='0' cy='72' r='5'/%3E%3Ccircle cx='72' cy='72' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--text);
	background: var(--fond);
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--azul-dark); }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	color: var(--ink);
	line-height: 1.15;
	margin: 0 0 .5em;
	font-weight: 700;
	text-wrap: balance;
}

p { margin: 0 0 1.15em; }

ul, ol { padding-left: 1.35em; }

figure { margin: 0; }

button { font-family: inherit; }

:focus-visible {
	outline: 3px solid var(--safran);
	outline-offset: 2px;
	border-radius: 3px;
}

::selection { background: var(--safran); color: var(--ink); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* Der Sprunglink darf NICHT die Klasse screen-reader-text tragen: deren
   clip-path würde ihn auch im Fokus unsichtbar halten. Er versteckt sich
   deshalb selbst, indem er nach oben aus dem Bild geschoben wird. */
.skip-link {
	position: fixed; left: 12px; top: 0;
	transform: translateY(-120%);
	background: var(--ink); color: #fff;
	padding: 11px 20px; z-index: 300;
	border-radius: 0 0 10px 10px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--gold); outline-offset: 2px; }
.ss-main:focus { outline: none; }

.ss-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.ss-ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }

/* Leseprogress */
.ss-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px;
	z-index: 130; pointer-events: none;
}
.ss-progress span {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--terracotta), var(--safran));
}

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */

/* Wichtig: backdrop-filter darf NICHT auf .ss-header stehen. Es macht den
   Header zum umgebenden Block für alles mit position:fixed darin, wodurch
   das Mobilmenü (inset:0) gegen die 68px hohe Kopfzeile gemessen wird statt
   gegen den Bildschirm. Ergebnis war ein 54px hoher Streifen. Deshalb liegt
   die Unschärfe jetzt auf einer eigenen Ebene dahinter. */
.ss-header {
	position: sticky; top: 0; z-index: 120;
	background: transparent;
	border-bottom: 1px solid var(--line);
	transition: box-shadow .25s ease;
	isolation: isolate;
}
.ss-header::before {
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	background: rgba(251, 246, 238, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.ss-header.is-scrolled { box-shadow: var(--shadow-s); }

body.admin-bar .ss-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ss-header { top: 46px; } }

.ss-header-in {
	display: flex; align-items: center; gap: 18px;
	min-height: 68px;
}

.ss-logo-link { display: inline-flex; text-decoration: none; }
.ss-logo { display: inline-flex; align-items: center; gap: 10px; }
.ss-logo-tile { width: 38px; height: 38px; flex: none; border-radius: 9px; box-shadow: 0 2px 6px rgba(124, 39, 8, .28); }
.ss-logo-word {
	font-family: var(--font-head);
	font-size: 21px; color: var(--ink); letter-spacing: .01em;
	font-weight: 600; white-space: nowrap;
}
.ss-logo-word strong { font-weight: 900; color: var(--terracotta); }
.ss-logo-tld { color: var(--muted); font-weight: 600; font-size: .8em; }

.ss-nav { margin-left: auto; }
.ss-nav-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 4px; align-items: center;
}
.ss-nav-list > li { position: relative; }
.ss-nav-list > li > a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 13px;
	color: var(--ink); text-decoration: none;
	font-weight: 600; font-size: 15.5px;
	border-radius: 10px;
	white-space: nowrap;
}
.ss-nav-list > li > a:hover { background: var(--sand); color: var(--terracotta-dark); }

.ss-nav-list > li.has-sub > a::after,
.ss-nav-list > li.menu-item-has-children > a::after {
	content: ""; width: 7px; height: 7px; flex: none;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: .55;
}

.ss-sub-toggle { display: none; }

.ss-nav .sub-menu {
	list-style: none; margin: 0; padding: 10px;
	position: absolute; top: calc(100% + 6px); left: 0;
	min-width: 240px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-m);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 50;
}
.ss-nav li:hover > .sub-menu,
.ss-nav li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.ss-nav .sub-menu a {
	display: block; padding: 8px 12px;
	color: var(--text); text-decoration: none;
	font-size: 15px; font-weight: 500;
	border-radius: 8px;
}
.ss-nav .sub-menu a:hover { background: var(--sand); color: var(--terracotta-dark); }
.ss-nav .sub-menu .ss-sub-all a,
.ss-nav .sub-menu li:last-child a[href*="staedte"],
.ss-nav .sub-menu li:last-child a[href*="regionen"] { color: var(--azul); font-weight: 600; }

.ss-header-tools { display: flex; align-items: center; gap: 8px; }
.ss-tool {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--line); background: var(--card);
	color: var(--ink); font-weight: 600; font-size: 14.5px;
	padding: 9px 14px; border-radius: 999px; cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
	min-height: 44px;
}
.ss-tool:hover { border-color: var(--terracotta); box-shadow: var(--shadow-s); }
.ss-burger { display: none; padding: 9px 12px; }

@media (max-width: 980px) {
	.ss-burger { display: inline-flex; }
	.ss-jump-open span { display: none; }
	.ss-jump-open { padding: 9px 12px; }
	.ss-nav {
		position: fixed; inset: 0; top: var(--header-h);
		margin: 0;
		background: var(--fond);
		padding: 14px 20px 40px;
		overflow-y: auto;
		display: none;
		z-index: 110;
	}
	body.admin-bar .ss-nav { top: calc(var(--header-h) + 46px); }
	.ss-nav.is-open { display: block; }
	.ss-nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
	.ss-nav-list > li { border-bottom: 1px solid var(--line); }
	.ss-nav-list > li > a { display: flex; justify-content: flex-start; font-size: 18px; padding: 14px 6px; }
	.ss-nav-list > li.has-sub, .ss-nav-list > li.menu-item-has-children { position: relative; }
	.ss-sub-toggle {
		display: inline-flex; position: absolute; right: 0; top: 7px;
		background: none; border: none; padding: 12px; cursor: pointer;
		color: var(--muted);
	}
	.ss-sub-toggle .ss-ic { transform: rotate(90deg); transition: transform .2s; }
	.ss-sub-toggle[aria-expanded="true"] .ss-ic { transform: rotate(-90deg); }
	.ss-nav .sub-menu {
		position: static; min-width: 0;
		border: none; box-shadow: none; background: none;
		opacity: 1; visibility: visible; transform: none;
		display: none; padding: 0 0 10px 14px;
	}
	.ss-nav li.is-open > .sub-menu { display: block; }
	.ss-nav li:hover > .sub-menu { display: none; }
	.ss-nav li.is-open:hover > .sub-menu { display: block; }
}

/* --------------------------------------------------------------------------
   Quickjump-Dialog
   -------------------------------------------------------------------------- */

.ss-jump {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(42, 33, 24, .5);
	display: flex; align-items: flex-start; justify-content: center;
	padding: 9vh 16px 16px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.ss-jump[hidden] { display: none; }
.ss-jump-panel {
	width: 100%; max-width: 560px;
	background: var(--card);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-m);
	overflow: hidden;
	border-top: 5px solid var(--terracotta);
}
.ss-jump-head {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
}
.ss-jump-head input {
	flex: 1; border: none; outline: none;
	font: 600 18px/1.4 var(--font-body);
	color: var(--ink);
	background: transparent;
	min-width: 0;
}
.ss-jump-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 8px; }
.ss-jump-close:hover { color: var(--terracotta); }
.ss-jump-results {
	list-style: none; margin: 0; padding: 8px;
	max-height: 46vh; overflow-y: auto;
}
.ss-jump-results a {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 10px 12px; border-radius: 10px;
	text-decoration: none; color: var(--ink); font-weight: 500;
}
.ss-jump-results a:hover,
.ss-jump-results li.is-active a { background: var(--sand); }
.ss-jump-results .ss-jump-path { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ss-jump-hint { margin: 0; padding: 10px 16px 14px; font-size: 13px; color: var(--muted); }
.ss-jump-hint a { color: var(--azul); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ss-hero {
	position: relative;
	background:
		linear-gradient(160deg, #FDFAF4 0%, var(--fond) 45%, var(--sand) 100%);
	border-bottom: 1px solid var(--line);
	padding: 26px 0 34px;
	overflow: hidden;
}
.ss-hero-orn, .ss-home-hero-orn, .ss-foot-orn {
	position: absolute; top: -30px; right: -50px; bottom: -30px;
	width: min(46vw, 520px);
	background-image: var(--azulejo);
	background-size: 72px 72px;
	opacity: .09;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(105deg, transparent 0%, #000 55%);
	mask-image: linear-gradient(105deg, transparent 0%, #000 55%);
}
.ss-hero > .ss-wrap { position: relative; z-index: 2; }

.ss-kicker {
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 10px;
	font-size: 13px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent, var(--terracotta));
}
.ss-kicker::before {
	content: ""; width: 22px; height: 3px; border-radius: 2px;
	background: var(--accent, var(--terracotta));
}

.ss-h1 {
	font-size: clamp(30px, 5vw, 44px);
	font-weight: 900;
	letter-spacing: -.01em;
	margin-bottom: .35em;
	max-width: 21ch;
}
.ss-h1 em, .ss-home-h1 em {
	font-style: normal;
	color: var(--terracotta);
	background: linear-gradient(transparent 68%, rgba(232, 160, 32, .38) 68%);
}

.ss-intro {
	max-width: 760px;
	font-size: 18.5px;
	color: var(--ink-soft);
}
.ss-intro p:last-child { margin-bottom: 0; }

.ss-hero-img { margin-top: 22px; }
.ss-hero-img img {
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-m);
	width: 100%; max-height: 440px; object-fit: cover;
}

.ss-post-meta { color: var(--muted); font-size: 15px; margin: 4px 0 0; }

/* Breadcrumbs */
.ss-crumbs { font-size: 13.5px; margin-bottom: 14px; }
.ss-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ss-crumbs li { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.ss-crumbs li + li::before { content: "›"; color: var(--line); margin: 0 3px; }
.ss-crumbs a { color: var(--muted); text-decoration: none; }
.ss-crumbs a:hover { color: var(--terracotta); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Layout: Artikel + Seitenleiste
   -------------------------------------------------------------------------- */

.ss-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	padding-top: 34px;
	padding-bottom: 10px;
}
@media (min-width: 1100px) {
	.ss-layout { grid-template-columns: minmax(0, 740px) 280px; }
}

.ss-article { min-width: 0; }

.ss-side { display: none; }
@media (min-width: 1100px) { .ss-side { display: block; } }

.ss-toc {
	position: sticky; top: 96px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 18px 12px;
	box-shadow: var(--shadow-s);
	max-height: calc(100vh - 130px);
	overflow: auto;
}
.ss-toc-h {
	margin: 0 0 8px;
	font-size: 12.5px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted);
}
.ss-toc ol { list-style: none; margin: 0; padding: 0; }
.ss-toc li { border-left: 2px solid var(--line); }
.ss-toc a {
	display: block; padding: 6px 0 6px 12px;
	font-size: 14px; color: var(--text);
	text-decoration: none; line-height: 1.35;
}
.ss-toc li:hover { border-color: var(--safran); }
.ss-toc li.is-active { border-color: var(--terracotta); }
.ss-toc li.is-active a { color: var(--terracotta-dark); font-weight: 600; }

/* --------------------------------------------------------------------------
   Artikel-Body
   -------------------------------------------------------------------------- */

.ss-body { max-width: 740px; }
.ss-body > h2, .ss-faq > h2, .ss-related > h2, .ss-children h2 {
	font-size: clamp(23px, 3vw, 28px);
	margin-top: 1.6em;
	padding-top: .2em;
}
.ss-body > h2:first-child { margin-top: .2em; }
.ss-body h3 { font-size: 20px; margin-top: 1.5em; }
.ss-body a { font-weight: 500; }
.ss-body li { margin-bottom: .35em; }

.ss-body ul { list-style: none; padding-left: 2px; }
.ss-body ul > li { padding-left: 22px; position: relative; }
.ss-body ul > li::before {
	content: ""; position: absolute; left: 2px; top: .52em;
	width: 9px; height: 9px;
	background: var(--safran);
	transform: rotate(45deg);
	border-radius: 2px;
}

.ss-body hr {
	border: none; height: 26px; margin: 2em auto;
	background-image: var(--azulejo);
	background-size: 26px 26px;
	background-repeat: repeat-x;
	background-position: center;
	opacity: .35; max-width: 130px;
}

.ss-body blockquote {
	margin: 1.6em 0; padding: 18px 22px;
	background: var(--sand);
	border-left: 4px solid var(--safran);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-family: var(--font-head);
	font-size: 19px; color: var(--ink-soft);
}
.ss-body blockquote p:last-child { margin: 0; }

/* Nummerierte Sehenswürdigkeiten */
.ss-sight-h {
	display: flex; align-items: baseline; gap: 14px;
	scroll-margin-top: 90px;
}
.ss-num {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 2px solid var(--accent, var(--terracotta));
	color: var(--accent, var(--terracotta));
	border-radius: 50% 50% 50% 4px;
	font-family: var(--font-head);
	font-size: 21px; font-weight: 900;
	transform: translateY(6px);
	background: var(--card);
	font-variant-numeric: tabular-nums;
}

/* Callouts */
.ss-tipp, .ss-wissen, .ss-achtung, .ss-ticket {
	margin: 1.5em 0; padding: 16px 18px 16px 20px;
	border-radius: var(--radius);
	border: 1px solid;
	position: relative;
	font-size: 16px;
}
.ss-tipp p:last-child, .ss-wissen p:last-child, .ss-achtung p:last-child, .ss-ticket p:last-child { margin-bottom: 0; }
.ss-tipp { background: #FCF3DF; border-color: #EFD9A8; border-left: 5px solid var(--safran); }
.ss-tipp strong:first-child { color: var(--safran-deep); }
.ss-wissen { background: #EDF3F8; border-color: #CFE0EC; border-left: 5px solid var(--azul); }
.ss-wissen strong:first-child { color: var(--azul-dark); }
.ss-achtung { background: #FAECEF; border-color: #EFCBD4; border-left: 5px solid var(--warn); }
.ss-achtung strong:first-child { color: var(--warn); }
.ss-ticket {
	background: linear-gradient(135deg, #FBEFE8, #F8E4D7);
	border-color: #EFCDB9; border-left: 5px solid var(--terracotta);
}
.ss-ticket strong:first-child { color: var(--terracotta-dark); }

.ss-btn {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 6px;
	background: var(--terracotta);
	color: #fff !important;
	font-weight: 600; font-size: 15px;
	padding: 11px 20px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(154, 50, 15, .3);
	transition: transform .15s ease, box-shadow .15s ease, background .15s;
	min-height: 44px;
}
.ss-btn:hover { background: var(--terracotta-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(154, 50, 15, .35); }
.ss-btn::after { content: "→"; }

/* Tabellen */
.ss-table { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ss-table table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15.5px; }
.ss-table th {
	text-align: left; font-weight: 700; color: var(--ink);
	background: var(--sand);
	padding: 11px 14px;
	border-bottom: 2px solid var(--line);
	white-space: nowrap;
}
.ss-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ss-table tr:last-child td { border-bottom: none; }
.ss-table tbody tr:nth-child(even) { background: #FDFAF3; }

/* Auf einen Blick */
.ss-facts {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 4px solid var(--safran);
	border-radius: var(--radius);
	padding: 18px 20px 8px;
	margin: 0 0 30px;
	box-shadow: var(--shadow-s);
}
.ss-facts-h {
	font-size: 13px; font-weight: 700; font-family: var(--font-body);
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted); margin: 0 0 10px;
}
.ss-facts ul {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px 22px;
}
.ss-facts li {
	display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto;
	column-gap: 9px; padding: 6px 0;
}
.ss-facts .ss-ic { grid-row: 1 / 3; align-self: center; color: var(--terracotta); width: 21px; height: 21px; }
.ss-fact-l { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ss-fact-v { font-weight: 600; color: var(--ink); font-size: 15.5px; line-height: 1.35; }

/* FAQ */
.ss-faq { margin-top: 2.2em; max-width: 740px; }
.ss-faq-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 10px;
	overflow: hidden;
	transition: box-shadow .2s;
}
.ss-faq-item[open] { box-shadow: var(--shadow-s); border-color: var(--sand-deep); }
.ss-faq-item summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 15px 18px;
	font-weight: 600; color: var(--ink);
	min-height: 44px;
}
.ss-faq-item summary::-webkit-details-marker { display: none; }
.ss-faq-item summary::after {
	content: "+";
	flex: none;
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--sand);
	color: var(--terracotta);
	font-size: 20px; font-weight: 600;
	transition: transform .2s ease;
}
.ss-faq-item[open] summary::after { transform: rotate(45deg); background: var(--terracotta); color: #fff; }
.ss-faq-a { padding: 0 18px 16px; color: var(--text); }
.ss-faq-a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Karten & Grids
   -------------------------------------------------------------------------- */

.ss-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

.ss-card {
	display: flex; flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	box-shadow: var(--shadow-s);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.ss-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--sand-deep); color: var(--ink); }

.ss-card-arch {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	margin: 14px 14px 0;
	height: 108px;
	border-radius: 130px 130px var(--radius-s) var(--radius-s);
	background:
		linear-gradient(150deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 72%, #000) 100%);
	overflow: hidden;
}
.ss-card-arch::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--azulejo);
	background-size: 54px 54px;
	opacity: .16;
	filter: brightness(4);
}
.ss-card-arch img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ss-card-letter {
	font-family: var(--font-head);
	font-weight: 900; font-size: 46px;
	color: rgba(255, 255, 255, .96);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .22);
	position: relative;
}
.ss-card.is-big .ss-card-arch { height: 128px; }

.ss-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.ss-card-kicker {
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted);
}
.ss-card-title { font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.25; }
.ss-card-desc { font-size: 14.5px; color: var(--text); line-height: 1.5; }
.ss-card-cta {
	margin-top: auto; padding-top: 8px;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13.5px; font-weight: 700;
	color: var(--terracotta);
}
.ss-card-cta .ss-ic { transition: transform .2s; }
.ss-card:hover .ss-card-cta .ss-ic { transform: translateX(4px); }

.ss-card.is-post { border-top: 4px solid var(--azul); }
.ss-card.is-post .ss-card-title { font-size: 18px; }

/* Weiterlesen & Kinder */
.ss-related { margin: 10px 0 50px; }
.ss-related .ss-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.ss-children { margin-top: 2em; }
.ss-feature-link {
	display: flex; flex-direction: column; gap: 4px;
	background: linear-gradient(135deg, var(--ink) 0%, #46331F 100%);
	color: #fff; text-decoration: none;
	border-radius: var(--radius-l);
	padding: 24px 26px;
	margin: 1.2em 0 1.6em;
	position: relative; overflow: hidden;
	box-shadow: var(--shadow-m);
}
.ss-feature-link::after {
	content: ""; position: absolute; inset: 0;
	background-image: var(--azulejo);
	background-size: 64px 64px;
	opacity: .12; filter: brightness(6);
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000);
	mask-image: linear-gradient(100deg, transparent 30%, #000);
}
.ss-feature-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--safran); }
.ss-feature-t { font-family: var(--font-head); font-size: clamp(20px, 3vw, 26px); font-weight: 700; }
.ss-feature-link .ss-card-cta { color: #fff; }

.ss-linklist {
	list-style: none; margin: 0 0 1.5em; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
}
.ss-linklist a {
	display: block;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 14px;
	color: var(--ink); font-weight: 500; font-size: 15px;
	text-decoration: none;
	transition: border-color .15s, transform .15s;
}
.ss-linklist a:hover { border-color: var(--terracotta); transform: translateX(3px); color: var(--terracotta-dark); }
.ss-linklist a::before { content: "→ "; color: var(--safran-deep); }

/* --------------------------------------------------------------------------
   Startseite
   -------------------------------------------------------------------------- */

.ss-home-hero {
	position: relative;
	padding: 64px 0 56px;
	background:
		radial-gradient(1100px 500px at 85% -10%, rgba(232, 160, 32, .16), transparent 60%),
		linear-gradient(165deg, #FDFAF4 0%, var(--fond) 50%, var(--sand) 100%);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
	text-align: center;
}
.ss-home-hero .ss-kicker { justify-content: center; }
.ss-home-hero-orn { -webkit-mask-image: linear-gradient(115deg, transparent 20%, #000 70%); mask-image: linear-gradient(115deg, transparent 20%, #000 70%); }
.ss-home-h1 { max-width: none; margin-left: auto; margin-right: auto; font-size: clamp(34px, 6vw, 56px); }
.ss-home-sub {
	max-width: 640px; margin: 0 auto 26px;
	font-size: 19px; color: var(--ink-soft);
}
.ss-home-search {
	display: flex; align-items: center; gap: 12px;
	width: 100%; max-width: 560px;
	margin: 0 auto;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 15px 22px;
	font-size: 16.5px; color: var(--muted);
	cursor: pointer;
	box-shadow: var(--shadow-m);
	transition: transform .2s, box-shadow .2s, border-color .2s;
	text-align: left;
}
.ss-home-search:hover { transform: translateY(-2px); border-color: var(--terracotta); }
.ss-home-search .ss-ic { color: var(--terracotta); width: 20px; height: 20px; }
.ss-home-search span { flex: 1; }
.ss-home-search kbd {
	background: var(--sand); border: 1px solid var(--line);
	border-radius: 6px; padding: 2px 9px;
	font-size: 13px; color: var(--muted);
	font-family: var(--font-body);
}
.ss-trustrow {
	list-style: none; margin: 26px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
	font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
}
.ss-trustrow .ss-ic { color: var(--terracotta); }

.ss-section { padding: 52px 0; }
.ss-section-sand { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ss-section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	margin-bottom: 22px;
}
.ss-section-head h2 { margin: 0; font-size: clamp(24px, 3.6vw, 32px); }
.ss-more {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: 15px;
	color: var(--terracotta); text-decoration: none;
	white-space: nowrap;
}
.ss-more:hover { color: var(--terracotta-dark); }
.ss-more:hover .ss-ic { transform: translateX(3px); }
.ss-more .ss-ic { transition: transform .2s; }

.ss-grid-featured { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ss-grid-regions { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ss-grid-regions .ss-card-arch { height: 74px; border-radius: 90px 90px var(--radius-s) var(--radius-s); }
.ss-grid-regions .ss-card-letter { font-size: 32px; }

/* Dunkle Top-10-Sektion */
.ss-section-dark {
	background:
		radial-gradient(900px 420px at 15% 0%, rgba(194, 69, 30, .25), transparent 55%),
		var(--ink);
	color: #EFE6D8;
}
.ss-section-dark .ss-section-head h2 { color: #FBF2E4; }
.ss-section-dark .ss-more { color: var(--safran); }
.ss-top10 {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 10px 26px;
	counter-reset: top10;
}
.ss-top10 a {
	display: flex; align-items: center; gap: 16px;
	padding: 13px 14px;
	border-radius: var(--radius);
	text-decoration: none; color: #EFE6D8;
	border: 1px solid transparent;
	transition: background .2s, border-color .2s;
}
.ss-top10 a:hover { background: rgba(251, 242, 228, .07); border-color: rgba(251, 242, 228, .16); }
.ss-top10-num {
	flex: none; width: 46px;
	font-family: var(--font-head);
	font-size: 34px; font-weight: 900;
	color: var(--safran);
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.ss-top10-body { flex: 1; display: flex; flex-direction: column; }
.ss-top10-t { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #FBF2E4; }
.ss-top10-s { font-size: 13.5px; color: rgba(239, 230, 216, .72); }
.ss-top10 .ss-ic { color: var(--safran); }

.ss-home-text { max-width: 780px; }
.ss-home-text h2 { font-size: clamp(22px, 3vw, 27px); }
.ss-home-faq .ss-faq { margin-top: 0; max-width: 780px; }
.ss-home-faq .ss-faq h2 { margin-top: 0; }

/* --------------------------------------------------------------------------
   Suche, 404, Pagination
   -------------------------------------------------------------------------- */

.ss-searchform {
	display: flex; gap: 10px;
	max-width: 560px;
}
.ss-searchform input {
	flex: 1; min-width: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 12px 20px;
	font: 16px var(--font-body);
	background: var(--card);
	color: var(--ink);
}
.ss-searchform input:focus { outline: 3px solid var(--safran); outline-offset: 1px; }
.ss-searchform button {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--terracotta); color: #fff;
	border: none; border-radius: 999px;
	padding: 12px 22px;
	font-weight: 600; font-size: 15px;
	cursor: pointer;
}
.ss-searchform button:hover { background: var(--terracotta-dark); }

.ss-search-form, .ss-404-search { margin: 30px 0; }

.ss-searchlist { list-style: none; margin: 0 0 40px; padding: 0; max-width: 760px; }
.ss-searchlist a {
	display: flex; flex-direction: column; gap: 3px;
	padding: 16px 4px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
}
.ss-searchlist-t { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ink); }
.ss-searchlist a:hover .ss-searchlist-t { color: var(--terracotta); }

.ss-pagination { margin: 20px 0 60px; }
.ss-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-pagination a, .ss-pagination span.current, .ss-pagination span.dots {
	display: inline-flex; align-items: center;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	text-decoration: none; color: var(--ink);
	font-weight: 600; font-size: 15px;
	min-height: 44px;
}
.ss-pagination span.current { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.ss-pagination a:hover { border-color: var(--terracotta); color: var(--terracotta-dark); }

.ss-bloglist { margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ss-footer {
	position: relative;
	margin-top: 60px;
	background: var(--ink);
	color: #D9CFC0;
	overflow: hidden;
	border-top: 5px solid var(--terracotta);
}
.ss-foot-orn { opacity: .06; filter: brightness(6); }
.ss-footer .ss-wrap { position: relative; z-index: 2; padding-top: 46px; padding-bottom: 20px; }
.ss-foot-brand { margin-bottom: 30px; max-width: 460px; }
.ss-footer .ss-logo-word { color: #FBF2E4; }
.ss-footer .ss-logo-word strong { color: var(--safran); }
.ss-footer .ss-logo-tld { color: rgba(251, 242, 228, .6); }
.ss-foot-claim { margin: 12px 0 0; font-size: 15px; color: rgba(217, 207, 192, .9); }

.ss-foot-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 26px 30px;
	padding-bottom: 34px;
	border-bottom: 1px solid rgba(251, 242, 228, .14);
}
.ss-foot-col h2 {
	font-family: var(--font-body);
	font-size: 12.5px; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--safran);
	margin-bottom: 12px;
}
.ss-foot-col ul { list-style: none; margin: 0; padding: 0; }
.ss-foot-col li { margin-bottom: 7px; }
.ss-foot-col a { color: #D9CFC0; text-decoration: none; font-size: 14.5px; }
.ss-foot-col a:hover { color: #fff; text-decoration: underline; }

.ss-foot-bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 18px 0 26px;
	font-size: 13px; color: rgba(217, 207, 192, .72);
}
.ss-foot-bottom p { margin: 0; }
.ss-totop {
	flex: none;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(251, 242, 228, .25);
	background: rgba(251, 242, 228, .06);
	color: var(--safran);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .2s, transform .2s;
}
.ss-totop:hover { background: rgba(251, 242, 228, .14); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Diversen
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
	.ss-header, .ss-footer, .ss-side, .ss-jump, .ss-progress,
	.ss-related, .ss-totop, .ss-home-search { display: none !important; }
	body { background: #fff; color: #000; }
	.ss-hero { background: #fff; border: none; }
	a { color: #000; text-decoration: none; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.ss-intro { font-size: 17px; }
	.ss-facts ul { grid-template-columns: 1fr 1fr; }
	.ss-num { width: 36px; height: 36px; font-size: 17px; }
	.ss-foot-bottom { flex-direction: column-reverse; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Fotos & Bildnachweise
   -------------------------------------------------------------------------- */

.ss-hero-img { margin-top: 22px; position: relative; }
.ss-hero-img img {
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-m);
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--sand);
}
.ss-credit {
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.4;
}
.ss-credit a { color: var(--muted); text-decoration: underline; }
.ss-credit a:hover { color: var(--terracotta); }

/* Foto in der Bogenform der Karten */
.ss-card-arch.has-img { background: var(--sand); }
.ss-card-arch.has-img::before { display: none; }
.ss-card-arch img {
	width: 100%; height: 100%;
	object-fit: cover;
	position: absolute; inset: 0;
	transition: transform .45s ease;
}
.ss-card:hover .ss-card-arch img { transform: scale(1.05); }

/* E-Mail-Link auf Kontakt- und Rechtsseiten */
.ss-mail {
	display: inline-block;
	font-weight: 600;
	color: var(--terracotta);
	text-decoration: none;
	border-bottom: 2px solid rgba(194, 69, 30, .3);
}
.ss-mail:hover { color: var(--terracotta-dark); border-bottom-color: var(--terracotta); }

/* Bildnachweis-Seite */
.ss-credits-list { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.ss-credits-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ==========================================================================
   Spanischer Charakter: Flaggenband, Gold-Akzente, tiefrote Flächen
   ========================================================================== */

/* Rot-Gold-Rot als wiederkehrendes Band, wie die Flagge quer über die Seite */
.ss-flagline,
.ss-header::after {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg,
		var(--rot) 0 22%, var(--gold) 22% 78%, var(--rot) 78% 100%);
}
.ss-header { border-bottom: none; }
.ss-header::after { position: absolute; left: 0; right: 0; bottom: -4px; }

/* Hero: warmes Gold-Licht statt neutralem Verlauf */
.ss-hero {
	background:
		radial-gradient(900px 380px at 88% -20%, rgba(242, 162, 12, .22), transparent 62%),
		linear-gradient(168deg, #FFFDF9 0%, var(--fond) 46%, var(--sand) 100%);
}
.ss-home-hero {
	background:
		radial-gradient(1200px 540px at 82% -14%, rgba(242, 162, 12, .26), transparent 60%),
		radial-gradient(760px 420px at 8% 6%, rgba(193, 18, 31, .10), transparent 58%),
		linear-gradient(170deg, #FFFDF9 0%, var(--fond) 48%, var(--sand) 100%);
}

/* Überschriften bekommen einen goldenen Unterstrich */
.ss-section-head h2 { position: relative; padding-bottom: 12px; }
.ss-section-head h2::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 62px; height: 4px; border-radius: 2px;
	background: linear-gradient(90deg, var(--rot) 0 45%, var(--gold) 45% 100%);
}
.ss-section-dark .ss-section-head h2::after {
	background: linear-gradient(90deg, var(--gold) 0 45%, var(--gold-light) 45% 100%);
}

/* Artikel-Zwischenüberschriften: goldener Balken links */
.ss-body > h2 {
	border-left: 4px solid var(--gold);
	padding-left: 14px;
	margin-left: -18px;
}
@media (max-width: 640px) { .ss-body > h2 { margin-left: 0; } }

/* Karten: weiße Fläche mit feiner Goldkante, die beim Hover rot wird */
.ss-card {
	border-color: var(--line);
	position: relative;
	overflow: hidden;
}
.ss-card::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--rot) 0 40%, var(--gold) 40% 100%);
	opacity: 0; transition: opacity .25s ease;
	z-index: 3;
}
.ss-card:hover::before { opacity: 1; }
.ss-card:hover { border-color: var(--gold); }

/* Die dunkle Sektion wird tiefrot statt braun */
.ss-section-dark {
	background:
		radial-gradient(1000px 460px at 12% 0%, rgba(242, 162, 12, .22), transparent 58%),
		linear-gradient(160deg, var(--rot-deep) 0%, #58090F 100%);
	color: #FCEFDA;
}
.ss-section-dark .ss-section-head h2 { color: #FFF8EC; }
.ss-section-dark .ss-more,
.ss-section-dark .ss-top10-num,
.ss-section-dark .ss-top10 .ss-ic { color: var(--gold-light); }
.ss-section-dark .ss-top10-t { color: #FFF8EC; }
.ss-section-dark .ss-top10-s { color: rgba(252, 239, 218, .76); }
.ss-top10 a:hover { background: rgba(255, 248, 236, .09); border-color: rgba(255, 209, 102, .3); }

/* Der große Guide-Block ebenfalls in Rot */
.ss-feature-link {
	background: linear-gradient(135deg, var(--rot-deep) 0%, var(--rot-dark) 100%);
}
.ss-feature-k { color: var(--gold-light); }

/* Fußbereich: tiefes Rot mit Gold */
.ss-footer {
	background: linear-gradient(170deg, #2A1512 0%, var(--rot-deep) 100%);
	border-top: none;
	color: #EBDCCB;
}
.ss-footer::before {
	content: ""; display: block; height: 5px;
	background: linear-gradient(90deg, var(--rot) 0 22%, var(--gold) 22% 78%, var(--rot) 78% 100%);
}
.ss-foot-col h2 { color: var(--gold-light); }
.ss-foot-col a { color: #EBDCCB; }
.ss-footer .ss-logo-word strong { color: var(--gold-light); }
.ss-totop { border-color: rgba(255, 209, 102, .3); color: var(--gold-light); }

/* Nummerierte Sehenswürdigkeiten: goldene Kreise statt Umrandung */
.ss-num {
	background: linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%);
	border: none;
	color: #fff;
	box-shadow: 0 2px 8px rgba(181, 116, 7, .34);
}

/* Sand-Sektionen bekommen eine Goldlinie oben und unten */
.ss-section-sand {
	background: var(--sand);
	border-top: 1px solid var(--sand-deep);
	border-bottom: 1px solid var(--sand-deep);
}

/* Fakten-Box: Goldkante oben, rote Icons */
.ss-facts { border-top-color: var(--gold); }
.ss-facts .ss-ic { color: var(--rot); }

/* Buttons und Suchleiste */
.ss-btn { background: var(--rot); box-shadow: 0 2px 8px rgba(151, 16, 26, .3); }
.ss-btn:hover { background: var(--rot-dark); }
.ss-home-search .ss-ic { color: var(--rot); }
.ss-trustrow .ss-ic { color: var(--rot); }
.ss-searchform button { background: var(--rot); }
.ss-searchform button:hover { background: var(--rot-dark); }

/* Aufzählungspunkte als goldene Rauten */
.ss-body ul > li::before { background: var(--gold); }

/* ==========================================================================
   Klima- und Reise-Dashboard
   ========================================================================== */

.ss-dash {
	margin: 2.4em 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 24px 24px 20px;
	box-shadow: var(--shadow-s);
	position: relative;
	overflow: hidden;
}
.ss-dash::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--rot) 0 22%, var(--gold) 22% 78%, var(--rot) 78% 100%);
}
.ss-dash > h2 { margin-top: .2em; border: none; padding-left: 0; margin-left: 0; }
.ss-dash-h3 { font-size: 18px; margin: 1.6em 0 .6em; }

/* Kopfzeile: aktuelle Temperatur + Kennzahlen */
.ss-dash-top {
	display: flex; flex-wrap: wrap; gap: 18px;
	align-items: stretch;
	margin-bottom: 22px;
}
.ss-dash-now {
	flex: 0 0 auto;
	display: flex; flex-direction: column; justify-content: center;
	min-width: 168px;
	padding: 14px 20px;
	border-radius: var(--radius);
	background: linear-gradient(150deg, var(--rot) 0%, var(--rot-dark) 100%);
	color: #fff;
	box-shadow: 0 4px 16px rgba(151, 16, 26, .26);
}
.ss-dash-now-l { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.ss-dash-now-t {
	font-family: var(--font-head); font-weight: 900;
	font-size: 42px; line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.ss-dash-now-t i { font-style: normal; font-size: 22px; opacity: .8; }
.ss-dash-now-s { font-size: 14px; opacity: .9; }

.ss-dash-stats {
	flex: 1 1 320px;
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px 18px;
	align-content: center;
}
.ss-dash-stats li {
	display: flex; flex-direction: column;
	padding: 8px 12px;
	background: var(--sand);
	border-radius: 10px;
}
.ss-dash-stats span { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ss-dash-stats strong { font-size: 15.5px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Klimadiagramm ohne JavaScript */
.ss-chart { margin-top: 6px; }
.ss-chart-grid {
	display: grid; grid-template-columns: repeat(12, 1fr);
	gap: 4px;
	align-items: end;
}
.ss-chart-col {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 6px 0 4px;
	border-radius: 8px;
	transition: background .2s;
}
.ss-chart-col.is-now { background: var(--sand); }
.ss-chart-val { font-size: 11.5px; font-weight: 700; color: var(--rot); font-variant-numeric: tabular-nums; }
.ss-chart-bars {
	position: relative;
	width: 100%; height: 116px;
	display: block;
}
/* Temperaturband von Tief- bis Höchstwert */
.ss-chart-temp {
	position: absolute; left: 30%; right: 30%;
	bottom: var(--bot); top: calc(100% - var(--top));
	min-height: 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--rot) 0%, var(--gold) 100%);
	box-shadow: 0 1px 3px rgba(151, 16, 26, .25);
	z-index: 2;
}
/* Niederschlag als blaue Säule dahinter */
.ss-chart-rain {
	position: absolute; left: 4%; right: 4%; bottom: 0;
	height: var(--h);
	background: rgba(31, 98, 147, .16);
	border-radius: 5px 5px 0 0;
	border-top: 2px solid rgba(31, 98, 147, .38);
	z-index: 1;
}
.ss-chart-rainval { font-size: 10.5px; color: var(--azul); font-variant-numeric: tabular-nums; }
.ss-chart-lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.ss-chart-key {
	margin: 10px 0 0; font-size: 12.5px; color: var(--muted);
	display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.ss-chart-key span { width: 22px; height: 8px; border-radius: 999px; display: inline-block; }
.ss-chart-key .k-temp { background: linear-gradient(90deg, var(--gold), var(--rot)); }
.ss-chart-key .k-rain { background: rgba(31, 98, 147, .35); }

.ss-dash-flights { margin: .6em 0 0; }
.ss-dash-flights table { min-width: 340px; }
.ss-dash-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ss-dash-note a { color: var(--muted); }

@media (max-width: 620px) {
	.ss-dash { padding: 18px 14px 16px; }
	.ss-chart-grid { gap: 2px; }
	.ss-chart-val, .ss-chart-rainval { font-size: 9.5px; }
	.ss-chart-bars { height: 92px; }
	.ss-chart-lab { font-size: 10.5px; }
	.ss-dash-now { width: 100%; }
}

/* ==========================================================================
   Spanienkarte
   ========================================================================== */

.ss-map {
	margin: 2em 0 2.4em;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 10px 10px 4px;
	box-shadow: var(--shadow-s);
	position: relative;
	overflow: hidden;
}
.ss-map::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--rot) 0 22%, var(--gold) 22% 78%, var(--rot) 78% 100%);
}
.ss-map svg { width: 100%; height: auto; display: block; }

/* Regionen: acht Töne aus dem Spanien-Palet, damit Nachbarn sich unterscheiden */
.ss-map-r path, path.ss-map-r { transition: fill .2s ease; }
.ss-map-c0 path, path.ss-map-c0 { fill: #F7D9A8; }
.ss-map-c1 path, path.ss-map-c1 { fill: #EFBA76; }
.ss-map-c2 path, path.ss-map-c2 { fill: #E0925F; }
.ss-map-c3 path, path.ss-map-c3 { fill: #EBD3A6; }
.ss-map-c4 path, path.ss-map-c4 { fill: #D97F55; }
.ss-map-c5 path, path.ss-map-c5 { fill: #F2E0BE; }
.ss-map-c6 path, path.ss-map-c6 { fill: #E4C48F; }
.ss-map-c7 path, path.ss-map-c7 { fill: #DCB47C; }
.ss-map-regions path { stroke: #FFFCF7; stroke-width: 1.6; stroke-linejoin: round; }
.ss-map-regions a { cursor: pointer; }
.ss-map-regions a:hover path,
.ss-map-regions a:focus-visible path { fill: var(--rot); }
.ss-map-r.is-plain path, path.ss-map-r.is-plain { opacity: .72; }

/* Regionsnamen */
.ss-map-labels text {
	font: 700 13px/1 var(--font-body);
	fill: var(--rot-deep);
	text-anchor: middle;
	paint-order: stroke;
	stroke: #FFFCF7;
	stroke-width: 3.5px;
	pointer-events: none;
}

/* Städte */
.ss-map-hit { fill: transparent; }          /* unsichtbare, große Trefferfläche */
.ss-map-dot {
	fill: var(--rot);
	stroke: #fff;
	stroke-width: 1.5;
	transition: fill .15s ease, r .15s ease;
	pointer-events: none;
}
.ss-map-cities text {
	font: 600 11.5px/1 var(--font-body);
	fill: var(--ink);
	paint-order: stroke;
	stroke: #FFFCF7;
	stroke-width: 3.5px;
	opacity: 0;
	transition: opacity .12s ease;
	pointer-events: none;
}
.ss-map-city.is-flip text { text-anchor: end; }
.ss-map-city.is-big text { opacity: 1; font-size: 12.5px; font-weight: 700; }
.ss-map-city { cursor: pointer; }
.ss-map-city:hover text,
.ss-map-city:focus-visible text { opacity: 1; }
.ss-map-city:hover .ss-map-dot,
.ss-map-city:focus-visible .ss-map-dot { fill: var(--rot-deep); r: 6.5; }
.ss-map-city:focus-visible .ss-map-hit { stroke: var(--gold); stroke-width: 2.5; }

/* Auf der Regionenkarte stören Städtenamen die Regionsnamen: erst bei Hover */
.ss-map-regionen .ss-map-cities text { opacity: 0; }
.ss-map-regionen .ss-map-city:hover text,
.ss-map-regionen .ss-map-city:focus-visible text { opacity: 1; }

/* Städtekarte: Regionen sind nur noch Hintergrund, die Städte tragen die Karte */
.ss-map-staedte .ss-map-regions path {
	fill: var(--sand);
	stroke: #FFFCF7;
	stroke-width: 1.4;
	pointer-events: none;
}
.ss-map-staedte .ss-map-dot { r: 4.2; }
.ss-map-staedte .ss-map-city.is-big .ss-map-dot { r: 6; }
.ss-map-staedte .ss-map-city:hover .ss-map-dot { r: 7.5; }

/* Kanaren-Kasten */
.ss-map-inset rect { fill: #FFF8EC; stroke: var(--line); stroke-width: 1.5; }
.ss-map-inset text { font: 600 11.5px/1 var(--font-body); fill: var(--muted); }

.ss-map-cap {
	margin: 6px 4px 8px;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.45;
}

@media (max-width: 640px) {
	.ss-map { padding: 8px 6px 2px; }
	.ss-map-labels text { font-size: 15px; stroke-width: 4px; }
	.ss-map-city.is-big text { font-size: 15px; }
	.ss-map-cities circle { stroke-width: 1.8; }
}

/* ==========================================================================
   Kurzurteil, Plan B, Städte in der Nähe
   ========================================================================== */

.ss-verdict {
	margin: 0 0 26px;
	background: linear-gradient(150deg, #FFF8EC 0%, var(--sand) 100%);
	border: 1px solid var(--sand-deep);
	border-left: 5px solid var(--gold);
	border-radius: var(--radius);
	padding: 16px 20px 12px;
}
.ss-verdict-h {
	margin: 0 0 10px;
	font-size: 12px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--gold-deep);
}
.ss-verdict dl { margin: 0; display: grid; gap: 8px 20px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ss-verdict dl > div { display: flex; flex-direction: column; }
.ss-verdict dt {
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 1px;
}
.ss-verdict dd { margin: 0; font-size: 15.5px; color: var(--ink); line-height: 1.4; }
.ss-verdict .is-yes dt { color: var(--ok); }
.ss-verdict .is-no dt { color: var(--warn); }

.ss-planb { margin: 2em 0; }
.ss-planb ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ss-planb li {
	display: flex; gap: 12px; align-items: flex-start;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 13px 15px;
}
.ss-planb li::before { content: none; }
.ss-planb .ss-ic { color: var(--rot); width: 20px; height: 20px; margin-top: 2px; }
.ss-planb strong { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.ss-planb span { font-size: 14.5px; color: var(--text); line-height: 1.45; }

.ss-nearby { margin: 2em 0; }
.ss-nearby-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   USP-Leiste unter dem Hauptmenü
   ========================================================================== */

.ss-usp {
	background: var(--ink);
	color: #F3E7D6;
	border-bottom: 3px solid var(--gold);
	position: relative;
	z-index: 100;
}
.ss-usp .ss-wrap { padding-top: 0; padding-bottom: 0; }
.ss-usp ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center;
	gap: 0 30px;
	min-height: 44px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ss-usp ul::-webkit-scrollbar { display: none; }
.ss-usp li {
	display: flex; align-items: center; gap: 8px;
	white-space: nowrap;
	font-size: 13.5px;
	line-height: 1.2;
	padding: 8px 0;
	flex: none;
}
.ss-usp li::before { content: none; }
.ss-usp li + li { position: relative; }
.ss-usp li + li::after {
	content: ""; position: absolute; left: -15px; top: 50%;
	width: 1px; height: 15px; margin-top: -7px;
	background: rgba(243, 231, 214, .22);
}
.ss-usp strong { color: var(--gold-light); font-weight: 700; }
.ss-usp .ss-ic { color: var(--gold); width: 17px; height: 17px; }

/* Auf dem Handy darf die Leiste seitlich geschoben werden; ein leichter
   Verlauf am Rand zeigt, dass rechts noch mehr steht. */
@media (max-width: 900px) {
	.ss-usp { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
	.ss-usp ul { gap: 0 22px; }
	.ss-usp li { font-size: 13px; }
	.ss-usp li + li::after { left: -11px; }
}

/* ==========================================================================
   Klimablöcke: Temperatur und Regen getrennt, mit Zahlen statt Schätzbalken
   ========================================================================== */

.ss-clima { margin-top: 4px; display: grid; gap: 20px; }
.ss-clima-block h3 {
	font-family: var(--font-body);
	font-size: 13px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 10px;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
	border: none; padding: 0;
}
.ss-clima-block h3 span {
	font-size: 12.5px; font-weight: 500; letter-spacing: 0;
	text-transform: none; color: var(--muted);
}

.ss-clima-grid {
	display: grid; grid-template-columns: repeat(12, 1fr);
	gap: 3px;
}
.ss-clima-col {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 5px 0 4px;
	border-radius: 8px;
	text-align: center;
}
.ss-clima-col.is-now { background: var(--sand); box-shadow: inset 0 0 0 1px var(--sand-deep); }

/* Temperatur */
.ss-clima-hi { font-size: 12.5px; font-weight: 800; color: var(--rot); font-variant-numeric: tabular-nums; }
.ss-clima-lo { font-size: 11.5px; font-weight: 600; color: var(--azul); font-variant-numeric: tabular-nums; }
.ss-clima-hi i, .ss-clima-lo i { font-style: normal; opacity: .65; }
.ss-clima-track { position: relative; width: 100%; height: 74px; display: block; }
.ss-clima-band {
	position: absolute; left: 32%; right: 32%;
	bottom: var(--bot); top: calc(100% - var(--top));
	min-height: 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--rot) 0%, var(--gold) 60%, var(--azul) 100%);
}

/* Regen */
.ss-clima-grid.is-rain .ss-clima-track { height: 52px; }
.ss-clima-mm { font-size: 12px; font-weight: 700; color: var(--azul-dark); font-variant-numeric: tabular-nums; }
.ss-clima-mm i { font-style: normal; font-size: 9.5px; font-weight: 600; opacity: .7; margin-left: 1px; }
.ss-clima-drop {
	position: absolute; left: 18%; right: 18%; bottom: 0;
	height: var(--h); min-height: 3px;
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, #6FA4CC 0%, var(--azul) 100%);
}
.ss-clima-days { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ss-clima-mon { font-size: 11.5px; font-weight: 700; color: var(--ink); }

@media (max-width: 620px) {
	.ss-clima-grid { gap: 1px; }
	.ss-clima-hi { font-size: 10.5px; }
	.ss-clima-lo, .ss-clima-mm { font-size: 9.5px; }
	.ss-clima-mm i, .ss-clima-days { display: none; }
	.ss-clima-track { height: 56px; }
	.ss-clima-grid.is-rain .ss-clima-track { height: 40px; }
	.ss-clima-mon { font-size: 10px; }
}

/* --------------------------------------------------------------------------
   Kontrast auf farbigen Flächen absichern
   Plugins und Caches können die Grundfarbe für Links überschreiben. Auf den
   dunklen Blöcken muss der Text aber immer hell bleiben, sonst steht dunkles
   Blau auf dunklem Rot.
   -------------------------------------------------------------------------- */

.ss-feature-link,
.ss-feature-link:hover,
.ss-feature-link:focus,
.ss-feature-link:visited { color: #FFF8EC; }
.ss-feature-link .ss-feature-t,
.ss-feature-link .ss-card-cta,
.ss-feature-link span { color: #FFF8EC; position: relative; z-index: 1; }
.ss-feature-link .ss-feature-k { color: var(--gold-light); }
.ss-feature-link .ss-ic { color: var(--gold-light); }

.ss-section-dark a,
.ss-section-dark a:visited { color: #FFF8EC; }
.ss-section-dark .ss-more,
.ss-section-dark .ss-more:visited { color: var(--gold-light); }
.ss-footer a,
.ss-footer a:visited { color: #EBDCCB; }
.ss-footer .ss-foot-col a:hover { color: #fff; }
.ss-usp a, .ss-usp a:visited { color: var(--gold-light); }