/*
Theme Name:   MyGermanCity
Theme URI:    https://www.mygermancity.com
Description:  Full Site Editing theme for MyGermanCity.com
Author:       MyGermanCity.com
Author URI:   https://www.mygermancity.com
Version:      1.0.2
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.3
License:      Proprietary – All Rights Reserved
License URI:  https://www.mygermancity.com
Text Domain:  mygc
*/

/* ==========================================================================
   NOTE ON CSS ARCHITECTURE
   Styles werden in drei Schichten ausgeliefert:
   (a) theme.json → inline <style id="global-styles-inline-css">  (Global Styles)
   (b) wp-block-library / wp-block-library-theme  (Core Block Styles, auto-loaded)
   (c) diese style.css  (Komponenten- & Legacy-Content-Styles, via functions.php)
   ========================================================================== */


/* ==========================================================================
   DESIGN TOKENS  (ersetzen die theme.json-Presets; siehe Schritt 4)
   Namen bewusst identisch zu WordPress, damit bestehende var()-Aufrufe
   in dieser Datei unverändert weiterfunktionieren.
   ========================================================================== */
:root {
	/* Farben (black entfällt – nirgends referenziert) */
	--wp--preset--color--country-teal:   #1282aa;
	--wp--preset--color--culture-red:     #bc0707;
	--wp--preset--color--vacation-green:  #197800;
	--wp--preset--color--business-blue:   #1260b2;
	--wp--preset--color--politics-gray:   #4c4d4e;
	--wp--preset--color--info-purple:     #842c91;
	--wp--preset--color--blog-gold:       #7d5c00;
	--wp--preset--color--booking-orange:  #b84d00;
	--wp--preset--color--white:           #ffffff;
	--wp--preset--color--link-blue:       #0000ff;
	--wp--preset--color--taoi-box:        #eff4fa;
	--wp--preset--color--button-silver:   #c0c0c0; /* klassisches ungestyltes Browser-Button-Grau (CSS-Named-Color "silver"); Hamburger, X, Such-Button */
	--wp--preset--color--map-pin:         #e53935; /* Punkt, Label-Umrandung, Leitlinie auf der Deutschlandkarte — EINE Stelle für alle drei */
	--mygc-map-pin-opacity:               0.8;     /* 1 = deckend, 0.8 = 20% Transparenz. Gilt ebenfalls für alle drei gemeinsam. */

	/* Font-Sizes – Skala um 1 Stufe angehoben */
	--wp--preset--font-size--x-small:     0.875rem;                                  /* war 0.75rem */
	--wp--preset--font-size--small:       1rem;                                      /* war 0.875rem */
	--wp--preset--font-size--base:        clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);/* war 1rem, jetzt fluid */
	--wp--preset--font-size--large:       clamp(1.3125rem, 1.26rem + 0.3vw, 1.5rem); /* war large=x-large-Wert */
	--wp--preset--font-size--x-large:     clamp(1.5rem,   1.35rem + 0.75vw, 2rem);
	--wp--preset--font-size--xx-large:    clamp(1.75rem,  1.52rem + 1.15vw, 2.5rem);
	--wp--preset--font-size--xxx-large:   clamp(2rem,     1.7rem + 1.4vw, 2.875rem); /* neu, extrapoliert */

	/* Spacing */
	--wp--preset--spacing--1: 0.25rem;
	--wp--preset--spacing--2: 0.5rem;
	--wp--preset--spacing--3: 0.75rem;
	--wp--preset--spacing--4: 1rem;
	--wp--preset--spacing--5: 1.5rem;
	--wp--preset--spacing--6: 2rem;
	--wp--preset--spacing--7: 3rem;
	--wp--preset--spacing--8: 4rem;
	--wp--preset--spacing--9: 6rem;
}
/* Preset-Utility-Klassen (vormals von theme.json generiert) */
.has-country-teal-color   { color: var(--wp--preset--color--country-teal); }
.has-culture-red-color    { color: var(--wp--preset--color--culture-red); }
.has-vacation-green-color { color: var(--wp--preset--color--vacation-green); }
.has-business-blue-color  { color: var(--wp--preset--color--business-blue); }
.has-politics-gray-color  { color: var(--wp--preset--color--politics-gray); }
.has-info-purple-color    { color: var(--wp--preset--color--info-purple); }
.has-booking-orange-color { color: var(--wp--preset--color--booking-orange); }
.has-taoi-box-background-color { background-color: var(--wp--preset--color--taoi-box); }

.has-x-small-font-size  { font-size: var(--wp--preset--font-size--x-small); }
.has-small-font-size    { font-size: var(--wp--preset--font-size--small); }
.has-base-font-size     { font-size: var(--wp--preset--font-size--base); }
.has-large-font-size    { font-size: var(--wp--preset--font-size--large); }
.has-xx-large-font-size { font-size: var(--wp--preset--font-size--xx-large); }
.has-xxx-large-font-size{ font-size: var(--wp--preset--font-size--xxx-large); }


/* ==========================================================================
   GLOBAL ELEMENT DEFAULTS (vormals theme.json > styles.elements)
   ========================================================================== */
a {
	color: var(--wp--preset--color--link-blue);
	text-decoration: underline;
}
a:hover  { color: #0000cc; text-decoration: none; }
a:visited { color: #0000ff; }

.wp-element-button,
.wp-block-button__link {
	border-radius: 4px;
	background-color: var(--wp--preset--color--country-teal);
	color: #ffffff;
	padding: 0.625rem 1.25rem;
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: #239cca;
	color: #ffffff;
}
.wp-element-button:visited,
.wp-block-button__link:visited {
	color: #ffffff;
}

h1 { font-size: var(--wp--preset--font-size--xxx-large); font-weight: 600; line-height: 1.2;  margin: 0 0 0.5em; }
h2 { font-size: var(--wp--preset--font-size--xx-large);  font-weight: 600; line-height: 1.25; margin: 1.5em 0 0.5em; }
h3 { font-size: var(--wp--preset--font-size--x-large);   font-weight: 600; line-height: 1.3;  margin: 1.5em 0 0.5em; }
h4 { font-size: var(--wp--preset--font-size--large);     font-weight: 600; line-height: 1.35; margin: 1.5em 0 0.5em; }
h5 { font-size: var(--wp--preset--font-size--base);      font-weight: 700; line-height: 1.4;  margin: 1.5em 0 0.5em; }
h6 {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 1.5em 0 0.5em;
}

figcaption, .wp-element-caption {
	color: var(--wp--preset--color--politics-gray);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
}

cite { font-style: italic; }

/* ==========================================================================
   GLOBAL BLOCK DEFAULTS (vormals theme.json > styles.blocks)
   ========================================================================== */
.mygc-main-nav {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
}

/* .wp-block-post-title bewusst entfernt (Juli 2026): war identisch zur
   h1-Regel oben. <h1 class="wp-block-post-title"> auf single.html,
   page.html, single-map.html, single-wide.html erbt alle Werte bereits
   vollständig vom h1-Selektor.
   NEBENEFFEKT (gewünscht): Auf front-page.html (level:3 → h3, fontSize
   "base") und index.html/home.html/search.html (kein level → WP-Default
   h2, fontSize "large") wurde durch diese Regel bisher per Ladereihenfolge
   die vom Block gesetzte fontSize überschrieben — Karten-/Listentitel
   erschienen fälschlich in xxx-large/700 statt in ihrer eigentlich
   konfigurierten Größe. Ohne diese Regel greifen dort korrekt die
   has-base-font-size/has-large-font-size-Utility-Klassen. */

hr.wp-block-separator {
	border-color: var(--wp--preset--color--politics-gray);
	border-style: solid;
	border-width: 1px;
}

.wp-block-site-logo { border-radius: 0; }

.wp-block-quote {
	border-color: var(--wp--preset--color--country-teal);
	border-style: solid;
	border-width: 0 0 0 4px;
	padding: 0.5rem 0 0.5rem 1.25rem;
}

.wp-block-pullquote {
	border-color: var(--wp--preset--color--country-teal);
	border-style: solid;
	border-width: 3px 0;
	font-style: italic;
	line-height: 1.5;
}

.wp-block-search .wp-block-search__input {
	border-radius: 4px;
}

.wp-block-table {
	background-color: #ffffff;
	font-size: var(--wp--preset--font-size--base);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

/* Outer header group — Border + Padding (vormals inline in header.html) */
.mygc-site-header {
	background: #fff;
	border-bottom: 1px solid #e3e5e7;
	padding-block: var(--wp--preset--spacing--4);
}

/* Logo link: icon (img) + SVG text side by side */
.mygc-logo-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	width: fit-content;
}

.mygc-logo-icon {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
}

.mygc-logo-text {
	width: 185px;
	height: auto;
	display: block;
	font-family: Arial, Helvetica, sans-serif; /* fest statt generisch, s. Kommentar unten bei .mygc-logo-title */
}

/* SVG text colours + Größen (CSS überschreibt SVG-Attribute).
   font-size in px, NICHT unitless: unitless <number> ist laut CSS-Spec nur
   als SVG-Präsentationsattribut (<text font-size="28">) zuverlässig gültig,
   nicht als CSS-Property in einem externen Stylesheet — dort verlangt CSS
   für Längenwerte grundsätzlich eine Einheit, sonst wird die Deklaration
   verworfen und fällt still auf die ererbte Body-font-size zurück (Bug,
   identisch in Brave/Edge/Firefox reproduziert). px entspricht innerhalb
   von SVG-Inhalten exakt 1 User-Unit der viewBox "0 0 195 58" — numerisch
   also dasselbe Ergebnis, nur mit gültiger, eindeutiger Syntax.
   Titel/Tagline haben absichtlich dieselbe Ziel-Breite (textLength="188"
   in header.html, cross-Browser/-System-Normalisierung) — die Größen
   hier sind so gewählt, dass die NATÜRLICHE Breite beider Zeilen bereits
   ~188 Einheiten beträgt (Titel 187, Tagline 189, gemessen an Arial-
   Metriken), sodass lengthAdjust="spacing" nur noch ±1 Einheit
   nachjustiert statt sichtbar zu strecken/stauchen. Voraussetzung dafür:
   .mygc-logo-text braucht eine feste font-family (Arial statt generisch
   "sans-serif") — sonst entscheidet das Betriebssystem, welche Schrift
   einspringt, und die tatsächliche Breite weicht von diesen Werten ab. */
.mygc-logo-title   { fill: #333333; font-weight: 400; font-size: 28px; }
.mygc-logo-tagline { fill: #666666; font-size: 15px; }

/* Optional: icon stapelt sich über Text auf kleinen Phones */
@media (max-width: 480px) {
	.mygc-logo-link {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.mygc-logo-text { width: 155px; }
}

/* Search field in the logo-row flex group */
.mygc-header-search {
	flex-shrink: 0;
}

.mygc-header-search .wp-block-search__inside-wrapper {
	border: 1px solid #c5c8cc;
	border-radius: 4px;
	overflow: hidden;
}

.mygc-header-search .wp-block-search__input {
	min-width: 180px;
	padding: 0.375rem 0.5rem;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	background: transparent;
}

.mygc-header-search .wp-block-search__button {
	background: var(--wp--preset--color--button-silver);
	color: var(--wp--preset--color--politics-gray); /* dunkles Icon statt Weiß — Kontrast auf hellem Silber */
	border: 0;
	border-left: 1px solid #c5c8cc;
	padding: 0.375rem 0.625rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: background 0.15s ease;
}

.mygc-header-search .wp-block-search__button svg {
	fill: currentColor;
	width: 16px;
	height: 16px;
	display: block;
}

.mygc-header-search .wp-block-search__button:hover {
	background: #a8a8a8; /* dunklere Stufe von button-silver — gleiche Logik wie zuvor bei country-teal/#239cca */
}

/* Narrow screens: search drops below logo row (flex-wrap handles this) */
@media (max-width: 480px) {
	.mygc-header-search .wp-block-search__input {
		min-width: 140px;
	}
}


/* ==========================================================================
   MAIN NAVIGATION – Button Hover Effect
   font-weight: 600 is set in theme.json under blocks › core/navigation.
   Each nav-link block carries a className (nav-country, nav-culture, …)
   set in header.html — used below for both the resting text colour and
   the hover/focus/active background fill.

   HOW THE BUTTON HOVER WORKS
   On hover/focus/active:
     · background-color = the section's colour (set per .nav-* class below)
     · color            = #fff  →  !important is required because the
                                   resting-state colour rule below has
                                   equal specificity and would otherwise
                                   win on source order alone

   LAYOUT SHIFT PREVENTION
   padding + border-radius applied in the BASE state (not just on :hover)
   so the pill dimensions are the same before and after hover → no jump.
   ========================================================================== */

/* Slight top gap separating nav row from logo row */
.mygc-main-nav {
	margin-top: 0.375rem;
}


/* Base state – pill shape ready; padding here prevents hover layout shift.
   align-items:center hat hier KEINE zentrierende Wirkung (Container-Höhe
   ist auto, kein Überschuss zum Verteilen) — die eigentliche vertikale
   Zentrierung übernimmt die asymmetrische padding-block-Korrektur unten
   (Ascent/Descent-Ungleichgewicht der Schrift), analog .mygc-footer-heading a. */
.mygc-main-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	padding-block: 0.2em 0.34em; /* asymmetrisch: gleiche Font-Metrik-Korrektur wie .mygc-footer-heading a (+0.14em unten) */
	padding-inline: 0.45em;
	border-radius: 4px;
	transition: background-color 0.15s ease, color 0.1s ease;
}

/* Shared interactive state (hover / keyboard focus / tap) */
.mygc-main-nav .wp-block-navigation-item__content:hover,
.mygc-main-nav .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .wp-block-navigation-item__content:active {
	color: #fff !important;
	text-decoration: none;
	outline: none;
}

/* Subtle press feedback on click */
.mygc-main-nav .wp-block-navigation-item__content:active {
	opacity: 0.80;
}

/* ── Per-section text colour (resting state) ──────────────── */

.mygc-main-nav .nav-country .wp-block-navigation-item__content { color: var(--wp--preset--color--country-teal); }
.mygc-main-nav .nav-culture .wp-block-navigation-item__content { color: var(--wp--preset--color--culture-red); }
.mygc-main-nav .nav-vacation .wp-block-navigation-item__content { color: var(--wp--preset--color--vacation-green); }
.mygc-main-nav .nav-business .wp-block-navigation-item__content { color: var(--wp--preset--color--business-blue); }
.mygc-main-nav .nav-politics .wp-block-navigation-item__content { color: var(--wp--preset--color--politics-gray); }
.mygc-main-nav .nav-info .wp-block-navigation-item__content { color: var(--wp--preset--color--info-purple); }
.mygc-main-nav .nav-booking .wp-block-navigation-item__content { color: var(--wp--preset--color--booking-orange); }
.mygc-main-nav .nav-blog .wp-block-navigation-item__content { color: var(--wp--preset--color--blog-gold); }

/* ── Per-section background fills (hover / focus / active) ── */

.mygc-main-nav .nav-country .wp-block-navigation-item__content:hover,
.mygc-main-nav .nav-country .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .nav-country .wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--country-teal);
}

.mygc-main-nav .nav-culture .wp-block-navigation-item__content:hover,
.mygc-main-nav .nav-culture .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .nav-culture .wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--culture-red);
}

.mygc-main-nav .nav-vacation .wp-block-navigation-item__content:hover,
.mygc-main-nav .nav-vacation .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .nav-vacation .wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--vacation-green);
}

.mygc-main-nav .nav-business .wp-block-navigation-item__content:hover,
.mygc-main-nav .nav-business .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .nav-business .wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--business-blue);
}

.mygc-main-nav .nav-politics .wp-block-navigation-item__content:hover,
.mygc-main-nav .nav-politics .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .nav-politics .wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--politics-gray);
}

.mygc-main-nav .nav-info .wp-block-navigation-item__content:hover,
.mygc-main-nav .nav-info .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .nav-info .wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--info-purple);
}

.mygc-main-nav .nav-booking .wp-block-navigation-item__content:hover,
.mygc-main-nav .nav-booking .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .nav-booking .wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--booking-orange);
}

.mygc-main-nav .nav-blog .wp-block-navigation-item__content:hover,
.mygc-main-nav .nav-blog .wp-block-navigation-item__content:focus-visible,
.mygc-main-nav .nav-blog .wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--blog-gold);
}


/* ==========================================================================
   MAIN NAVIGATION – Mobile-Overlay (Hamburger-Menü)
   Core-Markup/-Klassen der Standard-Overlay-Ansicht des Navigation-Blocks
   (unverändert seit Einführung des Blocks; auch in WP 7.0 weiterhin
   Default-Verhalten, solange header.html kein "overlay"-Attribut für die
   neuen Custom Navigation Overlays setzt).
   ========================================================================== */

/* Close-Button (X): klebte am oberen rechten Rand */
.mygc-main-nav .wp-block-navigation__responsive-container-close {
	margin: var(--wp--preset--spacing--4);
}

/* Sektions-Links im geöffneten Overlay: klebten am linken Rand.
   WICHTIG: .responsive-container-content ist derselbe Wrapper auf ALLEN
   Viewports (nicht exklusiv für das Mobile-Overlay) — ohne .is-menu-open-
   Scoping griff das Padding daher auch auf Desktop und schob dort die
   Sektions-Links insgesamt nach rechts. Gleicher Bug-Typ wie zuvor beim
   Hamburger-Button (display statt display:none auf Desktop). */
.mygc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--4);
}

/* Hover-Pill-Innenabstand (padding-inline, s. oben) im Overlay zur
   Sicherheit erneut gesetzt — Cores eigene Vollbild-Overlay-Styles
   greifen mit anderer Spezifität und können das sonst überschreiben. */
.mygc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-inline: 0.45em;
}

/* Hamburger-Button (geschlossen) + X-Button (offen): derselbe Hover-Pill-
   Effekt wie bei den Sektions-Links. "display" wird bewusst NICHT gesetzt —
   Core steuert das Ein-/Ausblenden per Breakpoint direkt auf diesem
   Element; ein eigener display-Wert hier würde das Verstecken auf breiten
   Viewports überschreiben. Icons nutzen fill="currentColor" (WP-Core-
   Standard), daher reicht eine color-Änderung, kein separates svg-Targeting. */
.mygc-main-nav .wp-block-navigation__responsive-container-open,
.mygc-main-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	padding: 0.4em;
	border-radius: 4px;
	transition: background-color 0.15s ease, color 0.1s ease;
}

.mygc-main-nav .wp-block-navigation__responsive-container-open:hover,
.mygc-main-nav .wp-block-navigation__responsive-container-open:focus-visible,
.mygc-main-nav .wp-block-navigation__responsive-container-open:active,
.mygc-main-nav .wp-block-navigation__responsive-container-close:hover,
.mygc-main-nav .wp-block-navigation__responsive-container-close:focus-visible,
.mygc-main-nav .wp-block-navigation__responsive-container-close:active {
	background-color: var(--wp--preset--color--button-silver);
	color: var(--wp--preset--color--politics-gray);
	outline: none;
}

/* Subtle press feedback, analog zu den Sektions-Links */
.mygc-main-nav .wp-block-navigation__responsive-container-open:active,
.mygc-main-nav .wp-block-navigation__responsive-container-close:active {
	opacity: 0.80;
}


/* ==========================================================================
   BREADCRUMBS
   [mygc_breadcrumbs] outputs a bare <ol> inside .mygc-breadcrumbs.
   Padding hier gesetzt (vormals inline in breadcrumbs.html, ~9.886 Seiten).
   ========================================================================== */

.mygc-breadcrumbs {
	padding-block: var(--wp--preset--spacing--2);
}

/* Horizontal flex list, wraps on narrow screens */
.mygc-breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.4rem; /* war 0.25rem — mehr Abstand links vom "›" */
	color: var(--wp--preset--color--politics-gray);
}

.mygc-breadcrumbs ol li {
	display: flex;
	align-items: center;
	gap: 0 0.4rem; /* war 0.25rem — mehr Abstand rechts vom "›" */
}

/* "›" separator before every item except the first */
.mygc-breadcrumbs ol li + li::before {
	content: "›";
	font-size: var(--wp--preset--font-size--x-large); /* 2 Stufen über dem Breadcrumb-Text (base) */
	color: var(--wp--preset--color--politics-gray);
	flex-shrink: 0;
}

.mygc-breadcrumbs ol a {
	color: var(--wp--preset--color--link-blue);
	text-decoration: underline;
}

.mygc-breadcrumbs ol a:hover {
	color: #0000cc;
	text-decoration: none;
}

.mygc-breadcrumbs ol a:visited {
	color: #0000ff;
}

/* Current page: last list item, set via aria-current="page" */
.mygc-breadcrumbs ol li[aria-current="page"] span {
	color: #000;
	font-weight: 600;
}


/* ==========================================================================
   SIDEBAR – Shared component styles (mygc-sb-*)
   Output by mygc_render_sb_section() in functions.php.
   These classes appear in sidebar-place.html and sidebar-region.html.
   ========================================================================== */

/* Outer box for each sidebar section */
.mygc-sb-section {
	background: var(--wp--preset--color--taoi-box);
	border-radius: 4px;
	padding: 0.625rem 0.75rem 0.75rem;
	box-sizing: border-box; /* NEU: Padding darf die berechnete Breite nicht sprengen */
}

/* Section label (rendered as <h3 class="mygc-sb-title">).
   font-weight und line-height entfernt (Juli 2026): identisch zur h3-
   Basisregel, greift jetzt automatisch (600). Nur die Abweichungen von h3
   bleiben hier explizit stehen: kleinere font-size (base statt x-large)
   und knappe margin (h3 hätte 1.5em 0 0.5em — hier unerwünscht, da erstes
   Element in der Box). */
.mygc-sb-title {
	font-size: var(--wp--preset--font-size--base); /* war: --small, wirkte zu klein */
	color: #000;
	margin: 0 0 0.375rem;
}

/* Optional thumbnail image */
.mygc-sb-thumb {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	margin-bottom: 0.5rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Link list */
.mygc-sb-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.mygc-sb-list li {
	line-height: 1.4;
}

.mygc-sb-list a {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--link-blue);
	text-decoration: underline;
}

.mygc-sb-list a:hover {
	text-decoration: none;
	color: #0000cc;
}


/* ==========================================================================
   SIDEBAR – Place Location Map
   mygc_place_location() in functions.php outputs:
     .mygc-sb-section--location > a.mygc-sb-location-link.mygc-map-wrap
   (a.mygc-sb-location-link traegt BEIDE Klassen — kein verschachteltes div
   mehr, da <div> innerhalb von <a> von wpautop() zerlegt wurde.)
   Kinder: <img> (Germany outline, raster WebP) + <svg> (pin overlay).
   ========================================================================== */

/* Map wrapper: position:relative so the pin overlay SVG can use position:absolute */
.mygc-map-wrap {
	position: relative;
	display: block;
	line-height: 0; /* collapses inline-SVG gap */
}

/* Germany outline image — fills the wrapper width */
.mygc-map-wrap > img:first-child {
	display: block;
	width: 100%;
	height: auto;
}

/* Link wrapping the map */
.mygc-sb-location-link {
	display: block;
	text-decoration: none;
	border-radius: 3px;
	overflow: hidden;
}

.mygc-sb-location-link:hover {
	opacity: 0.88;
}

.mygc-sb-location-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--country-teal);
	outline-offset: 2px;
}


/* ==========================================================================
   SIDEBAR – Sticky behaviour
   Block editor outputs position:sticky;top:0 as inline style.
   We override `top` so the sidebar clears the visible viewport edge.

   Tip: if the WordPress admin bar causes overlap (logged-in editors), add:
     .admin-bar .mygc-sidebar-place,
     .admin-bar .mygc-sidebar-region { top: calc(32px + 1rem) !important; }
   ========================================================================== */

/* .mygc-sidebar-place UND .mygc-sidebar-region: identisches, flaches
   2-Spalten-Flow-Layout (kein wp:columns/wp:column-Wrapper mehr).
   Alle Bereiche sind direkte Kinder des jeweiligen <aside>. Ein leerer
   Bereich liefert '' aus dem Shortcode und erzeugt dadurch KEIN Element
   im HTML -> die uebrigen Bereiche ruecken automatisch nach und fuellen
   die Luecke. Ein einzeln uebrig bleibender Bereich behaelt dabei seine
   reguläre 50%-Breite (flex-grow:0 -> kein Stretch auf volle Breite). */
.mygc-sidebar-place,
.mygc-sidebar-region {
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--3); /* row-gap column-gap */
	align-items: flex-start; /* Boxen sollen NICHT auf gleiche Zeilenhoehe gestreckt werden */
}

.mygc-sidebar-place > .mygc-sb-section,
.mygc-sidebar-region > .mygc-sb-section {
	flex: 0 1 calc(50% - (var(--wp--preset--spacing--3) / 2));
}

.mygc-sidebar-place,
.mygc-sidebar-region {
	top: 1rem !important; /* override inline top:0 */
}

/* On mobile the wp:columns block stacks vertically — disable sticky */
@media (max-width: 781px) {
	.mygc-sidebar-place,
	.mygc-sidebar-region {
		position: static !important;
		top: auto !important;
	}
}


/* ==========================================================================
   TOP AREAS OF INTEREST (mygc-taoi)
   HTML output from MGC: Areas plugin (mgc_areas.php, v1.2.0).
   ========================================================================== */

.mygc-taoi {
	background: var(--wp--preset--color--taoi-box);
	border-radius: 4px;
	padding: 0.875rem 1.25rem 1rem;
	margin-block: 1.5rem;
}

.mygc-taoi__title {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 0.5rem;
}

/* 3-Spalten-Raster, zeilenweise gefuellt (1-2-3 / 4-5-6 / ...), wie im
   alten Theme bzw. auf den "German Cities A-Z"-Seiten. Sortierung kommt
   aus mgc_areas.php (Order-Feld der Meta-Box, ksort SORT_NATURAL). */
.mygc-taoi__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.25rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Schmalere Viewports: 2 Spalten, sehr schmale: 1 Spalte */
@media (max-width: 600px) {
	.mygc-taoi__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 380px) {
	.mygc-taoi__list {
		grid-template-columns: 1fr;
	}
}

/* HTML aus mgc_areas.php: <li><a href="...">Webcams</a> (3)</li>
   Der Zusatztext ("(3)") ist reiner Text NACH dem Link, kein Teil davon.
   display:block auf den Link selbst wuerde ihn (und damit alles danach)
   auf eine eigene Zeile zwingen -> stattdessen: unsichtbares ::after-Overlay,
   das relativ zum <li> (nicht zum <a>) die gesamte Zelle abdeckt. Der Link
   selbst bleibt normal inline, "(3)" bleibt an Ort und Stelle. */
.mygc-taoi__list li {
	position: relative;
}

.mygc-taoi__list a {
	color: var(--wp--preset--color--link-blue);
	text-decoration: underline;
}

.mygc-taoi__list a::after {
	content: '';
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.mygc-taoi__list a:hover {
	color: #0000cc;
	text-decoration: none;
}


/* ==========================================================================
   CITY LISTS – Legacy (Classic Editor content)
   HTML structure in existing posts:
     <div class="list3">
       <h2 class="listHead">German Cities — Letter B</h2>
       <ul class="list3col">…</ul>
       <ul class="list3colNext">…</ul>
       <ul class="list3colNext">…</ul>
     </div>

   MODERN APPROACH: CSS Grid on the wrapper div.
   The h2.listHead spans all columns; the three <ul> elements auto-place
   into three equal columns on desktop.

   WHY CSS GRID instead of CSS columns?
   The content is split across three separate <ul> elements — items were
   manually sorted by the editor into three groups. Grid keeps each <ul>
   as its own column. Items maintain their intended top-to-bottom order
   within each column without JS or content migration.
   ========================================================================== */

.list3 {
	margin-block: 1.5rem;
}

/* Section heading — spans all grid columns */
.list3 .listHead {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--country-teal);
}

/* Reset list styles for all columns */
.list3 .list3col,
.list3 .list3colNext {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

.list3 .list3col li,
.list3 .list3colNext li {
	padding: 0.125rem 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.list3 .list3col a,
.list3 .list3colNext a {
	display: block;
	color: var(--wp--preset--color--link-blue);
	text-decoration: underline;
}

.list3 .list3col a:hover,
.list3 .list3colNext a:hover {
	text-decoration: none;
	color: #0000cc;
}

/* Desktop: 3-column grid */
@media (min-width: 768px) {
	.list3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 2rem;
		align-items: start;
	}
	.list3 .listHead {
		grid-column: 1 / -1;
	}
}

/* Tablet: 2-column grid */
@media (min-width: 480px) and (max-width: 767px) {
	.list3 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 1.5rem;
		align-items: start;
	}
	.list3 .listHead {
		grid-column: 1 / -1;
	}
}

/* Mobile: single column — stacks naturally, no grid needed */


/* ==========================================================================
   CITY LISTS – Modern (FSE/Block Editor)
   For new content: use a single <ul> with CSS columns.
   CSS columns automatically reflow items in alphabetical top-to-bottom order
   within each column — no manual splitting into separate UL elements needed.

   Usage:
     <div class="mygc-city-list">
       <h2 class="mygc-city-list__heading">German Cities — Letter B</h2>
       <ul class="mygc-city-list__items">
         <li>Baabe</li>
         <li><a href="/baar-ebenhausen">Baar-Ebenhausen</a></li>
         …
       </ul>
     </div>

   The `columns: 3 200px` shorthand means: "up to 3 columns,
   minimum 200 px each". The browser reduces the column count
   automatically when the container is narrow — zero media queries needed.
   ========================================================================== */

.mygc-city-list {
	margin-block: 1.5rem;
}

.mygc-city-list__heading {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--country-teal);
}

.mygc-city-list__items {
	columns: 3 200px;           /* auto-responsive */
	column-gap: 2rem;
	column-fill: balance;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mygc-city-list__items li {
	break-inside: avoid;        /* prevents items from splitting across columns */
	padding: 0.125rem 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.mygc-city-list__items a {
	color: var(--wp--preset--color--link-blue);
	text-decoration: underline;
}

.mygc-city-list__items a:hover {
	text-decoration: none;
	color: #0000cc;
}

/* ==========================================================================
   MAPS – Custom Region Maps  (.maps1L / .maps1R)
   Used inside single-region.html post content to show a linked map thumbnail
   floating beside the article text. Naming convention:
     maps1L = 1 map, floated Left
     maps1R = 1 map, floated Right
     maps2L / maps2R = second map in a pair (same float direction)

   Example HTML (unchanged from Classic Editor):
     <div class="maps1L">
       <a href="/allgaeu-map"><img src="…/allgaeu-sm.png" w="150" h="217" alt="Allgäu Map"></a>
       <br>
       <a href="/allgaeu-map">Allgäu Map</a>
     </div>
     The Allgäu is one of the most…

   The <br> between image and text link is hidden; margin replaces it.
   On mobile (≤ 540 px) the float is released and the block centres.
   ========================================================================== */

.maps1L, .maps2L {
	float: left;
	margin: 0 2rem 1.25rem 0;
	margin-top: 0.5em !important;          /* Fallback für Browser ohne 1lh-Support */
	text-align: center;
}

.maps1R, .maps2R {
	float: right;
	margin: 0 0 1.25rem 2rem;
	margin-top: 0.5em !important;
	text-align: center;
}

/* Fund (Juli 2026): WordPress' global-styles-inline-css enthält
   ":root :where(.is-layout-flow) > :first-child { margin-block-start:0; }".
   Nur .is-layout-flow steckt in :where() (Specificity 0) — :root und
   :first-child stehen AUSSERHALB und zählen normal mit, macht zusammen
   (0,2,0). Das schlägt jede reine Klassenregel wie .maps1L/.maps2L
   (0,1,0), unabhängig von Deklarationsreihenfolge oder Dateiposition.
   Betrifft nur Fälle, in denen das Maps-Div zufällig erstes Kind im
   post-content ist. !important gezielt nur auf margin-top, nicht auf
   die ganze Regel. */
@supports (margin-top: 1lh) {
	.maps1L, .maps1R,
	.maps2L, .maps2R {
		--mygc-maps-nudge: 3px;   /* Fund (Juli 2026): (1lh-1em)/2 gleicht nur das
		                             Half-Leading aus, nicht den Abstand zwischen
		                             Em-Box-Oberkante und sichtbarer Cap-Height
		                             (schriftartabhängig, bei Segoe UI ~3px).
		                             Wert hier direkt hochsetzen, falls es noch
		                             zu hoch wirkt — kein Formel-Rechnen nötig. */
		margin-top: calc((1lh - 1em) / 2 + var(--mygc-maps-nudge)) !important;
	}
}

.maps1L img, .maps1R img,
.maps2L img, .maps2R img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	border: 1px solid #e3e5e7;
}

/* Hide <br> between image and caption link */
.maps1L br, .maps1R br,
.maps2L br, .maps2R br {
	display: none;
}

/* Caption / text link below the image */
.maps1L a:last-of-type, .maps1R a:last-of-type,
.maps2L a:last-of-type, .maps2R a:last-of-type {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--link-blue);
	text-decoration: underline;
}

.maps1L a:last-of-type:hover, .maps1R a:last-of-type:hover,
.maps2L a:last-of-type:hover, .maps2R a:last-of-type:hover {
	text-decoration: none;
}

/* Fund (Juli 2026): post-content läuft mit layout:"default" (Flow-Layout).
   Core vergibt dabei automatisch margin-block-start:1.5rem (blockGap) auf
   jedes Kind außer dem ersten. Das Maps-Div (erstes Kind) bleibt bei 0,
   der direkt folgende Fließtext-Absatz (zweites Kind) wird dadurch um
   1.5rem nach unten gedrückt → Bild sitzt höher als die erste Textzeile.
   Core-Regel ist über :where() mit Specificity 0 ausgeliefert, daher
   reicht hier eine normale Klassenregel zum Überschreiben, kein !important. */
.maps1L + *, .maps1R + *,
.maps2L + *, .maps2R + * {
	margin-block-start: 0;
}

/* ==========================================================================
   HOTEL SEARCH WRAPPER
   HTML output from MGC: Hotel IFrame plugin (mgc_hotels.php).
   Fallback button and iframe have inline styles; this rule adds
   block-level spacing and ensures the iframe is fully responsive.
   ========================================================================== */

.mgc-hotel-search {
	margin-block: 1.5rem;
}

.mgc-hotel-search iframe {
	border: 0;
	width: 100%;
	display: block;
}


/* ==========================================================================
   CONTENT – IMAGES
   Ensures legacy <img> tags and block images inside post content are
   never wider than their container. Captions inherit muted colour from
   theme.json (elements › caption).
   ========================================================================== */

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.wp-block-post-content .wp-caption,
.wp-block-post-content figcaption {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--politics-gray);
}


/* ==========================================================================
   CONTENT – TABLES
   theme.json sets core/table background:#fff and font-size:base.
   These rules add borders, padding, header highlight, and zebra rows.
   ========================================================================== */

.wp-block-post-content .wp-block-table table,
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1rem;
}

.wp-block-post-content .wp-block-table td,
.wp-block-post-content .wp-block-table th,
.wp-block-post-content table td,
.wp-block-post-content table th {
	padding: 0.5rem 0.75rem;
	border: 1px solid #e3e5e7;
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content .wp-block-table thead th,
.wp-block-post-content table thead th {
	background: var(--wp--preset--color--taoi-box);
	font-weight: 600;
}

.wp-block-post-content .wp-block-table tbody tr:nth-child(even),
.wp-block-post-content table tbody tr:nth-child(even) {
	background: #f9fafb;
}

/* Horizontal scroll container for wide tables on narrow screens */
.wp-block-post-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   SEARCH RESULTS
   search.html uses wp:query with a border-separated post list.
   The query-pagination is styled below; the result rows get their border
   from inline styles in the template (via wp:group border attributes).
   ========================================================================== */

/* Fund (Juli 2026): WordPress Cores paginate_links() reiht die einzelnen
   <a class="page-numbers">/<span class="page-numbers current"> im HTML
   nur durch ein einzelnes Leerzeichen aneinander — kein CSS-Gap existiert
   zwischen den Zahlen selbst. Core setzt margin-right:.5em nur auf
   .wp-block-query-pagination-numbers als Ganzes (Abstand zu -previous/
   -next), nicht zwischen den Zahlen darin. Fix: expliziter horizontaler
   Abstand pro Zahl. */
.wp-block-query-pagination .page-numbers {
	margin-inline: var(--wp--preset--spacing--1);
}

/* Fund (Juli 2026): border-color allein war ohne border-width/-style
   wirkungslos — die Badge-Größe hing komplett vom Zeichen selbst ab,
   ohne eigenen Spielraum. Jetzt über Padding + echten Border explizit
   deklariert: Padding steuert die Gesamtgröße, border-width die
   sichtbare Rahmenstärke. */
.wp-block-query-pagination .page-numbers.current {
	display: inline-block;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--country-teal);
	color: #fff;
	border: 2px solid var(--wp--preset--color--country-teal);
	border-radius: 4px;
	line-height: 1.2;
}

/* ==========================================================================
   SOCIAL SHARE – patterns/social-share.php
   ========================================================================== */

/* Wrapper: Label + button row side by side (wraps when space is tight) */
.mygc-social-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.875rem;
	padding: 1.25rem 0 0.25rem;
	padding-block: var(--wp--preset--spacing--6);
}

/* "Share:" label */
.mygc-share-label {
	font-weight: 600;
	white-space: nowrap;
}

/* Button list (horizontal, with wrap) */
.mygc-share-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Rectangular share button (applies to both <a> and <button>)
   Fund (Juli 2026 – Redesign): vormals runde 36px-Buttons in Markenfarben
   mit weißem Icon. Jetzt neutrale Rechteck-Buttons mit sichtbarem
   Dienst-Namen: weißer Grund, grauer Rahmen, Icon + Text in Dunkelgrau.
   Icons nutzen fill="currentColor" → EINE Farbangabe (color) steuert
   Icon UND Text. Per-Dienst-Farbregeln und Badge-Modifier entfallen. */
.mygc-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background-color: #fff;
	cursor: pointer;
	text-decoration: none;
	color: #374151;
	font-size: 0.9375rem;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mygc-share-btn:visited {
	color: #374151;
	text-decoration: none;
}

.mygc-share-btn:hover {
	color: #111827;
	background-color: #f3f4f6;
	border-color: #9ca3af;
	text-decoration: none;
}

.mygc-share-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--country-teal);
	outline-offset: 3px;
}

/* SVG icon */
.mygc-share-btn svg {
	width: 18px;
	height: 18px;
	display: block;
	flex-shrink: 0;
	pointer-events: none;
}

/* Print button: browser reset (Buttons erben sonst System-UI-Font) */
button.mygc-share-btn {
	background-image: none;
	font-family: inherit;
}

/* Small screens (≤ 480 px): slightly more compact buttons */
@media (max-width: 480px) {
	.mygc-share-btn {
		padding: 0.4rem 0.65rem;
		font-size: 0.875rem;
	}
	.mygc-share-btn svg {
		width: 16px;
		height: 16px;
	}
}

/* --------------------------------------------------------------------------
   EMAIL SHARE DIALOG (#mygc-email-dialog)
   <dialog> wird per mygc-email-dialog.js ins DOM eingefuegt (nur Singular-
   Seiten mit aktivem WP-EMail-Plugin, siehe functions.php Abschnitt 21).
   Laedt die WP-EMail-Popup-Seite (/emailpopup/) in einem iframe als
   Overlay — Ersatz fuer das window.open()-Popup-Fenster des Plugins.
   Formular-Styling IM iframe: assets/css/wp-email-form.css.
   -------------------------------------------------------------------------- */
#mygc-email-dialog {
	width: min(520px, calc(100vw - 2rem));
	height: min(660px, calc(100vh - 2rem));
	padding: 0;
	border: none;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

#mygc-email-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

#mygc-email-dialog .dlg-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: #f3f4f6;
	color: #374151;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

#mygc-email-dialog .dlg-close:hover {
	background: #e5e7eb;
	color: #111827;
}

/* iframe fuellt den Dialog vollstaendig; Scrollen uebernimmt bei Bedarf
   das Dokument IM iframe */
#mygc-email-dialog .dlg-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}


/* ==========================================================================
   MAIN CONTENT WRAPPER (.site-main)
   Genutzt von 404, home, index, page, search, single, single-map,
   single-place, single-region, single-wide.
   Fund: Padding war in der Template-JSON deklariert, aber nie tatsächlich
   inline ausgegeben — war faktisch wirkungslos. Jetzt hier zentral gesetzt.
   ========================================================================== */
.site-main {
	padding-bottom: var(--wp--preset--spacing--7);
	/* kein eigenes Top-Padding: .mygc-breadcrumbs liefert bereits
	   padding-bottom:spacing|3 direkt darüber — das reicht als Abstand
	   zum Post-Title. */
}

/* single-place.html: Content/Sidebar-Columns-Gap (selbe Ursache wie oben) */
.mygc-place-cols.wp-block-columns {
	gap: 0 var(--wp--preset--spacing--6);
}


/* ==========================================================================
   FOOTER NAVIGATION
   Lists rendered via wp:list with className mygc-footer-nav / mygc-footer-admin
   inside footer.html. Spacing kept tight for a compact multi-column footer.
   ========================================================================== */

.mygc-footer-nav.wp-block-list,
.mygc-footer-admin.wp-block-list {
	list-style: none;
	padding-inline-start: 0;
}

.mygc-footer-nav.wp-block-list {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--x-small); /* NEU */
}

.mygc-footer-nav.wp-block-list li + li {
	margin-top: 0.125rem;
}

.mygc-footer-admin.wp-block-list {
	margin: 0.25rem 0;
}

.mygc-footer-admin.wp-block-list li + li {
	margin-top: 0.0625rem;
}

.mygc-footer-nav a,
.mygc-footer-admin a {
	display: block;
	color: #000;
	text-decoration: none;
}

.mygc-footer-nav a:hover,
.mygc-footer-admin a:hover {
	text-decoration: underline;
}

/* Prevent avatar from shrinking in the flex row */
.mygc-footer-avatar {
	flex-shrink: 0;
}
 
/* Links im About-Textbereich: umgekehrtes Underline-Verhalten */
.mygc-footer-about a {
	color: #000;
	text-decoration: underline;
}
.mygc-footer-about a:hover { text-decoration: none; }

/* Copyright line rendered by [mygc_copyright] shortcode */
.mygc-copyright {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--politics-gray);
	margin: 0 0 0.5rem;
}

/* Außenabstand des gesamten Footers: oben UND unten jetzt gleich groß */
.mygc-site-footer {
	border-top: 1px solid #e3e5e7;
	padding-block: var(--wp--preset--spacing--6);   /* war: --6 oben, --5 unten → jetzt beidseitig --6 */
}

/* Row-Gap greift NUR, wenn die Columns umbrechen (Desktop bleibt unberührt,
   da dort nur eine Reihe existiert) — löst exakt das "Kleben" beim Stapeln */
.mygc-footer-cols.wp-block-columns { gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7); }

/* Sektions-Reihen: responsives Grid, hart gedeckelt auf max. 4 Spalten (4 → 3 → 2 → 1) */
.mygc-footer-row.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(max(120px, calc((100% - 3 * var(--wp--preset--spacing--4)) / 4)), 1fr)
	);
	gap: var(--wp--preset--spacing--4);
}

/* Sektions-Headings (7×) — jetzt <h4>. Link füllt die volle Heading-Breite
   (display:block) für vergrößerte Hover-/Klickfläche, analog .mygc-sb-list a.
   Zusätzlich: Button-Pill-Hover wie im Header (.mygc-main-nav), aber
   kompakter — bewusst NUR auf Titel-Ebene, nicht auf die Nav-Links darunter
   (die bleiben beim site-weiten Unterstrich-Muster). */
.mygc-footer-heading {
	margin: 0 0 0.375rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
}

.mygc-footer-heading a {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	padding-block: 0.15em 0.29em;
	padding-inline: 0.4em;
	margin-inline-start: -0.4em;
	border-radius: 4px;
	transition: background-color 0.15s ease, color 0.1s ease;
}

.mygc-footer-heading a:hover,
.mygc-footer-heading a:focus-visible {
	color: #fff;
	text-decoration: none;
	outline: none;
}

.mygc-footer-heading a:active {
	opacity: 0.80;
}

/* Pro-Sektion Hintergrundfarbe bei Hover/Focus — nutzt die bereits am
   <h4> vorhandenen has-*-color Klassen, keine neuen Klassen nötig */
.mygc-footer-heading.has-country-teal-color a:hover,
.mygc-footer-heading.has-country-teal-color a:focus-visible { background-color: var(--wp--preset--color--country-teal); }

.mygc-footer-heading.has-culture-red-color a:hover,
.mygc-footer-heading.has-culture-red-color a:focus-visible { background-color: var(--wp--preset--color--culture-red); }

.mygc-footer-heading.has-vacation-green-color a:hover,
.mygc-footer-heading.has-vacation-green-color a:focus-visible { background-color: var(--wp--preset--color--vacation-green); }

.mygc-footer-heading.has-business-blue-color a:hover,
.mygc-footer-heading.has-business-blue-color a:focus-visible { background-color: var(--wp--preset--color--business-blue); }

.mygc-footer-heading.has-politics-gray-color a:hover,
.mygc-footer-heading.has-politics-gray-color a:focus-visible { background-color: var(--wp--preset--color--politics-gray); }

.mygc-footer-heading.has-info-purple-color a:hover,
.mygc-footer-heading.has-info-purple-color a:focus-visible { background-color: var(--wp--preset--color--info-purple); }

.mygc-footer-heading.has-booking-orange-color a:hover,
.mygc-footer-heading.has-booking-orange-color a:focus-visible { background-color: var(--wp--preset--color--booking-orange); }

/* Rechte Spalte — Border, Padding + Basis-Typo (Texte erben x-small/politics-gray) */
.mygc-footer-aside {
	border-left: 1px solid #e3e5e7;
	padding-left: var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--politics-gray);
}

/* Absatz direkt neben dem Avatar: kein Standard-Margin, sonst startet
   der Text sichtbar unterhalb der Bild-Oberkante (align-items:flex-start
   richtet die Margin-Box aus, nicht die Text-Oberkante) */
.mygc-footer-about-intro p {
	margin: 0;
}

/* About-Intro: Avatar + Text nebeneinander (vormals layout flex + inline) */
.mygc-footer-about-intro {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--3);
}

/* Avatar-Rundung + Zuschnitt (vormals inline an figure/img) */
.mygc-footer-avatar img { border-radius: 4px; object-fit: cover; }

/* Divider (vormals inline color) */
hr.mygc-footer-sep { border: 0; border-top: 1px solid #e3e5e7; margin-block: 0.75rem; }

/* Tagline-Abstand (ersetzt 0.5rem-Spacer) */
.mygc-footer-tagline { margin-top: 0.5rem; }


/* ==========================================================================
   RESPONSIVE – ADDITIONAL BREAKPOINTS
   Most layout responsiveness is handled by:
     • theme.json (fluid font sizes, clamp padding)
     • wp:columns (stacks below 782 px via WordPress core CSS)
   The rules below handle edge cases not covered by the above.
   ========================================================================== */

/* ── Header: let the search drop below the logo on very narrow screens ── */
@media (max-width: 399px) {
	/* The flex group (logo + search) already wraps via flexWrap:"wrap";
	   this ensures the search takes full width when it wraps. */
	.mygc-site-header .wp-block-search.mygc-header-search {
		width: 100%;
	}
	.mygc-header-search .wp-block-search__input {
		min-width: 0;
		flex: 1 1 0%;
	}
}

/* Trennlinie zum About-Bereich: Row-Gap oben übernimmt jetzt den Part,
   den bisher margin-top hier redundant erledigt hat — deshalb entfernt */
@media (max-width: 781px) {
	.mygc-footer-aside {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid #e3e5e7;
		padding-top: var(--wp--preset--spacing--6);   /* war --5, jetzt gleich dem Row-Gap darüber */
	}
}
/* ── City lists: on tablet the 3-col grid may produce very narrow columns ──
   (handled above in the Legacy City Lists section) */

/* ── Webcam grid: ensure at least 2 columns on phones ── */
@media (max-width: 399px) {
	.mygc-webcam-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Legacy webcam list: release float on small phones ──
   Thumbnail goes full-width above title instead of beside it. */
@media (max-width: 540px) {
	#webcams > li > a:first-of-type {
		float: none;
		margin: 0 0 0.75rem;
	}
	#webcams > li > a:first-of-type img {
		width: 100%;
		max-width: 280px;
	}
}

/* ── Custom map thumbnails: release float + centre on mobile ── */
@media (max-width: 540px) {
	.maps1L, .maps1R,
	.maps2L, .maps2R {
		float: none;
		margin: 0 auto 1.25rem;
		display: block;
		width: fit-content;
	}
}

/* ==========================================================================
   LEAFLET MAP – Interaktive OpenStreetMap-Karten  (single-map.html)
   Leaflet benoetigt eine explizite, NICHT-prozentuale Hoehe auf dem
   Container-Div (height:100% wuerde eine durchgaengige Hoehen-Kette bis
   <html> voraussetzen – bei WP-Block-Wrappern nicht gegeben, Resultat waere
   ein Container mit height:0 trotz korrekt geladener Tiles).
   CSS/JS werden ausschliesslich auf Map-Seiten geladen (mygc_is_map_page()
   in functions.php, Abschnitt 15/15a).
 
   Hoehe fluid statt Media-Query-Sprung (Juli 2026, angepasst):
   clamp(MIN, 40vw + 224px, MAX) haelt die Eckwerte 400px/600px exakt bei,
   glaettet aber den Uebergang dazwischen:
     ≤ 440px Viewport  → flach 400px  (Smartphones)
     440–940px         → fliessende Interpolation (Tablets/kl. Laptops)
     ≥ 940px Viewport  → flach 600px  (Desktop)
   Bewusst KEIN vh-basierter Ansatz (wie bei den Region-Maps, 70vh): Diese
   Seite zeigt Headline + Karte + Post-Content + Social-Share auf einer
   Seite – vh wuerde im Hochformat-Smartphone unverhaeltnismaessig viel
   vertikalen Platz beanspruchen, bevor der uebrige Content sichtbar wird.
 
   Zur Unterscheidung:
   · .mygc-leaflet-map  → Leaflet <div>-Container  (Map-Seiten)
   · .mygc-map-embed    → OSM <iframe>-Embeds       (andere Seiten)
   ========================================================================== */
 
.mygc-leaflet-map {
	width: 100%;
	height: clamp(400px, 40vw + 224px, 600px);
	margin-block: 1.5rem;
	border: 1px solid #e3e5e7;
	border-radius: 4px;
	background: #f5f7fa; /* Placeholder-Farbe, bis OSM-Kacheln geladen sind. */
}
 
/* leaflet.css steuert alle Leaflet-internen Styles (Popups, Attributions,
   Zoom-Buttons). Kein Eingriff in .leaflet-* Klassen erforderlich. */   
   
/* ==========================================================================
   PRINT
   ========================================================================== */

/* ==========================================================================
   ACCESSIBILITY UTILITY
   ========================================================================== */

/* Visuell versteckt, aber für Screenreader vorhanden. Generische Utility-
   Klasse (Standard-WordPress-Konvention) — global in style.css statt in
   einer seitenspezifischen Datei, da an mehreren Stellen wiederverwendbar
   (z.B. Icon-only-Elemente). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

@media print {
	/* Hide non-essential chrome */
	.mygc-site-header .wp-block-navigation,
	.mygc-site-header .mygc-header-search,
	.mygc-breadcrumbs,
	.mygc-sidebar-place,
	.mygc-sidebar-region,
	.mygc-social-share,
	.mygc-site-footer,
	.wp-block-query-pagination {
		display: none !important;
	}

	/* Ensure all links print with text visible and underlined */
	a {
		color: #000 !important;
		text-decoration: underline;
	}

	/* Print URLs next to external links */
	.wp-block-post-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.75em;
		word-break: break-all;
	}

	/* Images should never overflow the page */
	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	/* Keep headings with the paragraph that follows */
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}
}