/* Website-weite Ergaenzungen ohne Elementor.
   1. Lora, lokal ausgeliefert. Keine Verbindung zu Google-Servern.
      Variable Font, deshalb deckt eine Datei die Staerken 400 bis 700 ab.
   2. Footer, uebernommen aus dem frueheren Elementor-Template 7098. */

@font-face{
	font-family:'Lora';
	font-style:italic;
	font-weight:400 700;
	font-display:swap;
	src:url('fonts/lora-latin-ext-italic.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;
}

@font-face{
	font-family:'Lora';
	font-style:italic;
	font-weight:400 700;
	font-display:swap;
	src:url('fonts/lora-latin-italic.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:'Lora';
	font-style:normal;
	font-weight:400 700;
	font-display:swap;
	src:url('fonts/lora-latin-ext-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;
}

@font-face{
	font-family:'Lora';
	font-style:normal;
	font-weight:400 700;
	font-display:swap;
	src:url('fonts/lora-latin-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;
}

.da-footer{
	background:#eaeaea;
	border-top:1px dotted #a0a0a0;
	padding:22px 20px;
	text-align:center;
}
.da-footer__text{
	margin:0 auto;
	max-width:1100px;
	font-size:19px;
	line-height:1.7;
	color:#4a4a4a;
}
.da-footer__text a{
	color:#000;
	text-decoration:none;
	border-bottom:1px solid transparent;
}
.da-footer__text a:hover,
.da-footer__text a:focus-visible{
	border-bottom-color:currentColor;
}
.da-footer__text a:focus-visible{
	outline:2px solid #000;
	outline-offset:3px;
}
@media (max-width:1024px){
	.da-footer__text{font-size:17px;}
}
@media (max-width:767px){
	.da-footer{padding:18px 14px;}
	.da-footer__text{font-size:15px;line-height:1.75;}
}

/* ---------- Lesebreite auf Gutenberg-Seiten ----------
   Astra setzt alle direkten Kinder von .entry-content auf 1200px.
   Fliesstext braucht weniger, Medien duerfen breiter bleiben.
   Gleiche Masse wie in den Blogbeitraegen. */

.entry-content[data-ast-blocks-layout] > p,
.entry-content[data-ast-blocks-layout] > h1,
.entry-content[data-ast-blocks-layout] > h2,
.entry-content[data-ast-blocks-layout] > h3,
.entry-content[data-ast-blocks-layout] > h4,
.entry-content[data-ast-blocks-layout] > ul,
.entry-content[data-ast-blocks-layout] > ol,
.entry-content[data-ast-blocks-layout] > blockquote{
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}
.entry-content[data-ast-blocks-layout] > p{margin-bottom:1.9em;}
.entry-content[data-ast-blocks-layout] > h1,
.entry-content[data-ast-blocks-layout] > h2{margin-top:1.6em;margin-bottom:.5em;}
.entry-content[data-ast-blocks-layout] > h1:first-child,
.entry-content[data-ast-blocks-layout] > h2:first-child{margin-top:0;}

/* Formular etwas breiter als der Fliesstext, es steht zweispaltig */
.entry-content[data-ast-blocks-layout] > .da-form{
	max-width:820px;
	margin-left:auto;
	margin-right:auto;
}

/* Beim page-builder-Layout gibt es keinen Container, deshalb hier
   selbst begrenzen. Der Hero bleibt davon ausgenommen. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > p,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > h1,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > h2,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > h3,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > h4,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > ul,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > ol,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > blockquote{
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
	padding-right:20px;
}
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-form{
	max-width:860px;
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
	padding-right:20px;
}
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-seiten-hero,
.entry-content[data-ast-blocks-layout] > .da-seiten-hero{
	max-width:none;
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
}
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > p:last-child{padding-bottom:60px;}

/* Titelbilder ueber die volle Breite */
.entry-content[data-ast-blocks-layout] > .wp-block-cover.alignfull,
.entry-content[data-ast-blocks-layout] > .alignfull{
	max-width:100vw;
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}
.da-seiten-hero{margin-bottom:44px;}

@media (max-width:767px){
	.da-seiten-hero{margin-bottom:30px;}
}

/* ==========================================================================
   KOPFBEREICH: eine Definition fuer die ganze Seite
   ==========================================================================
   Hier stand frueher fuer jeden Seitentyp eine eigene Fassung: Startseite,
   Seiten mit Titelbild, Beitraege, Archive. Jede Nachbesserung an einer
   Stelle verschob eine andere, zuletzt rutschten die Aufklappmenues in den
   Kopf hinein.

   Die Ursache waren Regeln, die die Geometrie des Kopfes verstellten,
   sobald Astras durchsichtiger Kopf irgendwo nicht griff: kein Abstand
   nach oben, flacheres Logo. Damit endete der Menuepunkt 17px ueber der
   Kopfunterkante, und die Klappe haengt am Menuepunkt, nicht am Kopf.

   Deshalb gilt ab hier: an der Geometrie des Kopfes wird nichts mehr
   veraendert. Astra setzt sie, ueberall gleich. Wir setzen nur noch die
   Farbe der Leiste und, bei Seiten mit Titelbild, die Lage darueber.

   Wer den Kopf aendern will, aendert ihn hier. Einzelfallregeln fuer den
   Kopf gehoeren in keine andere Datei.
   ========================================================================== */

/* --- Farbe der Leiste --------------------------------------------------
   Astra liefert diesen Wert ueber seinen durchsichtigen Kopf, den man je
   Seite und fuer Archive getrennt abschalten kann. Wo er abgeschaltet ist,
   faellt die Leiste auf voellig durchsichtig zurueck und verschwindet ueber
   Bildern. Derselbe Wert wie in Astras Einstellung, damit beide Wege zum
   gleichen Ergebnis fuehren. */
#masthead .ast-primary-header-bar{
	background-color:rgba(255,255,255,.65);
}

/* --- Lage ueber einem Titelbild ----------------------------------------
   Drei Klassen aus drei Bauzeiten, die dasselbe meinen: .da-start-hero auf
   der Startseite, .da-seiten-hero auf Seiten, .da-hero in Beitraegen. Wo
   eine davon vorkommt, nehmen wir den Kopf aus dem Fluss, damit das Bild
   randlos oben beginnt. Auf schmalen Schirmen bleibt er stehen: dort ist
   das Logo auf weissem Grund besser zu lesen. */
@media (min-width:922px){
	body:has(.da-start-hero) #masthead,
	body:has(.da-seiten-hero) #masthead,
	body:has(.da-hero) #masthead{
		position:absolute;
		left:0;
		right:0;
		top:0;
		z-index:99;
	}
}

body:has(.da-seiten-hero) #primary{
	margin-top:0 !important;
	padding-top:0 !important;
}
body:has(.da-seiten-hero) #content,
body:has(.da-seiten-hero) .ast-container{
	padding-top:0 !important;
}
/* Der fixierte Kopf beim Scrollen bleibt davon unberuehrt */
body:has(.da-seiten-hero) #masthead.ast-header-sticked,
body:has(.da-seiten-hero) .ast-sticky-active{position:fixed;}
/* Hoehe wie auf der FAQ-Seite: volle Fensterhoehe, flacher auf kleinen Geraeten.
   Das Bild selbst bleibt unveraendert, abgedunkelt wird nur der Balken unten. */
.da-seiten-hero.wp-block-cover{
	min-height:100vh;
	align-items:flex-end;        /* Titelbalken sitzt unten */
	justify-content:center;
	/* Der Abstand nach unten muss groesser sein als der Ueberstand der
	   Inhaltskarte, sonst stossen Balken und Karte aneinander. */
	padding:0 0 var(--da-balken-abstand);
}
.da-seiten-hero .wp-block-cover__background{
	background:none !important;
	opacity:0 !important;
}
/* Der dunkle Balken, in dem der Titel steht */
.da-seiten-hero .wp-block-cover__inner-container{
	width:100%;
	max-width:none;
	min-height:var(--da-balken-hoehe);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(0,0,0,.45);
}
.da-seiten-hero__titel{
	color:#fff !important;
	text-align:center;
	margin:0 !important;
	line-height:1.25;
	max-width:900px;
}

@media (max-width:1024px){
	.da-seiten-hero.wp-block-cover{min-height:580px;}
}
@media (max-width:1024px){
	:root{--da-balken-hoehe:86px;--da-balken-abstand:48px;}
}
@media (max-width:767px){
	:root{--da-balken-hoehe:70px;--da-balken-abstand:34px;}
	.da-seiten-hero.wp-block-cover{min-height:240px !important;}
	.da-seiten-hero .wp-block-cover__inner-container{padding:14px 16px;}
	.da-seiten-hero__titel{font-size:30px;}
}


/* ---------- Logo im fixierten Kopf ----------
   Im Ruhezustand ragt das Logo bewusst nach oben aus dem Kopf heraus
   (.site-branding hat margin-top:-60px). Beim Scrollen schrumpft der Kopf,
   dann schwebt das Logo darueber. Hier wird es sauber eingepasst. */

/* Nur den negativen Abstand aufheben. Die Zentrierung uebernimmt der
   umgebende Flex-Container von Astra, eine eigene Hoehe wuerde den Kopf aufblaehen. */
.ast-header-sticked .site-branding,
.ast-sticky-shrunk .site-branding,
.ast-header-sticked .ast-site-identity,
.ast-sticky-shrunk .ast-site-identity{
	margin-top:0 !important;
	padding-top:0 !important;
	padding-bottom:0 !important;
}
/* Achtung: display hier nicht erzwingen. Astra blendet je nach Zustand
   eines der beiden Logos per display:none aus, ein !important zeigt beide. */
.ast-header-sticked .custom-logo-link,
.ast-sticky-shrunk .custom-logo-link,
.ast-header-sticked .sticky-custom-logo,
.ast-sticky-shrunk .sticky-custom-logo{
	line-height:0;
}
.ast-header-sticked .custom-logo,
.ast-sticky-shrunk .custom-logo{
	max-height:64px;
	width:auto !important;
	height:auto;
	vertical-align:middle;
}

/* ---------- Inhaltskarte auf Seiten ----------
   Gleiche Optik wie in den Blogbeitraegen: weisse Flaeche mit Schatten,
   die ein Stueck in das Titelbild hineinragt. */

/* Rand, Hoehe des Ueberstands und Innenabstand stehen als Variablen
   an einer Stelle. Wer sie aendert, aendert jede Karte auf jeder Seite.
   Die Karte selbst bleibt immer zentriert (margin links und rechts auto),
   deshalb duerfen die Media Queries nur die Variablen anfassen. */
:root{
	--da-karte-rand:40px;      /* Abstand zum Fensterrand, beidseitig */
	--da-karte-max:1160px;     /* Breite, die sie hoechstens einnimmt */
	--da-karte-innen:48px 40px;
	--da-karte-ueberstand:-30px;  /* so weit ragt sie in das Titelbild */
	--da-karte-unten:60px;

	/* Titelbalken im Hero. Der Abstand nach unten setzt sich zusammen
	   aus dem Ueberstand der Karte und dem gewuenschten Zwischenraum,
	   damit der Balken nicht auf der Karte aufsitzt. */
	--da-balken-hoehe:100px;
	--da-balken-abstand:60px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-seiten-karte,
.entry-content[data-ast-blocks-layout] > .da-seiten-karte{
	position:relative;
	z-index:2;
	width:100%;
	max-width:min(var(--da-karte-max), calc(100% - 2 * var(--da-karte-rand)));
	margin-top:var(--da-karte-ueberstand);
	margin-left:auto;
	margin-right:auto;
	margin-bottom:var(--da-karte-unten);
	padding:var(--da-karte-innen);
	background:#fff;
	box-shadow:0 0 10px 0 rgba(0,0,0,.5);
}

/* Innerhalb der Karte gelten dieselben Lesebreiten wie sonst */
.da-seiten-karte > p,
.da-seiten-karte > h2,
.da-seiten-karte > h3,
.da-seiten-karte > ul,
.da-seiten-karte > ol{
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding-left:0;
	padding-right:0;
}
.da-seiten-karte > h2:first-child{margin-top:0;}
.da-seiten-karte .da-form{
	max-width:820px;
	margin-left:auto;
	margin-right:auto;
	padding-left:0;
	padding-right:0;
}

/* Der Hero braucht unter der Karte keinen eigenen Abstand mehr */
.da-seiten-hero{margin-bottom:0;}

@media (max-width:1024px){
	:root{
		--da-karte-rand:24px;
		--da-karte-innen:36px 28px;
		--da-karte-unten:48px;
	}
}
@media (max-width:767px){
	:root{
		--da-karte-rand:14px;
		--da-karte-innen:26px 18px;
		--da-karte-ueberstand:-20px;
		--da-karte-unten:36px;
	}
}

/* ---------- Seiten ohne Titelbild ----------
   Beim page-builder-Layout gibt es keinen oberen Abstand. Ohne Hero
   klebt der Titel sonst am Kopf. Mass aus dem Elementor-Original: 80px. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-seiten-h1:first-child{
	margin-top:80px;
}

/* Ueberschriften wie im Elementor-Original: Anton, nicht in Versalien */
.da-seiten-h1{
	font-size:39px;
	line-height:1.4em;
	color:var(--ast-global-color-2);
	text-transform:none;
}
.da-seiten-h2{
	font-size:32px;
	line-height:1.3em;
	color:var(--ast-global-color-2);
	text-transform:none;
}

/* ---------- Rundes Portraitbild ---------- */
.da-portrait{
	margin-top:40px;
	margin-bottom:40px;
}
.da-portrait img{
	width:min(460px, 70vw);
	height:auto;
	aspect-ratio:1;
	object-fit:cover;
	border-radius:50%;
	display:block;
	margin:0 auto;
}

/* ---------- Knopf ----------
   Astra faerbt Knoepfe im Hover grau ein. Deshalb alle Zustaende
   ausdruecklich setzen, sonst schlaegt das durch. Werte aus dem
   Elementor-Original. */
.da-knopfreihe{
	margin-bottom:50px;
}
.da-knopf .wp-block-button__link,
.da-knopf .wp-block-button__link:link,
.da-knopf .wp-block-button__link:visited{
	background-color:#ffffff;
	color:#7a7a7a;
	border:1px solid #54595f;
	border-radius:3px;
	padding:15px 30px;
	font-family:'Lora',Georgia,serif;
	font-size:16px;
	font-weight:500;
	line-height:1.5;
	text-decoration:none;
	transition:background-color .3s, color .3s, border-color .3s;
}
.da-knopf .wp-block-button__link:hover,
.da-knopf .wp-block-button__link:focus,
.da-knopf .wp-block-button__link:active{
	background-color:#f4f2ee;
	color:var(--ast-global-color-2);
	border-color:var(--ast-global-color-2);
}
.da-knopf .wp-block-button__link:focus-visible{
	outline:2px solid var(--ast-global-color-2);
	outline-offset:3px;
}

@media (max-width:544px){
	.da-seiten-h1{font-size:30px;}
	.da-seiten-h2{font-size:26px;}
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-seiten-h1:first-child{
		margin-top:50px;
	}
	.da-knopf .wp-block-button__link{
		padding:14px 22px;
		font-size:15px;
	}
}

/* ---------- Beitragskacheln ----------
   Genutzt von [da_beitraege] und von "Mehr Lovestories" in den
   Beitraegen. Bildverhaeltnis und Titelstreifen wie im frueheren
   Elementor-Widget. */
.da-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
}
.da-grid--1{grid-template-columns:1fr;}
.da-grid--2{grid-template-columns:repeat(2,1fr);}
.da-grid--3{grid-template-columns:repeat(3,1fr);}
.da-grid--4{grid-template-columns:repeat(4,1fr);}

.da-item{position:relative;border:1px solid #dbdbdb;overflow:hidden;}
.da-item__link{display:block;text-decoration:none;position:relative;}
.da-item__thumb{
	position:relative;
	width:100%;
	padding-bottom:67%;      /* item_ratio 0.67, haelt die Bildproportion */
	overflow:hidden;
}
.da-item__thumb img{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;display:block;
	transition:transform .5s ease;
}
.da-item__link:hover .da-item__thumb img{transform:scale(1.04);}
/* Titel liegt im Bild, nicht darunter: so bleibt das Seitenverhaeltnis
   erhalten und der Abstand zwischen den Zeilen kommt vom Grid-Gap. */
.da-item__text{
	position:absolute;
	left:0;right:0;bottom:0;
	padding:18px 24px 18px 20px;
	background-color:rgba(0,0,0,.35);
	text-align:right;
}
.da-item__heading{
	margin:0;
	color:#fff;
	font-weight:normal;
	font-size:19px;
	line-height:1.3;
	/* mehr als drei Zeilen wuerden das Bild zu stark verdecken */
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

@media (max-width:920px){
	.da-grid--3,.da-grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
	.da-grid,.da-grid--2,.da-grid--3,.da-grid--4{grid-template-columns:1fr;}
	.da-item__text{padding:14px 16px;}
}

/* ---------- Titelbild als Bilderfolge ----------
   Vier Bilder wechseln sich ab: je drei Sekunden Standzeit,
   zwei Sekunden Ueberblendung, Zyklus also zwanzig Sekunden.
   Reines CSS, damit dafuer kein Skript noetig ist. */
/* Astra begrenzt Nachfahren im Inhalt auf die Inhaltsbreite.
   Der Bildrahmen muss aber die ganze Flaeche fuellen. */
.da-start-hero .da-diashow{
	position:absolute;
	inset:0;
	width:auto;
	max-width:none !important;
	margin:0 !important;
	overflow:hidden;
	z-index:0;
}
.da-diashow__bild{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	opacity:0;
	animation:da-blende 20s infinite;
}
/* Negative Verzoegerungen: so ist das erste Bild sofort da und die
   Uebergaenge greifen ineinander, statt nacheinander abzulaufen. */
.da-diashow__bild:nth-child(1){animation-delay:0s;}
.da-diashow__bild:nth-child(2){animation-delay:-15s;}
.da-diashow__bild:nth-child(3){animation-delay:-10s;}
.da-diashow__bild:nth-child(4){animation-delay:-5s;}

@keyframes da-blende{
	0%   {opacity:1;}
	15%  {opacity:1;}   /* drei Sekunden stehen */
	25%  {opacity:0;}   /* zwei Sekunden ausblenden */
	90%  {opacity:0;}
	100% {opacity:1;}   /* zwei Sekunden einblenden */
}

/* Wer Bewegung abbestellt hat, sieht nur das erste Bild */
@media (prefers-reduced-motion:reduce){
	.da-diashow__bild{animation:none;}
	.da-diashow__bild:nth-child(1){opacity:1;}
	.da-diashow__bild:not(:nth-child(1)){opacity:0;}
}

/* ---------- Titelbereich der Startseite ---------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-start-hero,
.entry-content[data-ast-blocks-layout] > .da-start-hero{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:0;
	overflow:hidden;
	background-color:#000;
}
.da-start-hero .da-start-hero__inhalt{
	position:relative;
	z-index:1;
	width:100%;
	max-width:none !important;
	margin:0 !important;
	padding:0 20px;
	text-align:center;
}
/* Kein dunkles Overlay ueber dem Bild. Die Lesbarkeit kommt allein
   aus dem Schatten der Schrift, genau wie im Original. */
.da-start-hero .da-start-hero__titel{
	margin:0 !important;
	max-width:none;
	font-size:66.5px;
	line-height:1.4em;
	color:#fff;
	text-transform:uppercase;
	text-shadow:0 0 10px rgba(0,0,0,.52);
}
.da-start-hero .da-start-hero__unter{
	margin:0 !important;
	font-family:'Anton',Impact,sans-serif;
	font-size:32.3px;
	line-height:1em;
	font-weight:400;
	color:#fff;
	text-shadow:0 0 10px rgba(0,0,0,.45);
}

/* Die Lage des Kopfes ueber dem Bild steht im Kopfblock weiter oben,
   gemeinsam fuer alle drei Titelbild-Klassen. */
body:has(.da-start-hero) .ast-header-sticked{position:fixed;}

/* Abschnitt unter dem Titelbild */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-start-hero + *{
	margin-top:60px;
}

@media (max-width:921px){
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-start-hero,
	.entry-content[data-ast-blocks-layout] > .da-start-hero{
		min-height:570px;
		align-items:flex-end;
		padding-bottom:60px;
	}
	.da-start-hero .da-start-hero__titel{font-size:48px;}
	.da-start-hero .da-start-hero__unter{font-size:24px;line-height:1.3em;}
}

@media (max-width:544px){
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-start-hero,
	.entry-content[data-ast-blocks-layout] > .da-start-hero{
		min-height:265px;
		padding-bottom:30px;
	}
	.da-start-hero .da-start-hero__titel{font-size:32px;line-height:1.2em;}
	.da-start-hero .da-start-hero__unter{font-size:18px;line-height:1.3em;}
}

/* ---------- Absaetze mit Einleitungscharakter ----------
   Im Original stand der erste Absatz in 26,6px, aber mit einer
   Zeilenhoehe von nur 33,25px. Die Zeilen klebten aneinander.
   Groesse etwas zurueckgenommen, Zeilenhoehe angehoben. */
.entry-content[data-ast-blocks-layout] > p.da-einleitung,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > p.da-einleitung{
	font-size:24px;
	line-height:1.6;
}
@media (max-width:544px){
	.entry-content[data-ast-blocks-layout] > p.da-einleitung,
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > p.da-einleitung{
		font-size:20px;
	}
}

/* ---------- Beitragsliste auf Seiten ---------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-liste,
.entry-content[data-ast-blocks-layout] > .da-liste{
	max-width:min(880px, calc(100% - 40px));
	margin:0 auto;
	padding:0;
}

/* ---------- Knopf mit Linien links und rechts ---------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-mehr,
.entry-content[data-ast-blocks-layout] > .da-mehr{
	display:flex;
	align-items:center;
	gap:24px;
	max-width:min(880px, calc(100% - 40px));
	margin:45px auto 70px;
	padding:0;
}
.da-mehr::before,
.da-mehr::after{
	content:"";
	flex:1 1 auto;
	height:1px;
	background:#e8e8e8;
}
.da-mehr .wp-block-button__link{
	white-space:normal;
}
@media (max-width:544px){
	.da-mehr::before,.da-mehr::after{display:none;}
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-mehr,
	.entry-content[data-ast-blocks-layout] > .da-mehr{
		justify-content:center;
	}
}

/* Die vier Bilder der Titelfolge. Im Stylesheet statt inline,
   damit auf kleinen Geraeten die kleineren Dateien geladen werden. */
.da-diashow__bild--1{background-image:url('/wp-content/uploads/2023/04/20220920-0066-1600x1066.webp');}
.da-diashow__bild--2{background-image:url('/wp-content/uploads/2023/04/20210918-0767-1600x1066.webp');}
.da-diashow__bild--3{background-image:url('/wp-content/uploads/2023/04/20220608-1565-1600x1066.webp');}
.da-diashow__bild--4{background-image:url('/wp-content/uploads/2023/04/20220606-4318-1600x1066.webp');}

@media (max-width:800px){
	.da-diashow__bild--1{background-image:url('/wp-content/uploads/2023/04/20220920-0066-768x512.webp');}
	.da-diashow__bild--2{background-image:url('/wp-content/uploads/2023/04/20210918-0767-768x512.webp');}
	.da-diashow__bild--3{background-image:url('/wp-content/uploads/2023/04/20220608-1565-768x512.webp');}
	.da-diashow__bild--4{background-image:url('/wp-content/uploads/2023/04/20220606-4318-768x512.webp');}
}

/* Der Schriftzug unter dem Titelbild */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-claim,
.entry-content[data-ast-blocks-layout] > .da-claim{
	max-width:min(400px, calc(100% - 40px));
	margin:60px auto 40px;
	padding:0;
}
.da-claim img{
	width:100% !important;   /* der Block schreibt 400px inline */
	max-width:100%;
	height:auto;
	display:block;
}

/* Die Gruppe um die Kacheln setzt sonst Astras Innenbreite durch */
.da-liste > .wp-block-group__inner-container,
.da-liste .da-grid{max-width:none;width:100%;margin:0;}

/* ---------- Kopfzeile auf schmalen Schirmen ----------
   Das Logo war mit 149px so gross, dass es aus der 66px hohen
   Kopfzeile herausragte. Auf siebzig Prozent zurueckgenommen. */
@media (max-width:921px){
	#masthead .custom-logo{
		width:104px !important;
		height:auto !important;
		max-width:104px;
	}
	/* Astra zieht das Logo mit einem negativen Abstand nach oben und
	   gleicht damit den Abstand der Kopfleiste aus. Beides faellt weg,
	   damit das Logo mittig in der Leiste steht. */
	#masthead .site-branding,
	#masthead .ast-site-identity{
		margin-top:0 !important;
		padding-top:8px !important;
		padding-bottom:8px !important;
	}
	#masthead .ast-primary-header-bar,
	#masthead .main-header-bar{
		margin-top:0 !important;
	}
	/* Auf allen Seiten mit Titelbild soll der Inhalt unter dem Kopf beginnen */
	body:has(.da-seiten-hero) #primary,
	body:has(.da-start-hero) #primary{
		margin-top:0 !important;
		padding-top:0 !important;
	}
	/* Astra zieht diesen Container 30px nach oben und gleicht damit die
	   Luft ueber dem Kopf aus. In der Leiste selbst stimmt das. Im
	   ausgeklappten Menue darunter nicht: dort rutschte der erste
	   Punkt, "Home", zur Haelfte unter die Kopfleiste. */
	#ast-mobile-header .ast-mobile-header-content .ast-main-header-bar-alignment{
		margin-top:0 !important;
	}
}

/* ---------- Seiten ohne Titelbild: Abstand nach dem Kopf ----------
   Gilt fuer jede erste Ueberschrift, nicht nur fuer h1. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-seiten-h2:first-child,
.entry-content[data-ast-blocks-layout] > .da-seiten-h2:first-child{
	margin-top:80px;
}

/* ---------- Dankeseite: die drei Schritte ---------- */
.da-danke-titel{
	font-size:57px;
	line-height:1.3em;
}
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-schritte,
.entry-content[data-ast-blocks-layout] > .da-schritte{
	max-width:min(1067px, calc(100% - 40px));
	margin:50px auto 70px;
	padding:0 20px;
	gap:40px;
}
.da-schritt__nummer{
	font-size:38px;
	line-height:1.3em;
	color:#7a7a7a;
	margin:0 0 18px;
}
/* In den Spalten gelten die Lesebreiten des Fliesstexts nicht,
   die Spalte gibt die Breite vor. */
.da-schritte .wp-block-column > p{
	max-width:none;
	margin-bottom:0;
}

@media (max-width:921px){
	.da-danke-titel{font-size:42px;}
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-schritte,
	.entry-content[data-ast-blocks-layout] > .da-schritte{
		gap:45px;
	}
}
@media (max-width:544px){
	.da-danke-titel{font-size:30px;}
	.da-schritt__nummer{font-size:30px;}
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-seiten-h2:first-child,
	.entry-content[data-ast-blocks-layout] > .da-seiten-h2:first-child{
		margin-top:50px;
	}
}

/* ---------- Preisliste ----------
   Titel links, Betrag rechts, dazwischen eine gepunktete Linie,
   die den freien Platz ausfuellt. Werte aus dem Elementor-Original. */
.da-preis{
	margin:0 0 45px;
}
.da-preis__kopf{
	display:flex;
	align-items:center;
	gap:16px;
}
.da-preis__titel{
	font-family:'Lora',Georgia,serif;
	font-size:30px;
	font-weight:600;
	color:var(--ast-global-color-3);
	white-space:nowrap;
}
.da-preis__linie{
	flex:1 1 auto;
	height:0;
	border-bottom:2px dotted var(--ast-global-color-3);
}
.da-preis__betrag{
	font-family:'Lora',Georgia,serif;
	font-size:48px;
	color:var(--ast-global-color-3);
	white-space:nowrap;
}
/* Im Original stand die Beschreibung in 22,8px bei nur 33,25px
   Zeilenhoehe. Groesse etwas zurueck, Zeilenhoehe hoch. */
.da-preis__text{
	margin:14px 0 0;
	font-size:21px;
	line-height:1.6;
	color:#4c4c4c;
}
.da-leistungen{
	max-width:640px;
	margin:0 auto 20px;
	padding-left:1.2em;
	font-size:19px;
	line-height:1.9;
}
.da-leistungen li{margin-bottom:4px;}

@media (max-width:767px){
	.da-preis__kopf{
		flex-wrap:wrap;
		gap:0 12px;
	}
	.da-preis__titel{font-size:23px;white-space:normal;}
	.da-preis__betrag{font-size:32px;}
	.da-preis__linie{display:none;}
	.da-preis__text{font-size:18px;}
	.da-leistungen{font-size:18px;}
}

/* ---------- Empfehlungen fuer Dienstleister ----------
   Rundes Bild und Text nebeneinander, die Seite wechselt von
   Eintrag zu Eintrag. */
.da-partner-liste{
	margin-top:50px;
}
.da-partner-karte{
	display:flex;
	align-items:center;
	gap:50px;
	margin-bottom:80px;
}
.da-partner-karte:last-child{margin-bottom:20px;}
/* Ungerade Eintraege: Bild rechts, Text rechtsbuendig */
.da-partner-karte:nth-child(odd){
	flex-direction:row-reverse;
	text-align:right;
}
.da-partner-karte__bild{
	flex:0 0 auto;
	display:block;
	line-height:0;
}
.da-partner-karte__bild img{
	width:min(360px, 38vw);
	height:auto;
	aspect-ratio:1;
	object-fit:cover;
	border-radius:50%;
	display:block;
	transition:opacity .3s;
}
.da-partner-karte__bild:hover img{opacity:.85;}
.da-partner-karte__text{flex:1 1 auto;}
.da-partner-karte__titel{
	margin:0 0 14px;
	font-size:26px;
	line-height:1.3;
	color:var(--ast-global-color-2);
}
.da-partner-karte__titel a{
	color:inherit;
	text-decoration:none;
}
.da-partner-karte__titel a:hover{text-decoration:underline;}
.da-partner-karte__text p{
	margin:0;
	font-size:19px;
	line-height:1.75;
	color:var(--ast-global-color-3);
}

@media (max-width:767px){
	.da-partner-karte,
	.da-partner-karte:nth-child(odd){
		flex-direction:column;
		text-align:center;
		gap:24px;
		margin-bottom:55px;
	}
	.da-partner-karte__bild img{width:min(240px, 62vw);}
	.da-partner-karte__titel{font-size:22px;}
	.da-partner-karte__text p{font-size:18px;}
}

/* ---------- Fragen und Antworten ---------- */
.da-faq__gruppe{
	font-size:32px;
	line-height:1.3em;
	color:#54595f;
	margin-bottom:.6em;
}
.da-faq__frage{
	font-size:26px;
	line-height:1.3em;
	color:var(--ast-global-color-2);
	margin-top:2.2em;
	margin-bottom:.6em;
}
.da-faq__frage:first-of-type{margin-top:1.2em;}
.da-trenner{
	max-width:800px;
	margin:50px auto;
	border:0;
	border-top:1px solid #e8e8e8;
	background:none;
	height:0;
}
@media (max-width:544px){
	.da-faq__gruppe{font-size:25px;}
	.da-faq__frage{font-size:21px;margin-top:1.8em;}
}

/* ---------- Bildband zwischen zwei Abschnitten ----------
   Volle Fensterbreite, feste Hoehe, Bild mittig beschnitten. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-band,
.entry-content[data-ast-blocks-layout] > .da-band{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	margin-top:0;
	margin-bottom:0;
	padding:0;
	height:70vh;
	min-height:420px;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

/* Karte ohne Ueberstand: fuer Abschnitte, die nicht auf ein
   Titelbild folgen, sondern auf ein Bildband. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-seiten-karte--flach,
.entry-content[data-ast-blocks-layout] > .da-seiten-karte--flach{
	margin-top:var(--da-karte-unten);
}

/* Hochformatiges Bild innerhalb einer Karte */
.da-hochbild{
	margin:36px auto;
}
.da-hochbild img{
	max-width:min(460px, 100%);
	height:auto;
	display:block;
	margin:0 auto;
}

@media (max-width:767px){
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-band,
	.entry-content[data-ast-blocks-layout] > .da-band{
		height:46vh;
		min-height:250px;
	}
	.da-hochbild{margin:26px auto;}
}

/* ---------- Titelbild mit zwei Zeilen ----------
   Wo unter dem Titel noch eine Zeile steht, darf der Balken wachsen. */
.da-seiten-hero--zweizeilig .wp-block-cover__inner-container{
	min-height:auto;
	padding:22px 24px;
	flex-direction:column;
	gap:8px;
}
.da-seiten-hero__unter{
	margin:0 !important;
	font-family:'Anton',Impact,sans-serif;
	font-size:26px;
	line-height:1.2;
	color:#fff;
	text-shadow:0 0 10px rgba(0,0,0,.45);
}
@media (max-width:767px){
	.da-seiten-hero__unter{font-size:17px;}
	.da-seiten-hero--zweizeilig .wp-block-cover__inner-container{padding:14px 16px;gap:5px;}
}

/* ---------- Galerie im Mauerwerk-Satz ----------
   Gutenberg kennt kein Masonry, deshalb ueber Spalten geloest. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .da-galerie,
.entry-content[data-ast-blocks-layout] .da-galerie{
	display:block !important;
	columns:3;
	column-gap:16px;
	max-width:none;
	margin:36px 0 46px;
	padding:0;
}
.da-galerie figure.wp-block-image{
	break-inside:avoid;
	margin:0 0 16px;
	display:block;
	width:auto !important;
}
.da-galerie figure.wp-block-image img{
	width:100%;
	height:auto;
	display:block;
}
@media (max-width:920px){
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] .da-galerie,
	.entry-content[data-ast-blocks-layout] .da-galerie{columns:2;}
}
@media (max-width:600px){
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] .da-galerie,
	.entry-content[data-ast-blocks-layout] .da-galerie{columns:1;}
}

/* ---------- Buehne: Auftakt der Ueber-mich-Seite ----------
   Vollflaechig dunkel, das Portrait liegt randlos auf dem Grund
   wie ein Print auf schwarzem Karton. Titel und Einstieg stehen
   hell daneben, danach wechselt die Seite in die hellen Karten. */
.entry-content[data-ast-blocks-layout] > .da-buehne{
	background:#111111;
	padding:clamp(48px, 9vh, 110px) 20px;
	margin-top:0;
	margin-bottom:0;
}
.da-buehne__inhalt{
	display:grid;
	grid-template-columns:minmax(300px, 430px) minmax(0, 560px);
	grid-template-rows:auto auto;
	justify-content:center;
	align-items:center;
	column-gap:clamp(40px, 6vw, 88px);
	max-width:1160px;
	margin:0 auto;
}
.da-buehne__bild{
	grid-column:1;
	grid-row:1 / 3;
	align-self:center;
	margin:0;
}
.da-buehne__bild img{
	width:100%;
	aspect-ratio:4 / 5;
	object-fit:cover;
	object-position:50% 20%;
	display:block;
}
.da-buehne__titel{
	grid-column:2;
	grid-row:1;
	align-self:end;
	color:#ffffff !important;
	text-align:left;
	font-size:clamp(38px, 4.6vw, 58px);
	line-height:1.04;
	margin:0 0 24px;
}
.da-buehne__text{
	grid-column:2;
	grid-row:2;
	align-self:start;
}
.da-buehne__text p{
	color:#c9c9c9;
	font-size:17px;
	line-height:1.75;
	margin:0 0 18px;
}
.da-buehne__text p:last-child{margin-bottom:0;}
@media (max-width:860px){
	.da-buehne__inhalt{
		display:block;
	}
	.da-buehne__titel{text-align:center;font-size:32px;margin:0 0 22px;}
	.da-buehne__bild{width:min(320px, 80vw);margin:0 auto 24px;}
	.da-buehne__text p{font-size:16px;}
}

/* ---------- Bildbaender in Blogbeitraegen ----------
   Das Blog-Template traegt kein data-ast-blocks-layout am
   entry-content, deshalb eigene Selektoren. Gleiches Verhalten
   wie auf den Seiten: volle Fensterbreite, mittig beschnitten. */
.single-post .entry-content > .da-band,
.single-post .da-entry > .da-band{
	width:100vw;
	max-width:100vw;
	margin:44px calc(50% - 50vw) 36px;
	padding:0;
	height:70vh;
	min-height:420px;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
.single-post .entry-content > .da-band:first-child,
.single-post .da-entry > .da-band:first-child{margin-top:0;}
@media (max-width:767px){
	.single-post .entry-content > .da-band,
.single-post .da-entry > .da-band{
		height:46vh;
		min-height:250px;
		margin:30px calc(50% - 50vw) 24px;
	}
}

/* ---------- Aufruf-Flaeche ----------
   Warme, helle Flaeche mit Frage, Satz und Knopf. Farbwelt wie die
   Bestaetigungsmail (#f4f2ee). Als Gutenberg-Vorlage in da-cta.php
   hinterlegt, funktioniert in Seiten-Karten und in der Blog-Lesespalte. */
/* Astras Vollbreiten-Template streckt Gruppen im Seiteninhalt,
   deshalb Breite und Zentrierung hier ausdruecklich festnageln. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-cta,
.entry-content[data-ast-blocks-layout] > .da-cta{
	width:auto !important;
	max-width:1000px !important;
	margin:56px auto !important;
}
.da-cta{
	background:#f4f2ee;
	border:1px solid #e5e1d8;
	border-radius:4px;
	width:auto !important;
	max-width:1000px !important;
	margin:56px auto !important;
	padding:50px 40px 54px;
}
.da-cta__titel{
	font-family:'Anton',Impact,sans-serif;
	font-size:clamp(26px, 3.2vw, 34px);
	line-height:1.18;
	color:var(--ast-global-color-2, #484848);
	margin:0 0 10px;
}
.da-cta__text{
	color:var(--ast-global-color-3, #6a6a6a);
	font-size:17px;
	line-height:1.7;
	margin:0 0 28px;
}
.da-cta .da-knopfreihe{margin-bottom:0;}
/* Der Knopf-Hover wechselt global auf den Flaechenton und wuerde hier
   verschwinden. Auf der Flaeche bleibt der Grund weiss, dafuer ziehen
   Text und Rand nach. */
.da-cta .da-knopf .wp-block-button__link:hover,
.da-cta .da-knopf .wp-block-button__link:focus,
.da-cta .da-knopf .wp-block-button__link:active{
	background-color:#ffffff;
	color:var(--ast-global-color-2);
	border-color:var(--ast-global-color-2);
}
@media (max-width:767px){
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .da-cta,
	.entry-content[data-ast-blocks-layout] > .da-cta,
	.da-cta{
		max-width:calc(100% - 28px) !important;
		margin:40px auto !important;
		padding:36px 20px 40px;
	}
	.da-cta__titel{font-size:24px;}
	.da-cta__text{font-size:16px;}
}

/* ---------- Kundenstimmen ----------
   Bewertungszeile mit Sternen, darunter drei Zitate nebeneinander.
   Die Sterne sind Inline-SVG, keine Schriftzeichen: so sitzen sie
   auf jedem Geraet gleich und bleiben bei Textzoom stabil. */
.da-stimmen{
	width:auto !important;
	max-width:1100px !important;
	margin:64px auto 8px !important;
	padding:0 20px;
}
.da-stimmen__wertung{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:12px;
	margin:0 0 40px;
	font-size:16px;
	color:var(--ast-global-color-3, #6a6a6a);
}
.da-sterne{
	display:inline-flex;
	gap:3px;
	line-height:0;
}
.da-sterne svg{
	width:20px;
	height:20px;
	fill:#c9a227;   /* gedecktes Gold, kein grelles Gelb */
	display:block;
}
.da-stimmen__liste{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:32px;
	align-items:start;
}
.da-stimme{
	background:#f4f2ee;
	border:1px solid #e5e1d8;
	border-radius:4px;
	padding:30px 28px 26px;
	margin:0;
}
.da-stimme__text{
	margin:0 0 16px;
	font-size:16px;
	line-height:1.7;
	color:var(--ast-global-color-2, #484848);
}
.da-stimme__wer{
	margin:0;
	font-size:14px;
	color:var(--ast-global-color-3, #6a6a6a);
	font-style:normal;
}
@media (max-width:920px){
	.da-stimmen__liste{grid-template-columns:1fr;gap:20px;}
	.da-stimmen{margin:48px auto 0 !important;}
	.da-stimmen__wertung{margin-bottom:28px;font-size:15px;}
	.da-stimme{padding:24px 22px 22px;}
}

/* ==========================================================================
   Aufklappmenues: nur im breiten Kopf
   ==========================================================================
   Alles hier drin beschreibt die schwebende Klappe des Desktop-Menues:
   die Luecke zur Kopfleiste, die Milchglasflaeche, die unsichtbare
   Bruecke fuer den Zeiger. Mobil gibt es davon nichts. Dort baut Astra
   ein eigenes Menue, das aufgeklappt im Textfluss steht statt zu
   schweben, ohne Rand und ohne Zeiger.

   Genau daran ist es einmal gescheitert: Die Flaeche der Klappe liegt
   auf einem Kind mit inset:0. Im Desktop-Menue sitzt die Klappe
   absolut und das Kind deckt sie genau ab. Mobil sitzt sie im Fluss,
   das Kind suchte sich den naechsten positionierten Vorfahren und legte
   sich als weisse Flaeche ueber den Menuepunkt darueber. "Portfolio"
   war dann nicht mehr lesbar.
   ========================================================================== */
@media (min-width:922px){

	/* ---------- Aufklappmenues im Kopf ----------
	   Astra setzt auf die erste Untermenue-Ebene einen margin-top von 151px.
	   Dadurch schwebt die Klappe weit unter ihrem Menuepunkt, und der Weg
	   dorthin fuehrt ueber eine sichtbare Luecke. Buendig unter dem Punkt
	   ist beides besser: es sieht zusammengehoerig aus und die Maus bleibt
	   auf dem Weg nach unten im Element. */
	.ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu,
	.ast-builder-menu-1 .main-header-menu > .menu-item > .astra-full-megamenu-wrapper{
		margin-top:0;
	}
	/* Die Klappe haengt ein paar Pixel unter der Kopfleiste und traegt
	   dieselbe milchige Flaeche, nur etwas dichter: ueber einem Titelbild
	   muss die Schrift darin sicher stehen, waehrend die Leiste selbst
	   durchsichtiger bleiben darf. Astra setzt auf der rechten Seite
	   zusaetzlich eine schwarze Oberkante, die es links nicht gibt:
	   deshalb alle Kanten hier ausdruecklich abraeumen. */
	#masthead .main-header-menu .sub-menu,
	.ast-builder-menu-1 .main-header-menu .sub-menu,
	.ast-builder-menu-2 .main-header-menu .sub-menu{
		background-color:rgba(255,255,255,.85);
		border-right:0 !important;
		border-bottom:0 !important;
		border-left:0 !important;
		box-shadow:0 6px 18px rgba(0,0,0,.10);
	}
	/* Die Luecke entsteht ueber einen durchsichtigen oberen Rand, nicht ueber
	   margin. So gehoert sie zur Klappe selbst und der Zeiger verlaesst das
	   Menue auf dem Weg nach unten nie. Ein aufgesetztes Pseudoelement half
	   hier nicht: es lag hinter dem Titelbild und wurde nicht getroffen.
	   background-clip haelt die Flaeche aus dem Rand heraus, damit die Luecke
	   optisch frei bleibt. */
	#masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu,
	#masthead .ast-builder-menu-2 .main-header-menu > .menu-item > .sub-menu,
	#masthead .main-header-menu > .menu-item > .sub-menu{
		/* Der Menuepunkt endet knapp ueber der Unterkante des Kopfes, eine
		   Rundung von unter einem Pixel. Da die Klappe am Menuepunkt haengt
		   und nicht am Kopf, begann sie genau dort und ragte sichtbar in die
		   Leiste hinein. Das eine Pixel schiebt sie darunter. */
		margin-top:1px;
		border-top:8px solid transparent !important;
		background-clip:padding-box;
	}
	/* Astra spannt ueber der Klappe eine unsichtbare Bruecke, damit der Zeiger
	   die Luecke ueberqueren kann, ohne dass das Menue zuklappt. Ihre Hoehe
	   kommt aus dem Customizer-Wert "Submenu Top Offset". Stand der auf 151,
	   war die Bruecke 158px hoch, lag ueber dem ganzen Menuepunkt und schluckte
	   jeden Klick darauf. Der Wert steht jetzt auf 0, hier bekommt die Bruecke
	   nur die zwei Pixel zurueck, die sie fuer den verschobenen Anfang braucht. */
	#masthead .main-header-menu > .menu-item > .sub-menu::before{
		top:-2px !important;
		height:11px !important;
	}

	/* Die Flaeche der ersten Ebene liegt auf einem eigenen Element, nicht auf
	   der Klappe selbst. Grund ist der durchsichtige obere Rand, der die
	   Luecke bildet: ein Weichzeichner auf der Klappe wirkt auf die ganze
	   Aussenflaeche, den Rand eingeschlossen, denn backdrop-filter kennt
	   background-clip nicht. Die Luecke bekam dadurch dasselbe Milchglas wie
	   das Menue und sah aus wie ein angeklebter Streifen. Ein Kind, das nur
	   den Innenbereich abdeckt, hat dieses Problem nicht.
	   Der Weichzeichner selbst wird gebraucht: ueber einem Titelbild steht
	   oft eine grosse weisse Ueberschrift, die sonst scharf durch die Klappe
	   scheint und die Menuepunkte unleserlich macht. */
	#masthead .main-header-menu > .menu-item > .sub-menu{
		background-color:transparent;
	}
	#masthead .main-header-menu > .menu-item > .sub-menu::after{
		content:"";
		position:absolute;
		inset:0;
		background-color:rgba(255,255,255,.85);
		backdrop-filter:blur(16px) saturate(140%);
		-webkit-backdrop-filter:blur(16px) saturate(140%);
		pointer-events:none;
		z-index:-1;
	}

	/* ---------- Aufklappmenues im fixierten Kopf ----------
	   Beim Scrollen tauscht Astra die Kopfleiste gegen eine fixierte Kopie.
	   Darin ist der Menuepunkt nur so hoch wie seine Textzeile, gut dreissig
	   Pixel, waehrend die Leiste ihre volle Hoehe behaelt. Weil die Klappe am
	   Menuepunkt haengt und nicht an der Leiste, begann sie mitten im Kopf.
	   Mit der Zeilenhoehe der Leiste sitzt der Punkt wieder auf ganzer Hoehe
	   und die Klappe an deren Unterkante, genau wie im Ruhezustand. */
	#masthead .ast-primary-header-bar.ast-header-sticked .main-header-menu > .menu-item,
	#masthead .ast-primary-header-bar.ast-sticky-active .main-header-menu > .menu-item{
		line-height:90px;
	}

}


/* ---------- Menuelinks: schwarz, Hover als leichte Vergroesserung ----------
   Astra faerbt Menuelinks grau und hellt sie beim Ueberfahren auf. Auf einer
   Schwarzweiss-Marke sitzt Schwarz besser, dann fehlt aber die Rueckmeldung.
   Sie kommt jetzt aus einer kleinen Skalierung: sichtbar genug, um zu sagen
   "hier bist du", und da sie nur den Transform aendert, verschiebt sich am
   Layout nichts und die Nachbarn bleiben ruhig. */
#masthead .main-header-menu a,
#masthead .main-header-menu a:link,
#masthead .main-header-menu a:visited,
#masthead .main-header-menu a:hover,
#masthead .main-header-menu a:focus,
#masthead .main-header-menu a:active,
#masthead .main-header-menu .current-menu-item > a,
#masthead .main-header-menu .current-menu-ancestor > a{
	color:var(--ast-global-color-0, #000000);
}
/* Die Vergroesserung gilt nur im breiten Menue. Dort sind die Eintraege
   nur so breit wie ihr Text und haben Luft um sich. Mobil laufen sie
   ueber die ganze Zeile: beim Skalieren waechst der Text dann links aus
   dem Bild heraus. */
@media (min-width:922px){
	#masthead .main-header-menu > .menu-item > a,
	#masthead .main-header-menu .sub-menu a{
		transition:transform 180ms ease-out;
		will-change:transform;
	}
	#masthead .main-header-menu > .menu-item > a{transform-origin:center center;}
	#masthead .main-header-menu > .menu-item > a:hover,
	#masthead .main-header-menu > .menu-item > a:focus-visible{transform:scale(1.08);}
	/* Im Aufklappmenue waechst der Text nach rechts, sonst wandert er aus
	   der linken Kante heraus. */
	#masthead .main-header-menu .sub-menu a{transform-origin:left center;}
	#masthead .main-header-menu .sub-menu a:hover,
	#masthead .main-header-menu .sub-menu a:focus-visible{
		transform:scale(1.06);
		background-color:transparent;
	}
}

/* Mobil uebernimmt die Zeile selbst die Rueckmeldung: sie faerbt sich
   eine Spur dunkler. Nichts bewegt sich, nichts springt, und auf dem
   Touchscreen bleibt die Angabe auch dann verstaendlich, wenn der
   Finger den Punkt schon wieder verlassen hat. */
@media (max-width:921px){
	#masthead .main-header-menu a{
		transform:none !important;
		transition:background-color 160ms ease-out;
	}
	#masthead .main-header-menu a:hover,
	#masthead .main-header-menu a:focus-visible,
	#masthead .main-header-menu a:active{
		background-color:rgba(0,0,0,.05);
	}
}
/* Wer Bewegung abbestellt hat, bekommt eine Unterstreichung statt der
   Skalierung: dieselbe Aussage, ohne Bewegung. */
@media (prefers-reduced-motion:reduce){
	#masthead .main-header-menu > .menu-item > a,
	#masthead .main-header-menu .sub-menu a{transition:none;}
	#masthead .main-header-menu a:hover,
	#masthead .main-header-menu a:focus-visible{
		transform:none;
		text-decoration:underline;
		text-underline-offset:4px;
	}
}

/* ---------- Aufklappmenues: beide Seiten gleich breit ----------
   Ohne feste Breite richtet sich jede Klappe nach ihrem laengsten Eintrag,
   dadurch sahen links und rechts unterschiedlich aus. "Fragen und Antworten"
   braucht am meisten Platz und gibt das Mass vor. Nur im breiten Menue:
   mobil steht das Untermenue im Fluss und nimmt die ganze Zeile ein. */
@media (min-width:922px){
	#masthead .main-header-menu .sub-menu{
		width:290px;
	}
	#masthead .main-header-menu .sub-menu a{
		white-space:nowrap;
	}
}