/* ==========================================================================
   Sprachreisen Blog im Design von studylingua.com
   --------------------------------------------------------------------------
   Datei:   wp-content/themes/astra-child/css/studylingua-design.css
   Laden:   Sandbox-Datei studylingua-design.php (sprachaufenthalt.blog und
            sejour-linguistique.blog, auf beiden Blogs dieselbe Datei)
   Stand:   01.10.2026

   Grundlage ist die Analyse von studylingua.com vom 28.09.2026:
   Schrift Exo, Violett #7430b2, Grün #a4d10f mit schwarzer Schrift,
   Sandton #efedeb als Seitenhintergrund, Rundungen 8 / 16 / 32 px.

   Alle Regeln hängen an der Body-Klasse .ms-studylingua. Wird die
   Sandbox-Datei entfernt, fehlt die Klasse und der Blog sieht aus wie vorher.

   Kontraste (WCAG 2.2 AA):
   - Weiss auf Violett #7430b2 ........ 7,5 : 1
   - Schwarz #111 auf Grün #a4d10f ..... 11,7 : 1
   - Text #303030 auf Sand #efedeb ..... 11,4 : 1
   - Grau #6b6b6b auf Weiss ............ 5,3 : 1

   Inhalt
   1. Farben und Masse
   2. Schrift
   3. Seitenhintergrund und Text
   4. Kopf: violetter Balken und weisse Karte
   5. Startbild der Startseite
   6. Suchbox im Startbild
   7. Abschnittstitel
   8. Beitragskarten (Slider und Kategorieseiten)
   9. Knöpfe
   10. Seitenleiste
   11. Beitragsseite
   12. Themenkacheln und Beratungsband
   13. Fuss
   14. Handy und Tablet
   15. Mobile Navigation als Panel
   16. Links im Fliesstext unterstreichen
   17. Kontaktseite
   ========================================================================== */


/* 1. Farben und Masse
   ========================================================================== */
.ms-studylingua {
	--sl-violett: #7430b2;
	--sl-violett-dunkel: #562686;
	--sl-gruen: #a4d10f;
	--sl-gruen-hell: #b2d833;
	--sl-sand: #efedeb;
	--sl-text: #303030;
	--sl-grau: #6b6b6b;
	--sl-weiss: #fff;
	--sl-nacht: #2b1340;

	--sl-r-klein: 8px;
	--sl-r-box: 16px;
	--sl-r-pille: 32px;
	--sl-schatten: 0 4px 16px rgba(0, 0, 0, 0.06);
	--sl-breite: 1400px; /* = Inhaltsbreite der Elementor-Container, damit alles links bündig steht */

	--sl-schrift: "Exo", Arial, Helvetica, sans-serif;
}


/* Höhe des violetten Balkens oben in der Kopfkarte (Abschnitt 4) */
:root {
	--sl-balken-h: 2.75rem;
	/* Seitenrand links und rechts, gleich wie das Herobild in Elementor (20px).
	   Kopfkarte, Hero, Slider und Themen stehen damit links auf einer Linie. */
	--sl-rand: 20px;
}


/* 2. Schrift
   Exo als variable Schrift (Stärken 100 bis 900), lokal unter
   uploads/ms-fonts/exo, Quelle @fontsource-variable/exo (SIL OFL).
   Elementor und The Post Grid setzen Rubik mit hoher Spezifität,
   deshalb hier !important. Symbole (<i>, SVG) sind ausgenommen,
   damit Icon-Schriften weiter funktionieren.
   ========================================================================== */
@font-face {
	font-family: "Exo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/uploads/ms-fonts/exo/exo-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Exo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/uploads/ms-fonts/exo/exo-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.ms-studylingua,
.ms-studylingua :is(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, select, textarea, label, strong, em, small, time, blockquote, figcaption, td, th):not([class*="icon"]):not([class*="fa-"]) {
	font-family: var(--sl-schrift) !important;
}


/* 3. Seitenhintergrund und Text
   ========================================================================== */
body.ms-studylingua {
	background-color: var(--sl-sand);
	color: var(--sl-text);
}

/* Weisse bzw. graue Flächen von Astra und Elementor durchsichtig machen,
   damit überall der Sandton durchscheint. */
.ms-studylingua #page,
.ms-studylingua .site-content,
.ms-studylingua .ast-separate-container,
.ms-studylingua .ast-breadcrumbs-wrapper,
.ms-studylingua .elementor-71 .elementor-element-3fdda68,
.ms-studylingua .elementor-6141 .elementor-element-008ba62 {
	background-color: transparent !important;
}


/* 4. Kopf: schwebende Karte aus violettem Balken und Navigation
   Die Karte ist der Elementor-Container bd67a6a der Kopfvorlage 6973.
   Ganz oben darin steht das Kurzcode-Element ms7b04b mit [ms_balken],
   darunter Logo und Menü. Der Container bricht dafür in zwei Zeilen um.
   Die ganze Karte bleibt beim Scrollen oben stehen (Elementor „sticky“).
   Auf der Startseite liegt sie über dem Herobild (siehe Abschnitt 5),
   auf allen anderen Seiten steht sie mit etwas Luft auf dem Sandton.
   ========================================================================== */
.ms-studylingua .elementor-location-header {
	position: relative;
	z-index: 100;
	padding: 1.25rem var(--sl-rand) 0;
}
.ms-studylingua.home .elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.ms-studylingua .elementor-location-header .elementor-element-bd67a6a {
	flex-wrap: wrap !important;
}
/* Balken über die ganze Kartenbreite. Die Karte selbst hat dafür keinen
   Innenabstand, Logo und Menü bekommen die 10px einzeln. Ohne Rechnung
   mit calc(), weil Firefox die Breite sonst zu kurz auflöst. */
.ms-studylingua .elementor-location-header .elementor-element-bd67a6a {
	padding: 0 !important;
	/* Die Karte trägt oben selbst einen violetten Streifen in Balkenhöhe.
	   So bleibt die obere Ecke violett, auch wenn ein Browser den Balken
	   schmaler berechnet (in einem Firefox beobachtet, 28.09.2026). */
	background: linear-gradient(to bottom, var(--sl-violett) 0, var(--sl-violett) var(--sl-balken-h), var(--sl-weiss) var(--sl-balken-h)) !important;
}
.ms-studylingua .elementor-location-header .elementor-element-ms7b04b {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	margin: 0;
}
.ms-studylingua .elementor-location-header .elementor-element-708dee1 {
	padding: 10px 0 10px 10px !important;
}
.ms-studylingua .elementor-location-header .elementor-element-c2e98ec {
	padding: 10px 10px 10px 0 !important;
}
.ms-balken {
	box-sizing: border-box;
	min-height: var(--sl-balken-h);
	padding: 0.4rem 1.25rem;
	background: var(--sl-violett);
	color: var(--sl-weiss);
	border-radius: var(--sl-r-box) var(--sl-r-box) 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.95rem;
}
.ms-balken nav {
	display: flex;
	gap: 1.25rem;
}
.ms-balken a {
	color: var(--sl-weiss);
	text-decoration: none;
}
.ms-balken a:hover,
.ms-balken a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.ms-balken a:focus-visible {
	outline: 2px solid var(--sl-weiss);
	outline-offset: 2px;
}

.ms-studylingua .elementor-location-header .elementor-element-bd67a6a {
	max-width: var(--sl-breite);
	margin-inline: auto;
	border-bottom: 0 !important;
	border-radius: var(--sl-r-box);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}
/* Beim Scrollen festgesteckt: bündig am oberen Bildschirmrand, oben ohne
   Rundung (Wunsch vom 28.09.2026). Der Balken oben folgt der Karte. */
.ms-studylingua .elementor-location-header .elementor-element-bd67a6a,
.ms-studylingua .elementor-location-header .ms-balken {
	transition: border-radius 0.3s ease;
}
.ms-studylingua .elementor-location-header .elementor-element-bd67a6a.elementor-sticky--active {
	top: 0 !important;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.ms-studylingua .elementor-location-header .elementor-element-bd67a6a.elementor-sticky--active .ms-balken {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
/* Unterstreichung im Menü in Grün wie bei StudyLingua, Schrift fett */
.ms-studylingua .elementor-location-header .elementor-nav-menu .elementor-item {
	font-weight: 700;
}
.ms-studylingua .elementor-location-header .elementor-nav-menu--main .elementor-item:after {
	background-color: var(--sl-gruen) !important;
	height: 3px !important;
}


/* 5. Startbild der Startseite
   Container 8922438 auf Seite 71. Violetter Verlauf über dem Sonnenbild,
   Überschrift in Grossbuchstaben mit Sperrung wie auf studylingua.com.
   Das Bild reicht bis zum oberen Bildschirmrand, die Kopfkarte liegt
   darüber. Innenabstand oben = Kartenhöhe (--sl-kopf, gemessen von der
   Sandbox-Datei) plus Luft. 9rem ist der Ersatzwert ohne Skript.
   ========================================================================== */
.ms-studylingua .elementor-71 .elementor-element-8922438 {
	background:
		linear-gradient(90deg, rgba(86, 38, 134, 0.94) 0%, rgba(116, 48, 178, 0.8) 45%, rgba(116, 48, 178, 0.25) 100%),
		url("/wp-content/uploads/2023/10/background-sun-set.jpg") center / cover no-repeat !important;
	margin-top: 0;
	padding-top: calc(var(--sl-kopf, 9rem) + 2.5rem) !important;
}
.ms-studylingua .elementor-71 .elementor-element-d31e947 .elementor-heading-title {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 700;
	font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
	line-height: 1.15;
}
.ms-studylingua .elementor-71 .elementor-element-94e6060 .elementor-divider-separator {
	border-top-color: rgba(255, 255, 255, 0.8) !important;
	width: 12rem !important;
}
.ms-studylingua .elementor-71 .elementor-element-ad230f5,
.ms-studylingua .elementor-71 .elementor-element-ad230f5 p {
	color: var(--sl-weiss);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
}


/* 6. Suchbox im Startbild
   Kurzcode [ms_blogsuche] aus der Sandbox-Datei. Normale WordPress-Suche
   plus die Kategorien als Schnellzugriff.
   ========================================================================== */
.ms-suchbox {
	background: var(--sl-gruen);
	color: #111;
	border-radius: var(--sl-r-box);
	padding: 1.3rem 1.5rem 1.2rem;
	max-width: 44rem;
}
.ms-suchbox form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.ms-suchbox input[type="search"] {
	flex: 1 1 16rem;
	min-width: 0;
	border: 1px solid var(--sl-weiss);
	border-radius: var(--sl-r-pille);
	padding: 0.8rem 1.2rem;
	font-size: 1rem;
	color: var(--sl-text);
	background: var(--sl-weiss);
}
.ms-suchbox input[type="search"]::placeholder {
	color: var(--sl-grau);
	opacity: 1;
}
.ms-suchbox input[type="search"]:focus {
	outline: 3px solid var(--sl-violett);
	outline-offset: 1px;
}
.ms-suchbox button {
	border: 0;
	border-radius: var(--sl-r-pille);
	padding: 0.75rem 2rem;
	background: var(--sl-violett);
	color: var(--sl-weiss);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
.ms-suchbox button:hover,
.ms-suchbox button:focus-visible {
	background: var(--sl-violett-dunkel);
}
.ms-suchbox button:focus-visible {
	outline: 3px solid var(--sl-violett-dunkel);
	outline-offset: 2px;
}
/* „Beliebt“ in einer eigenen Zeile, darunter die Themen je zwei pro Zeile
   (Wunsch vom 01.10.2026). Reihenfolge kommt aus der PHP-Datei
   (ms_sl_text beliebt_slugs). Wird eine Zeile zu schmal, bricht sie um. */
.ms-suchbox .ms-beliebt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.9rem;
	font-size: 0.95rem;
}
.ms-suchbox .ms-beliebt-titel {
	font-weight: 600;
}
.ms-suchbox .ms-beliebt-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.ms-suchbox .ms-beliebt a {
	background: rgba(255, 255, 255, 0.88);
	color: #111;
	text-decoration: none;
	border-radius: var(--sl-r-pille);
	padding: 0.3rem 0.85rem;
	font-weight: 600;
}
.ms-suchbox .ms-beliebt a:hover,
.ms-suchbox .ms-beliebt a:focus-visible {
	background: var(--sl-weiss);
	text-decoration: underline;
}
.ms-suchbox .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}


/* 7. Abschnittstitel
   „Neueste Beiträge“ (The Post Grid) und die Archiv-H1 in Violett,
   darunter ein kurzer grüner Strich.
   ========================================================================== */
.ms-studylingua .tpg-widget-heading-wrapper .tpg-widget-heading,
.ms-studylingua .ms-archiv-titel,
.ms-studylingua .ms-abschnitt-titel {
	color: var(--sl-violett) !important;
	font-weight: 600 !important;
}
.ms-studylingua .tpg-widget-heading-wrapper .tpg-widget-heading-line {
	border-color: rgba(0, 0, 0, 0.08) !important;
}


/* 8. Beitragskarten
   Slider der Startseite (The Post Grid) und Kacheln der Kategorieseiten
   (Astra Blog Pro) als weisse Karten mit runden Ecken.
   ========================================================================== */
/* Slider */
.ms-studylingua .elementor-widget-tpg-slider-layout .rt-holder.tpg-post-holder {
	background: var(--sl-weiss);
	border-radius: var(--sl-r-box);
	overflow: hidden;
	box-shadow: var(--sl-schatten);
	height: 100%;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .rt-el-content-wrapper > :not(.rt-img-holder) {
	padding-inline: 1.2rem;
}
/* Alle Karten gleich hoch (Wunsch vom 28.09.2026). Die Slides strecken
   sich auf die Höhe der höchsten Karte, der Knopf sitzt immer unten. Titel
   und Anlesetext sind auf zwei Zeilen begrenzt und reservieren diese auch,
   damit Datum und Knopf in jeder Karte auf gleicher Höhe stehen. */
.ms-studylingua .elementor-widget-tpg-slider-layout .swiper-wrapper {
	align-items: stretch !important;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .swiper-slide {
	height: auto !important;
	display: flex;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .rt-holder.tpg-post-holder {
	width: 100%;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .rt-el-content-wrapper {
	display: flex !important;
	flex-direction: column;
	height: 100%;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .entry-title,
.ms-studylingua .elementor-widget-tpg-slider-layout .tpg-excerpt-inner {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2lh;
}
/* Der Knopfbereich ist doppelt verschachtelt: aussen nach unten schieben,
   innen die zusätzlichen Abstände entfernen. */
.ms-studylingua .elementor-widget-tpg-slider-layout .rt-el-content-wrapper > .post-footer {
	margin-top: auto;
	margin-bottom: 0;
	padding-bottom: 1.3rem;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .post-footer .post-footer {
	margin: 0;
	padding: 0;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .entry-title a {
	color: var(--sl-text);
	font-weight: 700;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .entry-title a:hover {
	color: var(--sl-violett);
}

/* Kategorieseiten */
.ms-studylingua .ast-archive-post .ast-article-inner {
	background: var(--sl-weiss);
	border-radius: var(--sl-r-box);
	overflow: hidden;
	box-shadow: var(--sl-schatten);
	padding-bottom: 1.3rem;
}
.ms-studylingua .ast-archive-post .post-content > :not(.ast-blog-featured-section) {
	padding-inline: 1.3rem;
}
.ms-studylingua .ast-archive-post .ast-blog-featured-section {
	margin-bottom: 1rem;
}
.ms-studylingua .ast-archive-post .entry-title a {
	color: var(--sl-text);
	font-weight: 700;
}
.ms-studylingua .ast-archive-post .entry-title a:hover {
	color: var(--sl-violett);
}
.ms-studylingua .ast-archive-post .cat-links a {
	color: var(--sl-violett);
}


/* 9. Knöpfe
   „Bericht lesen“ in Grün mit schwarzer Schrift als Pille wie bei
   StudyLingua. Beim Darüberfahren und beim Tastaturfokus Violett mit
   weisser Schrift. Überschreibt die Farben aus slider-barrierefrei.php.
   ========================================================================== */
.ms-studylingua .elementor-widget-tpg-slider-layout .read-more a.tpg-post-link,
.ms-studylingua .ast-archive-post .ast-button {
	background-color: var(--sl-gruen) !important;
	border-color: var(--sl-gruen) !important;
	color: #111 !important;
	border-radius: var(--sl-r-pille) !important;
	font-weight: 700;
	padding: 0.6rem 1.3rem !important;
	text-decoration: none;
}
.ms-studylingua .elementor-widget-tpg-slider-layout .read-more a.tpg-post-link:is(:hover, :focus, :focus-visible),
.ms-studylingua .ast-archive-post .ast-button:is(:hover, :focus, :focus-visible) {
	background-color: var(--sl-violett) !important;
	border-color: var(--sl-violett) !important;
	color: var(--sl-weiss) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Suchknopf der Seitenleiste und andere violette Knöpfe im neuen Violett */
.ms-studylingua .wp-block-search__button {
	background-color: var(--sl-violett) !important;
	color: var(--sl-weiss) !important;
	border-radius: var(--sl-r-pille) !important;
	padding-inline: 1.2rem !important;
}
.ms-studylingua .wp-block-search__button:hover,
.ms-studylingua .wp-block-search__button:focus-visible {
	background-color: var(--sl-violett-dunkel) !important;
}
.ms-studylingua .wp-block-search .wp-block-search__input {
	border-radius: var(--sl-r-pille);
	padding-inline: 1rem;
}


/* 10. Seitenleiste
   Jeder Abschnitt (Suche, Aktuelle Beiträge, Themen) als weisse Box.
   ========================================================================== */
.ms-studylingua #secondary .widget,
.ms-studylingua .elementor-widget-sidebar .widget {
	background: var(--sl-weiss);
	border-radius: var(--sl-r-box);
	padding: 1.2rem 1.3rem;
	box-shadow: var(--sl-schatten);
}
.ms-studylingua #secondary .wp-block-heading,
.ms-studylingua .elementor-widget-sidebar .wp-block-heading {
	color: var(--sl-violett);
	font-weight: 600;
}
.ms-studylingua #secondary a,
.ms-studylingua .elementor-widget-sidebar a {
	color: var(--sl-violett);
}
/* Suche in der schmalen Spalte: Feld und Knopf untereinander, beide volle
   Breite, damit der Platzhalter „Blog durchsuchen …“ ganz lesbar bleibt. */
.ms-studylingua #secondary .wp-block-search__inside-wrapper,
.ms-studylingua .elementor-widget-sidebar .wp-block-search__inside-wrapper {
	flex-wrap: wrap;
}
.ms-studylingua #secondary .wp-block-search__input,
.ms-studylingua #secondary .wp-block-search__button,
.ms-studylingua .elementor-widget-sidebar .wp-block-search__input,
.ms-studylingua .elementor-widget-sidebar .wp-block-search__button {
	flex: 1 1 100%;
}


/* 11. Beitragsseite
   Elementor-Vorlage 6141: Textspalte e1551c7 als weisse Karte.
   ========================================================================== */
.ms-studylingua .elementor-6141 .elementor-element-e1551c7 {
	background: var(--sl-weiss);
	border-radius: var(--sl-r-box);
	box-shadow: var(--sl-schatten);
	padding: clamp(1.2rem, 0.8rem + 1.5vw, 2.2rem) !important;
}
.ms-studylingua.single-post .elementor .tpg-widget-heading-wrapper h1.tpg-widget-heading.tpg-widget-heading {
	color: var(--sl-text) !important;
	font-weight: 700 !important;
}

/* Bildunterschriften im Beitrag nie als eigener Scrollbereich (WordPress
   setzt bei überlagerten Unterschriften overflow auto, auf dem Handy entstand
   dadurch ein nicht per Tastatur erreichbarer Scrollbereich). */
.ms-studylingua .wp-block-image figcaption {
	overflow: visible !important;
	max-height: none !important;
}

/* Brotkrümel (Astra, auch auf Themen- und Suchseiten): ohne grauen
   Streifen und ohne Linie, etwas Luft unter der Kopfkarte, links bündig
   mit Kopfkarte und Inhalt. Wunsch vom 28.09.2026. */
.ms-studylingua .main-header-bar.ast-header-breadcrumb {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 1rem var(--sl-rand) 0 !important;
}
.ms-studylingua .ast-header-breadcrumb .ast-container {
	max-width: var(--sl-breite);
	margin-inline: auto;
	padding: 0 !important;
}
.ms-studylingua .ast-header-breadcrumb .ast-breadcrumbs-wrapper,
.ms-studylingua .ast-header-breadcrumb .ast-breadcrumbs-inner {
	padding: 0 !important;
	margin: 0 !important;
}
/* Leiste wie auf studylingua.com: dunkel, klein, Haus-Symbol statt „Start“,
   grüne Pfeile als Trenner, der aktuelle Eintrag auf weissem Feld. */
.ms-studylingua .ast-breadcrumbs .trail-items {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #262626;
	border-radius: 4px;
	overflow: hidden;
	/* 0.88rem = 15px bei 17px Grundschrift, ganze Pixel und halbfett, sonst
	   wirkt die Exo auf dunklem Grund unscharf (Rückmeldung 28.09.2026) */
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.3;
}
.ms-studylingua .ast-breadcrumbs .trail-items li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.32rem 0.65rem;
	color: var(--sl-weiss);
}
.ms-studylingua .ast-breadcrumbs .trail-items li::after {
	content: none !important;
}
.ms-studylingua .ast-breadcrumbs .trail-items li:not(.trail-end)::after {
	content: "" !important;
	display: inline-block;
	width: 0.38rem;
	height: 0.38rem;
	margin-left: 0.85rem;
	padding: 0;
	border-top: 2px solid var(--sl-gruen);
	border-right: 2px solid var(--sl-gruen);
	transform: rotate(45deg);
}
.ms-studylingua .ast-breadcrumbs .trail-items a {
	color: var(--sl-weiss) !important;
	text-decoration: none;
}
.ms-studylingua .ast-breadcrumbs .trail-items a:hover,
.ms-studylingua .ast-breadcrumbs .trail-items a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.ms-studylingua .ast-breadcrumbs .trail-items a:focus-visible {
	outline: 2px solid var(--sl-gruen);
	outline-offset: 2px;
}
.ms-studylingua .ast-breadcrumbs .trail-items .trail-end {
	background: var(--sl-weiss);
	color: var(--sl-text);
}
/* „Start“ bleibt für Screenreader lesbar, sichtbar ist ein Haus */
.ms-studylingua .ast-breadcrumbs .trail-begin a {
	display: inline-flex;
	align-items: center;
	min-height: 1.1rem;
}
.ms-studylingua .ast-breadcrumbs .trail-begin a span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.ms-studylingua .ast-breadcrumbs .trail-begin a::before {
	content: "";
	display: inline-block;
	width: 0.95rem;
	height: 0.95rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8M5.5 9v11h13V9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8M5.5 9v11h13V9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Beitragsseite: weniger Abstand zwischen Brotkrümeln und Überschrift,
   Überschrift, Textkarte und Seitenleiste auf der gemeinsamen linken bzw.
   rechten Kante (ohne die Einzüge aus Elementor und The Post Grid). */
/* Astra setzt über den Inhaltsbereich 60px Abstand. Auf Beitragsseiten
   übernimmt der Elementor-Container den Abstand, auf Themen- und
   Suchseiten bleibt ein kleiner Rest. */
.ms-studylingua.single-post #primary {
	margin-top: 0 !important;
}
.ms-studylingua:is(.archive, .search, .blog) #primary {
	margin-top: 2.8rem !important;
}
/* Astra-Container auf Themen- und Suchseiten: 1400px Inhalt plus Rand, damit
   Überschrift, Kacheln und Seitenleiste bündig mit der Kopfkarte stehen. */
.ms-studylingua:is(.archive, .search, .blog) #content > .ast-container {
	max-width: calc(var(--sl-breite) + 2 * var(--sl-rand));
	padding-inline: var(--sl-rand);
}
.ms-studylingua .elementor-6141 .elementor-element-008ba62 > .e-con-inner {
	padding-top: 2.8rem !important;
}
.ms-studylingua .elementor-6141 .elementor-element-5407b1c .tpg-widget-heading-wrapper {
	margin: 0 -15px 1.5rem !important;
}
.ms-studylingua .elementor-6141 .elementor-element-d0a0634 {
	padding-inline: 0 !important;
}
.ms-studylingua .elementor-6141 .elementor-element-7c37d8c {
	padding-right: 0 !important;
}


/* 12. Themenkacheln und Beratungsband
   Kurzcodes [ms_themen] und [ms_beratung] unter dem Slider der Startseite.
   ========================================================================== */
/* Abstand zwischen Slider und „Themen“ knapp halten. Der Slider-Container
   3fdda68 hat in Elementor 80px Innenabstand unten, dazu kamen oben
   noch zwei Abstände. Wunsch vom 28.09.2026. */
.ms-studylingua .elementor-71 .elementor-element-3fdda68 > .e-con-inner {
	padding-bottom: 0;
}
/* Elementor-Container der Kurzcodes: gleicher Seitenabstand wie der Titel
   „Neueste Beiträge“, Luft zum Fuss. */
.ms-studylingua .elementor-71 .elementor-element-ms7b02c {
	padding: 0 var(--sl-rand) 3.5rem;
}
/* Slider-Container mit demselben Seitenrand, Titel „Neueste Beiträge“
   ohne den Einzug von 15px aus The Post Grid. */
.ms-studylingua .elementor-71 .elementor-element-3fdda68 {
	padding-inline: var(--sl-rand) !important;
}
.ms-studylingua .elementor-71 .elementor-element-81c7ee3 .tpg-widget-heading-wrapper {
	margin-inline: -15px;
}
.ms-themen-bereich {
	max-width: var(--sl-breite);
	margin: 0 auto;
	padding: 0;
}
.ms-abschnitt-titel {
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
	margin: 0 0 1.4rem;
	padding-bottom: 0.5rem;
	position: relative;
}
.ms-abschnitt-titel::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.5rem;
	height: 4px;
	border-radius: 2px;
	background: var(--sl-gruen);
}
.ms-themen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Name oben, Anzahl darunter. So bricht auch ein langer Name sauber um. */
.ms-themen a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	height: 100%;
	background: var(--sl-weiss);
	border-radius: var(--sl-r-box);
	border-left: 6px solid var(--sl-gruen);
	padding: 1.2rem 1.4rem;
	color: var(--sl-text);
	text-decoration: none;
	box-shadow: var(--sl-schatten);
}
.ms-themen li:nth-child(even) a {
	border-left-color: var(--sl-violett);
}
.ms-themen strong {
	font-size: 1.15rem;
}
.ms-themen span {
	color: var(--sl-grau);
	font-size: 0.95rem;
}
.ms-themen a:hover,
.ms-themen a:focus-visible {
	box-shadow: 0 4px 18px rgba(116, 48, 178, 0.22);
}
.ms-themen a:hover strong,
.ms-themen a:focus-visible strong {
	color: var(--sl-violett);
	text-decoration: underline;
}

.ms-beratung {
	margin-top: 3rem;
	background: var(--sl-violett);
	color: var(--sl-weiss);
	border-radius: var(--sl-r-box);
	padding: 2rem 2.2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.ms-beratung h2 {
	margin: 0 0 0.3rem;
	color: var(--sl-weiss);
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
	font-weight: 600;
}
.ms-beratung p {
	margin: 0;
	color: var(--sl-weiss);
}
.ms-beratung a {
	background: var(--sl-gruen);
	color: #111;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--sl-r-pille);
	padding: 0.75rem 1.6rem;
	white-space: nowrap;
}
.ms-beratung a:hover,
.ms-beratung a:focus-visible {
	background: var(--sl-weiss);
	color: var(--sl-violett);
}
.ms-beratung a:focus-visible {
	outline: 3px solid var(--sl-weiss);
	outline-offset: 2px;
}


/* 13. Fuss
   Logoleiste weiss, darunter ein dunkelviolettes Band wie im Entwurf:
   links der Satz (Element ms7b05t), rechts die Links mit Punkten getrennt.
   ========================================================================== */
.ms-studylingua .elementor-location-footer .elementor-element-3e1dcff {
	background-color: var(--sl-weiss) !important;
	margin-top: 3rem;
}
.ms-studylingua .elementor-location-footer .elementor-element-9f51af0 {
	background-color: var(--sl-nacht) !important;
}
.ms-studylingua .elementor-location-footer .elementor-element-9f51af0 :is(p, a, span, div) {
	color: var(--sl-weiss) !important;
}
.ms-studylingua .elementor-location-footer .elementor-element-9f51af0 {
	padding-inline: var(--sl-rand) !important;
}
/* Band: links der Satz, rechts die Links als geschlossene Gruppe
   (Elementor-Container ms7b07g). Passt beides nicht in eine Zeile, rutscht
   die ganze Gruppe unter den Satz, einzelne Links brechen nie um. */
.ms-studylingua .elementor-location-footer .elementor-element-9f51af0 > .e-con-inner {
	max-width: var(--sl-breite);
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 0.5rem 1.5rem !important;
	padding-block: 1.6rem;
	font-size: 0.95rem;
}
.ms-studylingua .elementor-location-footer .elementor-element-9f51af0 p {
	margin: 0;
}
.ms-studylingua .elementor-location-footer .elementor-element-ms7b07g {
	width: auto !important;
	flex: 0 0 auto !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0.55rem !important;
	padding: 0 !important;
	white-space: nowrap;
}
/* Elementor stellt die Link-Elemente auf align-self flex-start */
.ms-studylingua .elementor-location-footer .elementor-element-ms7b07g > .elementor-element {
	align-self: center !important;
	width: auto !important;
}


/* Knopf „nach oben“ (Astra #ast-scroll-top): rund und grün mit schwarzem
   Pfeil wie die übrigen Knöpfe, beim Darüberfahren violett mit weissem Pfeil.
   Wunsch vom 28.09.2026. */
.ms-studylingua #ast-scroll-top {
	padding: 0 !important;
	line-height: 1;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	background-color: var(--sl-gruen) !important;
	color: #111 !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* Pfeil genau in der Mitte des Kreises. Astra blendet den Knopf per
   display ein und aus, deshalb wird das innere Symbol zentriert. Es liegt
   absolut über dem ganzen Kreis (inset 0), weil Astras Element sonst nicht
   die volle Höhe einnahm und der Pfeil 3,5px zu hoch sass (01.10.2026). */
.ms-studylingua #ast-scroll-top .ast-icon {
	position: absolute !important;
	inset: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}
/* Astra dreht den Pfeil um 180 Grad und verschiebt ihn dabei um 2px
   (transform rotate plus translate). Nur die Drehung bleibt, sonst sitzt der
   Pfeil zu hoch. */
.ms-studylingua #ast-scroll-top svg {
	display: block;
	margin: 0 !important;
	transform: rotate(180deg) !important;
}
.ms-studylingua #ast-scroll-top svg,
.ms-studylingua #ast-scroll-top svg * {
	fill: currentColor !important;
}
.ms-studylingua #ast-scroll-top:hover,
.ms-studylingua #ast-scroll-top:focus-visible {
	background-color: var(--sl-violett) !important;
	color: var(--sl-weiss) !important;
}
.ms-studylingua #ast-scroll-top:focus-visible {
	outline: 2px solid var(--sl-violett);
	outline-offset: 3px;
}


/* 14. Handy und Tablet
   ========================================================================== */
@media (max-width: 921px) {
	/* Fuss: Satz oben über die ganze Breite, Links darunter, alles zentriert */
	.ms-studylingua .elementor-location-footer .elementor-element-9f51af0 > .e-con-inner {
		justify-content: center !important;
	}
	.ms-studylingua .elementor-location-footer .elementor-element-ms7b05t {
		flex: 0 0 100%;
		text-align: center;
	}
	.ms-studylingua .elementor-location-footer .elementor-element-ms7b07g {
		flex: 0 1 100% !important;
		width: 100% !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		white-space: normal;
	}
	.ms-studylingua .elementor-location-footer .elementor-element-ms7b07g > .elementor-element {
		white-space: nowrap;
	}
	.ms-studylingua .elementor-location-header {
		padding-top: 0.6rem;
	}
	/* Seitenleiste unter dem Beitrag bündig mit der Textkarte */
	.ms-studylingua .elementor-6141 .elementor-element-7c37d8c {
		padding-left: 0 !important;
	}
	.ms-balken {
		font-size: 0.9rem;
		padding-inline: 1rem;
	}
	.ms-balken .ms-balken-text {
		display: none;
	}
	.ms-beratung {
		padding: 1.5rem;
	}
}
@media (max-width: 544px) {
	/* Themenfelder etwas kompakter, damit zwei nebeneinander passen
	   („Neuigkeiten“ und „Erfahrungsberichte“ auch auf 360px breiten Handys) */
	.ms-suchbox .ms-beliebt a {
		padding: 0.28rem 0.7rem;
		font-size: 0.9rem;
	}
	/* Die drei Links passen so auch bei 375px Breite in eine Zeile */
	.ms-balken {
		font-size: 0.8rem;
		padding-inline: 0.9rem;
	}
	.ms-balken nav {
		gap: 0.75rem;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.ms-suchbox {
		padding: 1rem;
	}
	.ms-suchbox button {
		flex: 1 1 100%;
	}
}


/* 15. Mobile Navigation als Panel
   Seit 01.10.2026, beide Blogs. Das Menüsymbol von Elementor (erscheint bis
   1200px Breite, Einstellung „dropdown: tablet_extra“ im Element ee7bc1d)
   öffnet nicht mehr die Elementor-Liste, sondern das Panel #ms-offcanvas.
   HTML und Skript kommen aus studylingua-design.php (wp_footer).
   Ablauf: Skript entfernt [hidden], setzt nach einem Bild .ist-offen und
   an <html> die Klasse .ms-offcanvas-offen. Schliessen läuft umgekehrt,
   nach 300ms (Dauer der Animation) wird [hidden] wieder gesetzt.
   Ausführlich: wp-content/themes/astra-child/doku/mobile-navigation.md
   ========================================================================== */

/* Die Elementor-Liste unter der Kopfkarte wird nie mehr gezeigt */
.ms-studylingua .elementor-location-header .elementor-nav-menu--dropdown {
	display: none !important;
}

/* Seite hinter dem offenen Panel scrollt nicht mit */
html.ms-offcanvas-offen,
html.ms-offcanvas-offen body {
	overflow: hidden;
}

/* Hülle über die ganze Seite. Liegt über Kopfkarte (z-index 100) und
   festgesteckter Karte. */
.ms-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 100000;
}
.ms-offcanvas[hidden] {
	display: none;
}

/* Abgedunkelter Bereich rechts vom Panel. Antippen schliesst. */
.ms-offcanvas-hintergrund {
	position: absolute;
	inset: 0;
	background: rgba(43, 19, 64, 0.55); /* --sl-nacht, halb durchsichtig */
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Das Panel selbst: weiss, volle Höhe, gleitet von links herein */
.ms-offcanvas-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(24rem, 88vw);
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	padding: 1rem 1.25rem 1.75rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--sl-weiss);
	color: var(--sl-text);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}
.ms-offcanvas.ist-offen .ms-offcanvas-hintergrund {
	opacity: 1;
}
.ms-offcanvas.ist-offen .ms-offcanvas-panel {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.ms-offcanvas-hintergrund,
	.ms-offcanvas-panel {
		transition: none;
	}
}

/* Kopf des Panels: Logo links, rundes Schliessen-Kreuz rechts */
.ms-offcanvas-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e3e3e3;
}
.ms-offcanvas-logo img {
	display: block;
	width: auto;
	height: 2.6rem;
	max-width: 13rem;
	object-fit: contain;
}
/* Kreuz violett mit weissem Strich (Wunsch vom 01.10.2026), beim
   Darüberfahren und Tastaturfokus dunkleres Violett. Doppelte Klasse plus
   !important: Astra färbt fokussierte Knöpfe sonst grün mit weisser Schrift. */
.ms-offcanvas .ms-offcanvas-zu,
.ms-offcanvas .ms-offcanvas-zu:focus {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sl-violett) !important;
	color: var(--sl-weiss) !important;
	cursor: pointer;
}
.ms-offcanvas .ms-offcanvas-zu:hover,
.ms-offcanvas .ms-offcanvas-zu:focus-visible {
	background: var(--sl-violett-dunkel) !important;
	color: var(--sl-weiss) !important;
}

/* Sichtbarer Tastaturfokus für alles im Panel (WCAG 2.4.7) */
.ms-offcanvas :is(a, button, input):focus-visible {
	outline: 2px solid var(--sl-violett);
	outline-offset: 2px;
}

/* Menüpunkte: gross, gut antippbar, feine Trennlinien. Die aufgerufene
   Seite bekommt links einen grünen Strich (Klasse current-menu-item von
   wp_nav_menu). Bewusst nicht current-menu-parent: Ein Beitrag in zwei
   Kategorien würde sonst zwei Punkte markieren. */
.ms-offcanvas-menu,
.ms-offcanvas-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Menü näher an den Panelkopf: der allgemeine Abstand zwischen den Blöcken
   (1.4rem) plus Innenabstand des ersten Punktes war zu gross (01.10.2026). */
.ms-offcanvas-nav {
	margin-top: -1rem;
}
.ms-offcanvas-menu > li + li {
	border-top: 1px solid #e3e3e3;
}
.ms-offcanvas-menu a {
	display: block;
	padding: 0.85rem 0.5rem 0.85rem 1rem;
	border-left: 4px solid transparent;
	color: var(--sl-text) !important;
	font-size: 1.15rem;
	font-weight: 600;
	text-decoration: none;
}
.ms-offcanvas-menu a:hover,
.ms-offcanvas-menu a:focus-visible {
	color: var(--sl-violett) !important;
}
.ms-offcanvas-menu .current-menu-item > a {
	border-left-color: var(--sl-gruen);
	color: var(--sl-violett) !important;
}
/* Untermenüs (derzeit keine, falls später welche dazukommen) */
.ms-offcanvas-menu .sub-menu a {
	padding-left: 2rem;
	font-size: 1rem;
	font-weight: 500;
}

/* Suche im Panel: Feld und Knopf als Pillen untereinander, beide volle
   Breite wie in der Seitenleiste. Nebeneinander blieb für das Feld zu wenig
   Platz (FR nur 113px), der Platzhalter wurde abgeschnitten. */
.ms-offcanvas-suche {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.ms-offcanvas-suche input {
	flex: 1 1 100%;
	min-width: 0;
	padding: 0.6rem 1rem;
	border: 1px solid #767676; /* 4,5 : 1 auf Weiss, WCAG 1.4.11 */
	border-radius: var(--sl-r-pille);
	background: var(--sl-weiss);
	color: var(--sl-text);
	font-size: 1rem;
}
.ms-offcanvas-suche input::placeholder {
	color: var(--sl-grau);
	opacity: 1;
}
.ms-offcanvas .ms-offcanvas-suche button,
.ms-offcanvas .ms-offcanvas-suche button:focus {
	flex: 1 1 100%;
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: var(--sl-r-pille);
	background: var(--sl-violett) !important;
	color: var(--sl-weiss) !important;
	font-weight: 600;
	cursor: pointer;
}
.ms-offcanvas .ms-offcanvas-suche button:hover,
.ms-offcanvas .ms-offcanvas-suche button:focus-visible {
	background: var(--sl-violett-dunkel) !important;
}

/* Links aus dem violetten Balken (der Balken selbst fehlt auf dem Handy) */
.ms-offcanvas-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ms-offcanvas-links a {
	color: var(--sl-violett) !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Social-Media-Links als runde Symbole am Ende (seit 01.10.2026 statt
   Textpillen): violett mit weissem Logo wie das Schliessen-Kreuz (7,5 : 1),
   beim Darüberfahren und Tastaturfokus dunkleres Violett. 2.75rem = 47px,
   gut antippbar (WCAG 2.5.8 verlangt mindestens 24px). Der Name steckt in
   aria-label, das SVG ist für Screenreader ausgeblendet. */
.ms-offcanvas-sozial {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: auto 0 0; /* nach unten schieben, wenn Platz ist */
	padding: 0;
	list-style: none;
}
.ms-offcanvas-sozial a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--sl-violett);
	color: var(--sl-weiss) !important;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.ms-offcanvas-sozial svg {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	fill: currentColor;
}
.ms-offcanvas-sozial a:hover,
.ms-offcanvas-sozial a:focus-visible {
	background: var(--sl-violett-dunkel);
}

/* Auf dem Handy entfällt der violette Balken in der Kopfkarte, seine Links
   stehen im Panel. Die Karte ist dann rundum weiss.
   Ausserdem steht die Überschrift im Startbild (d31e947) samt weissem
   Strich (94e6060) zentriert (Wunsch vom 01.10.2026). */
@media (max-width: 767px) {
	/* Knopf „nach oben“ auf dem Handy kleiner und näher am Rand */
	.ms-studylingua #ast-scroll-top {
		width: 2.4rem;
		height: 2.4rem;
		right: 0.75rem !important;
		bottom: 0.75rem !important;
	}
	.ms-studylingua #ast-scroll-top svg {
		width: 1rem !important;
		height: auto !important;
	}
	.ms-studylingua .elementor-71 .elementor-element-d31e947,
	.ms-studylingua .elementor-71 .elementor-element-d31e947 .elementor-heading-title {
		text-align: center !important;
	}
	.ms-studylingua .elementor-71 .elementor-element-94e6060 .elementor-divider {
		justify-content: center !important;
		text-align: center !important;
	}
	.ms-studylingua .elementor-71 .elementor-element-94e6060 .elementor-divider-separator {
		margin-inline: auto !important;
	}
	.ms-studylingua .elementor-location-header .elementor-element-ms7b04b {
		display: none !important;
	}
	.ms-studylingua .elementor-location-header .elementor-element-bd67a6a {
		background: var(--sl-weiss) !important;
	}
}


/* 16. Links im Fliesstext unterstreichen
   Rechtstexte (Impressum, Datenschutz, Mentions légales) stehen in
   HTML- und Text-Widgets. Dort waren Links nur violett (#844591) und hoben
   sich mit 2,03 : 1 zu wenig vom Text ab (WCAG 1.4.1, axe-Prüfung vom
   01.10.2026). Beitragstexte sind bereits unterstrichen, die Regel ändert
   dort nichts. Knöpfe sind ausgenommen.
   ========================================================================== */
.ms-studylingua #content :is(.elementor-widget-html, .elementor-widget-text-editor, .elementor-widget-theme-post-content) :is(p, li, td) a:not(.elementor-button):not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}


/* 17. Kontaktseite
   Seite 6617 (DE /kontakt/, FR /contactez-nous/, gleiche Elementor-IDs).
   Seit 02.10.2026: Das Bild dd34476 lief über die volle Fensterbreite direkt
   unter der schwebenden Kopfkarte. Jetzt steht es wie alles andere in der
   Inhaltsbreite (1400px plus Rand) als Karte mit runden Ecken. Text und
   Bürokarten stehen auf derselben linken Kante, die Bürokarten sind weisse
   Karten wie die Beitragskarten.
   ========================================================================== */

/* Bild als abgerundete Karte in der Inhaltsbreite statt vollflächig */
.ms-studylingua .elementor-6617 .elementor-element-dd34476 {
	width: calc(100% - 2 * var(--sl-rand)) !important;
	max-width: var(--sl-breite) !important;
	min-height: 0 !important;
	height: clamp(13rem, 28vw, 24rem);
	margin: 1.4rem auto 0 !important;
	padding: 0 !important;
	border-radius: var(--sl-r-box);
	overflow: hidden;
	background-position: center 30% !important;
	box-shadow: var(--sl-schatten);
}

/* Text und Bürokarten auf der gemeinsamen Kante (wie Kopfkarte und Bild) */
.ms-studylingua .elementor-6617 :is(.elementor-element-2528b81, .elementor-element-42898f8) {
	padding-inline: var(--sl-rand) !important;
}
.ms-studylingua .elementor-6617 :is(.elementor-element-2528b81, .elementor-element-42898f8) > .e-con-inner {
	max-width: var(--sl-breite);
	padding-inline: 0 !important;
}
.ms-studylingua .elementor-6617 .elementor-element-2528b81 > .e-con-inner {
	padding-top: 2.4rem !important;
}
/* Untertitel „So sind wir erreichbar“ in Violett wie die übrigen Abschnittstitel */
.ms-studylingua .elementor-6617 .elementor-element-8445a19 .elementor-heading-title {
	color: var(--sl-violett) !important;
	font-weight: 600;
}

/* Bürokarten: weiss, runde Ecken, Schatten statt grauem Rahmen */
.ms-studylingua .elementor-6617 .elementor-element-42898f8 > .e-con-inner {
	gap: 1.25rem !important;
	padding-bottom: 3rem !important;
}
.ms-studylingua .elementor-6617 :is(.elementor-element-b689e6c, .elementor-element-9500d73, .elementor-element-f961a0d, .elementor-element-773819c) {
	background: var(--sl-weiss) !important;
	border: 0 !important;
	border-radius: var(--sl-r-box) !important;
	box-shadow: var(--sl-schatten);
	padding: 1.4rem !important;
}
.ms-studylingua .elementor-6617 :is(.elementor-element-d2e3d55, .elementor-element-61c578a, .elementor-element-ce882cf, .elementor-element-d73d2fa) .elementor-heading-title {
	color: var(--sl-violett) !important;
	font-weight: 600;
}
/* Karten (Google Maps bzw. Platzhalter des Cookie-Banners) mit runden Ecken */
.ms-studylingua .elementor-6617 .elementor-widget-google_maps .elementor-widget-container,
.ms-studylingua .elementor-6617 .elementor-widget-google_maps iframe,
.ms-studylingua .elementor-6617 .elementor-widget-google_maps .rcb-content-blocker {
	border-radius: var(--sl-r-klein);
	overflow: hidden;
}

/* Handy: Bild niedriger, Karten untereinander mit etwas weniger Innenabstand */
@media (max-width: 767px) {
	.ms-studylingua .elementor-6617 .elementor-element-dd34476 {
		height: 11rem;
		margin-top: 1rem !important;
	}
	.ms-studylingua .elementor-6617 :is(.elementor-element-b689e6c, .elementor-element-9500d73, .elementor-element-f961a0d, .elementor-element-773819c) {
		padding: 1.2rem !important;
	}
}