/*
==============================================
CUSTOM STYLES - Gestaltungsfreunde Standard
==============================================
Hier kommen deine Standard-Anpassungen rein,
die die Design-Tokens aus custom-tokens.css nutzen.
==============================================
*/


/* ============================================
   BORDER-RADIUS - überall 0
   ========================================== */

*,
*::before,
*::after {
	border-radius: 0 !important;
}


/* ============================================
   TYPOGRAPHY - Nutzt Tokens
   ========================================== */

body {
	font-family: var(--font-primary);
	font-size: var(--font-body-size);
	line-height: var(--font-body-line-height);
	font-weight: var(--font-body-weight);
	color: var(--color-text);
	background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading) !important;
	margin-top: 0;
}

h1 {
	font-family: var(--font-heading);
	font-size: var(--font-h1-size);
	line-height: var(--font-h1-line-height);
	font-weight: var(--font-h1-weight);
	letter-spacing: var(--font-h1-letter-spacing);
	text-align: center;
	text-transform: uppercase;
	margin-bottom: var(--spacing-m);
}

h2 {
	font-family: var(--font-heading);
	font-size: var(--font-h2-size);
	line-height: var(--font-h2-line-height);
	font-weight: var(--font-h2-weight);
	letter-spacing: var(--font-h2-letter-spacing);
	margin-bottom: var(--spacing-m);
}

h2.sub {
	background: var(--color-background);
	text-transform: uppercase;
}

h3 {
	font-size: var(--font-h3-size);
	line-height: var(--font-h3-line-height);
	letter-spacing: var(--font-h3-letter-spacing);
	margin-bottom: var(--spacing-s);
}

h4 {
	font-size: var(--font-h4-size);
	line-height: var(--font-h4-line-height);
	font-weight: var(--font-h4-weight);
	margin-bottom: var(--spacing-s);
}

h5 {
	font-size: var(--font-h5-size);
	line-height: var(--font-h5-line-height);
	font-weight: var(--font-h5-weight);
	margin-bottom: var(--spacing-s);
}

h6 {
	font-size: var(--font-h6-size);
	line-height: var(--font-h6-line-height);
	font-weight: var(--font-h6-weight);
	margin-bottom: var(--spacing-s);
}

p,
text {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: var(--font-body-size);
	line-height: var(--font-body-line-height);
	margin-bottom: var(--spacing-s) !important;
}

small {
	font-size: var(--font-small-size);
	line-height: var(--font-small-line-height);
}


/* ============================================
   CONTAINER & LAYOUT
   ========================================== */

/* Standard Container-Breiten */
.wp-block-group.has-global-padding {
	max-width: var(--container-width);
	padding-left: var(--spacing-m);
	padding-right: var(--spacing-m);
}

/* Schmale Container */
.wp-block-group.is-layout-constrained.narrow-container {
	max-width: var(--container-width-narrow);
}

/* Breite Container */
.wp-block-group.is-layout-constrained.wide-container {
	max-width: var(--container-width-wide);
}

/* Section-Abstände */
.wp-block-group {
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-xl);
}

.wp-block-group.section-spacing-large {
	padding-top: var(--spacing-xxl);
	padding-bottom: var(--spacing-xxl);
}

.wp-block-group.section-spacing-small {
	padding-top: var(--spacing-l);
	padding-bottom: var(--spacing-l);
}

/* Abstände zwischen Sections */
.wp-block-group + .wp-block-group {
	margin-top: 0; /* Verhindert doppelte Abstände */
}


/* ============================================
   BUTTONS - Nutzt Tokens
   ========================================== */

.wp-block-button__link,
.ast-button,
button,
input[type="submit"] {
	padding: var(--button-padding-y) var(--button-padding-x);
	border-radius: var(--button-border-radius);
	font-size: var(--button-font-size);
	font-weight: 500 !important;
	text-transform: uppercase !important;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

/* Primary Button */
.wp-block-button.is-style-fill .wp-block-button__link,
.ast-button,
button.primary,
input[type="submit"] {
	background-color: var(--color-primary);
	color: #ffffff;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.ast-button:hover,
button.primary:hover,
input[type="submit"]:hover {
	background-color: var(--color-primary-hover);
}

/* Secondary Button */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--color-primary);
	color: #ffffff;
}


/* ============================================
   LINKS
   ========================================== */

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--color-primary-hover);
}

/* Links in Fließtext */
.entry-content a {
	text-decoration: underline;
}

.entry-content a:hover {
	text-decoration: none;
}


/* ============================================
   BILDER & MEDIEN
   ========================================== */

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

figure {
	margin: 0 0 var(--spacing-m) 0;
}

figcaption {
	font-size: var(--font-small-size);
	color: var(--color-text-light);
	margin-top: var(--spacing-xs);
}

/* WordPress Image Blocks */
.wp-block-image {
	margin-bottom: var(--spacing-m);
}

.wp-block-image.is-style-rounded img {
	border-radius: var(--border-radius-lg);
}


/* ============================================
   CARDS & BOXES
   ========================================== */

.card,
.box {
	background: var(--color-background);
	border-radius: var(--border-radius-md);
	padding: var(--spacing-l);
	box-shadow: var(--shadow-md);
	transition: box-shadow 0.3s ease;
}

.card:hover,
.box:hover {
	box-shadow: var(--shadow-lg);
}


/* ============================================
   FORMULARE - Barrierefreiheit
   ========================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: var(--spacing-s);
	border: 1px solid var(--color-text-muted);
	border-radius: var(--border-radius-sm);
	font-size: var(--font-body-size);
	line-height: var(--font-body-line-height);
	transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-color: var(--color-primary);
}

label {
	display: block;
	margin-bottom: var(--spacing-xs);
	font-weight: 600;
	color: var(--color-text);
}

/* Pflichtfeld-Markierung */
.required {
	color: var(--color-error);
}


/* ============================================
   BARRIEREFREIHEIT - Skip Links
   ========================================== */

.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--color-primary);
	color: #ffffff;
	padding: var(--spacing-s);
	text-decoration: none;
	z-index: 100;
}

.skip-link:focus {
	top: 0;
}


/* ============================================
   SPECTRA PRO - Standard-Anpassungen
   ========================================== */

/* Spectra Container-Anpassungen */
.uagb-block-container {
	padding-left: var(--spacing-m);
	padding-right: var(--spacing-m);
}
.wp-block-uagb-container.strd-container{
	padding-top: var(--spacing-xl) !important;

}
/* Spectra/UAGB Buttons – für alle Buttons: kompakt, rot, font-weight, uppercase */
.uagb-button__wrapper .uagb-button__link {
	padding: var(--button-padding-y) var(--button-padding-x);
	border-radius: var(--button-border-radius);
	font-size: var(--button-font-size);
	font-weight: 500 !important;
	text-transform: uppercase !important;
}

.uagb-buttons-repeater.wp-block-button__link,
.uagb-buttons__wrap .uagb-buttons-repeater.wp-block-button__link {
	background-color: var(--color-primary) !important;
	color: #fff !important;
	padding: 0.5rem 1.25rem !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	min-height: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	border: none !important;
	transition: background-color 0.3s ease;
}
.uagb-buttons-repeater.wp-block-button__link:hover,
.uagb-buttons__wrap .uagb-buttons-repeater.wp-block-button__link:hover {
	background-color: var(--color-primary-hover) !important;
	color: #fff !important;
}
.uagb-button__wrapper {
	display: inline-block;
}
.uagb-buttons__wrap .uagb-button__link {
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
}


/* ============================================
   RESPONSIVE - Mobile Optimierungen
   ========================================== */

@media (max-width: 768px) {
	
	/* Kleinere Section-Abstände auf Mobile */
	.wp-block-group {
		padding-top: var(--spacing-l);
		padding-bottom: var(--spacing-l);
	}
	
	.wp-block-group.section-spacing-large {
		padding-top: var(--spacing-xl);
		padding-bottom: var(--spacing-xl);
	}
	
	/* Mobile Container Padding */
	.wp-block-group.has-global-padding {
		padding-left: var(--spacing-s);
		padding-right: var(--spacing-s);
	}
	
	/* Mobile Navigation (falls nötig) */
	.main-navigation {
		/* Deine Mobile-Nav-Styles */
	}
}


/* ============================================
   UTILITIES - Hilfklassen
   ========================================== */

/* Spacing Utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-s { margin-top: var(--spacing-s) !important; }
.mb-s { margin-bottom: var(--spacing-s) !important; }
.mt-m { margin-top: var(--spacing-m) !important; }
.mb-m { margin-bottom: var(--spacing-m) !important; }
.mt-l { margin-top: var(--spacing-l) !important; }
.mb-l { margin-bottom: var(--spacing-l) !important; }

/* Text Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Display Utilities */
.hidden { display: none !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }

/* Mobile-only / Desktop-only */
.mobile-only { display: none; }
.desktop-only { display: block; }

@media (max-width: 768px) {
	.mobile-only { display: block; }
	.desktop-only { display: none; }
}


/* ============================================
   PROJEKTSPEZIFISCHE ANPASSUNGEN
   ========================================== */

/* Hier kommen deine projektspezifischen Styles rein,
   die NICHT in jedem Projekt verwendet werden */

.main-header-menu .menu-link{
	text-transform: uppercase;
	border-bottom: 2px solid var(--color-text);
}
.ast-desktop .ast-below-header-bar .main-header-menu > .menu-item{
	margin-right:50px
}

.site-below-header-wrap .ast-builder-grid-row {
	grid-template-columns: 1fr !important;
}
.site-header-below-section-right {
	display: none !important;
}
.ast-builder-menu-1 {
	flex-grow: 1 !important;
	width: 100% !important;
}
.ast-main-header-bar-alignment {
	margin-left: 0 !important;
	width: 100% !important;
}
.main-navigation {
	width: 100% !important;
}
#ast-hf-menu-1 {
	width: 100% !important;
	justify-content: space-between !important;
}

/* Gleich langer Unterstrich + linksbündig mit 10px Abstand */
#ast-hf-menu-1 > li {
flex: 1 !important;
}
#ast-hf-menu-1 > li > a.menu-link {
width: 100% !important;
text-align: left !important;
padding-left: 10px !important;
padding-right: 10px !important;
}


/* Submenü: kein Umbrechen, Breite passt sich an */
ul.main-header-menu > li > ul.sub-menu {
width: auto !important;
min-width: 240px !important;
}
ul.main-header-menu > li > ul.sub-menu > li > a.menu-link {
white-space: nowrap !important;
width: auto !important;
}
.page-id-170 h2.uagb-heading-text,
.page-id-171 h2.uagb-heading-text{
	font-weight: 400;
	font-size: 56px;
	line-height: 140%;
	letter-spacing: 7%;
	text-align: center;
	text-transform: uppercase;
	margin-top:0px !important;
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}
.page-id-171 h2.uagb-heading-text{
	text-align: left;
}
.page-id-170 .wp-block-uagb-advanced-heading > p.uagb-desc-text,
.page-id-171 .wp-block-uagb-advanced-heading > p.uagb-desc-text {
	background-color: var(--color-background-light);
	display: inline-block;
	font-weight: 400;
	font-size: 52px;
	line-height: 140%;
	letter-spacing: 0%;
	padding:0 20px !important;
	opacity: 0.8 !important;
	margin-left:-10px !important;
}
.uagb-heading-text{
	padding:20px 0 !important;
}
.leistungsbox strong{
	text-transform: uppercase;
}
.spectra-image-gallery__media-thumbnail-caption.spectra-image-gallery__media-thumbnail-caption--bar-inside{
	font-family: Inter;
	font-weight: 600;
	text-align: left !important;
	font-size: 20px;
	line-height: 150%;
	letter-spacing: 0%;
	text-transform: uppercase;
	background-color: var(--color-background-light) !important;
}
.spectra-image-gallery{

}
.kt-blocks-accordion-title{
	font-size:30px !important;
	text-transform: none !important;
	line-height: 140% !important;
	font-weight: 300 !important;
	padding: 20px !important;
	color: var(--color-text) !important;
	font-family: var(--font-primary) !important;

}
.kt-accordion-id170_45f42f-46 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header {
    border-top: 0px solid #f2f2f2;
    border-right: 0px solid #f2f2f2;
    border-bottom: 1px solid var(--ast-global-color-2) !important;
    border-left: 0px solid #f2f2f2;
}
.site-header-focus-item.header-widget-area-inner a{
	color: var(--color-text) !important;
}

/* ============================================
   SERVICE-BOXEN – Custom HTML Block für WordPress
   Kopiere den <style>-Inhalt in: Customizer > Zusätzliches CSS
   Kopiere den HTML-Teil in einen Custom HTML Block (Spectra)
   ============================================ */

/* === VARIABLEN – hier Farben anpassen === */
.gf-service-grid {
	--gf-orange: #E8841A;
	--gf-orange-light: #FDF0E2;
	--gf-orange-border: #E8841A;
	--gf-red: #7A2830;
	--gf-red-light: #F5E8E9;
	--gf-red-border: #7A2830;
	--gf-text: #333333;
	--gf-text-light: #555555;
	--gf-white: #FFFFFF;
	--gf-icon-bg: #FBE8D4;
	--gf-icon-bg-red: #F0D5D7;
	--gf-radius: 6px;
  
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 960px;
	margin: 0 auto;
	padding: 20px 0;
	font-family: inherit; /* erbt von Astra */
  }
  
  /* === BOX BASIS === */
  .gf-service-box {
	background: var(--gf-white);
	border: 2px solid var(--gf-orange-border);
	border-radius: var(--gf-radius);
	padding: 32px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	transition: box-shadow 0.2s ease;
  }
  
  .gf-service-box:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
  
  /* Notdienst-Box: rote Border */
  .gf-service-box--notdienst {
	border-color: var(--gf-red-border);
	grid-column: 1 / -1;
	max-width: 460px;
	justify-self: center;
	width: 100%;
  }
  
  /* === ÜBERSCHRIFTEN === */
  .gf-service-box__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--gf-text);
	margin: 0;
	line-height: 1.3;
  }
  
  /* === ICON-KREIS === */
  .gf-service-box__icon {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
  }
  
  .gf-service-box__icon svg {
	width: 52px;
	height: 52px;
  }
  
  .gf-service-box--notdienst .gf-service-box__icon {
	
  }
  
  /* === BUTTONS === */
  .gf-service-box__btn {
	display: inline-block;
	padding: 10px 24px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
	transition: opacity 0.2s ease, transform 0.15s ease;
  }
  
  .gf-service-box__btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
	color: #000;
  }
  
  .gf-service-box__btn--orange {
	background: var(--gf-orange);
	color: var(--gf-white);
	text-decoration: none !important;
  }
  
  .gf-service-box__btn--red {
	background: var(--gf-red);
	color: var(--gf-white);
	text-decoration: none !important;
  }
  
  /* === BESCHREIBUNGSTEXT === */
  .gf-service-box__desc {
	font-size: 0.95rem;
	color: var(--gf-text-light);
	margin: 0;
	line-height: 1.5;
  }
  
  /* === INFO-TEXTE (Zeiten, Hinweise) === */
  .gf-service-box__info {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gf-text);
	margin: 4px 0 0;
	line-height: 1.5;
  }
  
  .gf-service-box__info--orange {
	color: var(--gf-orange);
	font-weight: 600;
  }
  
  .gf-service-box__info--white {
	color: var(--gf-white);
	font-weight: 400;
	font-size: 0.82rem;
  }
  
  /* Notdienst Infoblock */
  .gf-service-box__notdienst-info {
	background: var(--gf-red);
	color: var(--gf-white);
	padding: 14px 28px;
	border-radius: 4px;
	text-align: center;
	line-height: 1.6;
  }
  
  .gf-service-box__notdienst-info strong {
	display: block;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
  }
  
  /* === RESPONSIVE === */
  @media (max-width: 768px) {
	.gf-service-grid {
	  grid-template-columns: 1fr;
	  gap: 20px;
	  padding: 16px 0;
	}
  
	.gf-service-box--notdienst {
	  max-width: 100%;
	}
  
	.gf-service-box {
	  padding: 28px 20px;
	}
  }
  /* ============================================
   SERVICE-BOXEN – CSS für Spectra Pro Blöcke
   → Einfügen in: Design → Customizer → Zusätzliches CSS
   ============================================ */

/* === FARBEN ANPASSEN === */
:root {
	--gf-orange: #E8841A;
	--gf-orange-light: #FDF0E2;
	--gf-red: #7A2830;
	--gf-red-light: #F5E8E9;
	--gf-text: #333333;
	--gf-text-light: #555555;
  }
  
  /* ============================================
   SERVICE-BOXEN – CSS für Spectra Pro Blöcke
   → Einfügen in: Design → Customizer → Zusätzliches CSS
   ============================================ */

/* === FARBEN ANPASSEN === */
:root {
	--gf-orange: #E8841A;
	--gf-orange-light: #FDF0E2;
	--gf-red: #7A2830;
	--gf-red-light: #F5E8E9;
	--gf-text: #333333;
	--gf-text-light: #555555;
  }
  
  /* === ÄUSSERER CONTAINER === 
	 Klasse: gf-service-grid
	 → Spectra Container, Layout: Grid, 2 Spalten */
  .gf-service-grid {
	display: flex !important;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 960px;
	margin: 0 auto;
	justify-content: center;
  }
  
  /* === EINZELNE BOX === 
	 Klasse: gf-service-box
	 → Spectra Container, zentrierter Inhalt */
  .gf-service-box {
	border: 2px solid var(--gf-orange) !important;
	padding: 32px 28px !important;
	text-align: center;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 16px;
	flex: 1 1 calc(50% - 12px);
	min-width: 280px;
	transition: box-shadow 0.2s ease;
  }
  
  .gf-service-box:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
  
  /* === NOTDIENST-BOX ===
	 Klasse: gf-service-box gf-service-box--notdienst
	 → wie oben, aber rote Border + zentriert unten */
  .gf-service-box--notdienst {
	border-color: var(--gf-red) !important;
	flex-basis: 100%;
	max-width: 460px;
  }
  
  /* === ICON-BILD ===
	 Spectra Image Block – Größe ggf. anpassen */
  .gf-service-box .wp-block-uagb-image img,
  .gf-service-box .wp-block-image img {
	width: 100px;
	height: 100px;
	object-fit: contain;
  }
  
  /* === BUTTONS ===
	 Farbe/Hintergrund in Spectra einstellen.
	 CSS übernimmt nur Uppercase + Hover */
  .gf-service-box .wp-block-uagb-buttons-child a,
  .gf-service-box .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	font-size: 0.85rem;
	transition: opacity 0.2s ease, transform 0.15s ease;
  }
  
  .gf-service-box .wp-block-uagb-buttons-child a:hover,
  .gf-service-box .wp-block-button__link:hover {
	opacity: 0.88;
	transform: translateY(-1px);
  }
  
  /* === NOTDIENST INFO-BLOCK ===
	 Klasse: gf-service-box__notdienst-info
	 → Innerer Spectra Container mit rotem Hintergrund */
  .gf-service-box__notdienst-info {
	background: var(--gf-red) !important;
	color: #fff !important;
	padding: 14px 28px !important;
	text-align: center;
	width: 100%;
  }
  
  .gf-service-box__notdienst-info p {
	color: #fff !important;
	margin: 0 !important;
	line-height: 1.6;
  }
  
  .gf-service-box__notdienst-info strong {
	text-transform: uppercase;
	letter-spacing: 0.04em;
  }
  
  /* === HINWEIS-TEXT (orange, Box 2) ===
	 Klasse: gf-hinweis-orange
	 → dem Absatz-Block zuweisen */
  .gf-hinweis-orange {
	color: var(--gf-orange) !important;
	font-weight: 600;
	font-size: 0.85rem;
  }
  
  /* === ZEITEN-TEXT (fett, Box 2) ===
	 Klasse: gf-zeiten
	 → dem Absatz-Block zuweisen */
  .gf-zeiten {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
  }
  
  /* === RESPONSIVE === */
  @media (max-width: 768px) {
	.gf-service-grid {
	  flex-direction: column;
	  gap: 20px;
	}
  
	.gf-service-box--notdienst {
	  max-width: 100%;
	}
  
	.gf-service-box {
	  padding: 28px 20px !important;
	  flex-basis: 100%;
	}
  }

/* ============================================
   Header-Kontaktbereich: Responsive ab < 1214px
   Nur Icons anzeigen, Text als Tooltip
   ============================================ */
   @media (max-width: 1213px) {
	/* --- Text ausblenden --- */
	.uagb-block-50a43cac .top p.has-text-align-center {
	  position: absolute;
	  width: max-content !important;
	  max-width: 200px;
	  padding: 6px 12px;
	  border-radius: 4px;
	  background: #333;
	  color: #fff;
	  font-size: 14px;
	  line-height: 1.4;
	  text-align: center;
	  white-space: nowrap;
	  pointer-events: none;
	  opacity: 0;
	  visibility: hidden;
	  transition: opacity 0.2s ease, visibility 0.2s ease;
	  /* Tooltip unterhalb des Icons positionieren */
	  top: 100%;
	  left: 50%;
	  transform: translateX(-50%);
	  margin-top: 8px;
	  z-index: 9999;
	}
	/* Tooltip-Pfeil (kleines Dreieck oben) */
	.uagb-block-50a43cac .top p.has-text-align-center::before {
	  content: "";
	  position: absolute;
	  bottom: 100%;
	  left: 50%;
	  transform: translateX(-50%);
	  border: 6px solid transparent;
	  border-bottom-color: #333;
	}
	/* Tooltip-Text Farbe für Links überschreiben */
	.uagb-block-50a43cac .top p.has-text-align-center a {
	  color: #fff;
	  text-decoration: none;
	}
	/* --- Tooltip einblenden bei Hover und Focus --- */
	.uagb-block-50a43cac .top:hover p.has-text-align-center,
	.uagb-block-50a43cac .top:focus-within p.has-text-align-center {
	  opacity: 1 !important;
	  visibility: visible !important;
	  pointer-events: auto !important;
	}
	.uagb-block-50a43cac .top:active p.has-text-align-center {
	  opacity: 1 !important;
	  visibility: visible !important;
	  pointer-events: auto !important;
	}
	/* Tooltips für Telefon und E-Mail deaktivieren */
.uagb-block-50a43cac .top-1 p.has-text-align-center,
.uagb-block-50a43cac .top-3 p.has-text-align-center {
  display: none !important;
}
	/* --- Jedes .top-Element als Positionsanker --- */
	.uagb-block-50a43cac .top {
	  position: relative;
	  cursor: pointer;
	}
	/* --- Icons in einer Reihe, kompakt --- */
	.uagb-block-50a43cac > .uagb-container-inner-blocks-wrap {
	  flex-direction: row !important;
	  align-items: center;
	  gap: 16px;
	}
	/* --- Icon-Größe beibehalten --- */
	.uagb-block-50a43cac .top .wp-block-uagb-image img {
	  width: 28px;
	  height: auto;
	}
	 /* === NEU: Icons zusammenrücken === */
  /* Gap reduzieren, da kein Text mehr sichtbar */
  .uagb-block-50a43cac > .uagb-container-inner-blocks-wrap {
    gap: 16px !important;
    justify-content: flex-end;
  }
  /* Jeder .top-Block: Breite auf auto, 
     damit er nur so breit wie das Icon ist */
  .uagb-block-50a43cac .top {
    width: auto !important;
    min-width: unset !important;
    flex: none !important;
  }
    /* Tooltip bei Tap (active) auf Touch-Geräten */
.uagb-block-50a43cac .top:active p.has-text-align-center {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
  }
  }
  @media (max-width: 1024px) {
	#masthead {
	  position: relative !important;
	}
	/* Topbar aus dem Flow nehmen */
	.ast-above-header-wrap {
	  position: absolute !important;
	  top: 0px !important;
	  right: 0px !important;
	  left: auto !important;
	  width: auto !important;
	  height: auto !important;
	  z-index: 100 !important;
	  background: transparent !important;
	  padding: 0 !important;
	  margin: 0 !important;
	}
	.ast-above-header-bar {
	  padding: 0 !important;
	  min-height: unset !important;
	  height: auto !important;
	  background: transparent !important;
	  border: none !important;
	}
	.ast-above-header-bar .ast-builder-grid-row {
	  display: flex !important;
	  grid-template-columns: unset !important;
	  grid-template-rows: unset !important;
	  min-height: unset !important;
	  height: auto !important;
	}
	.ast-above-header-bar .site-header-above-section-left {
	  display: none !important;
	}
	.ast-above-header-bar .site-header-above-section-right {
	  width: auto !important;
	  flex: none !important;
	}
	.ast-above-header-bar .site-header-above-section-right > aside,
	.ast-above-header-bar .site-header-above-section-right > aside > section {
	  width: auto !important;
	  padding: 0 !important;
	  margin: 0 !important;
	}
	/* 3 Icon-Blöcke nebeneinander */
	.uagb-block-50a43cac {
	  gap: 6px !important;
	  flex-direction: row !important;
	  align-items: center !important;
	  padding: 0 !important;
	}
	/* Jeder Icon-Block: runder Button */
	.uagb-block-66152b85 {
	  flex-direction: row !important;
	  align-items: center !important;
	  gap: 0 !important;
	  padding: 6px !important;
	  border-radius: 50% !important;
	  background: rgba(0,0,0,0.05) !important;
	  transition: background 0.2s !important;
	  width: auto !important;
	  min-width: unset !important;
	}
	.uagb-block-66152b85:hover,
	.uagb-block-66152b85:active {
	  background: rgba(0,0,0,0.12) !important;
	}
	/* Icons: 22px */
	.uagb-block-66152b85 .wp-block-uagb-image {
	  width: 22px !important;
	  min-width: 22px !important;
	  height: 22px !important;
	}
	.uagb-block-66152b85 .wp-block-uagb-image img {
	  width: 22px !important;
	  height: 22px !important;
	}
	/* Text ausblenden */
	.uagb-block-66152b85 > p {
			position: absolute !important;
			opacity: 0 !important;
			visibility: hidden !important;
			pointer-events: none !important;
		
	}
  }
  /* ============================================ */
/* TABLET (768px - 1024px): Icons absolut        */
/* ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
	#masthead {
	  position: relative !important;
	}
	.ast-above-header-wrap {
	  position: absolute !important;
	  top: 8px !important;
	  right: 68px !important;
	  left: auto !important;
	  width: auto !important;
	  height: auto !important;
	  z-index: 100 !important;
	  background: transparent !important;
	  padding: 0 !important;
	  margin: 0 !important;
	}
	.ast-above-header-bar {
	  padding: 0 !important;
	  min-height: unset !important;
	  height: auto !important;
	  background: transparent !important;
	  border: none !important;
	}
	.ast-above-header-bar .ast-builder-grid-row {
	  display: flex !important;
	  grid-template-columns: unset !important;
	  grid-template-rows: unset !important;
	  min-height: unset !important;
	  height: auto !important;
	}
	.ast-above-header-bar .site-header-above-section-left {
	  display: none !important;
	}
	.ast-above-header-bar .site-header-above-section-right {
	  width: auto !important;
	  flex: none !important;
	}
	.ast-above-header-bar .site-header-above-section-right > aside,
	.ast-above-header-bar .site-header-above-section-right > aside > section {
	  width: auto !important;
	  padding: 0 !important;
	  margin: 0 !important;
	}
	.uagb-block-50a43cac {
	  gap: 6px !important;
	  flex-direction: row !important;
	  align-items: center !important;
	  padding: 0 !important;
	}
	.uagb-block-66152b85 {
	  flex-direction: row !important;
	  align-items: center !important;
	  gap: 0 !important;
	  padding: 6px !important;
	  border-radius: 50% !important;
	  background: rgba(0,0,0,0.05) !important;
	  transition: background 0.2s !important;
	  width: auto !important;
	  min-width: unset !important;
	}
	.uagb-block-66152b85:hover,
	.uagb-block-66152b85:active {
	  background: rgba(0,0,0,0.12) !important;
	}
	.uagb-block-66152b85 .wp-block-uagb-image {
	  width: 22px !important;
	  min-width: 22px !important;
	  height: 22px !important;
	}
	.uagb-block-66152b85 .wp-block-uagb-image img {
	  width: 22px !important;
	  height: 22px !important;
	}
	.uagb-block-66152b85 > p {
		position: absolute !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
  }
  /* ============================================ */
  /* HANDY (< 768px): Kompakter Icon-Balken        */
  /* ============================================ */
  @media (max-width: 767px) {
	.ast-above-header-wrap {
	  position: relative !important;
	  width: 100% !important;
	}
	.ast-above-header-bar {
	  padding: 6px 20px !important;
	  min-height: unset !important;
	  height: auto !important;
	  background-color: var(--ast-global-color-5, #f8f8f8) !important;
	  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
	}
	.ast-above-header-bar .ast-builder-grid-row {
	  display: flex !important;
	  grid-template-columns: unset !important;
	  grid-template-rows: unset !important;
	  min-height: unset !important;
	  height: auto !important;
	  justify-content: center !important;
	}
	.ast-above-header-bar .site-header-above-section-left {
	  display: none !important;
	}
	.ast-above-header-bar .site-header-above-section-right {
	  width: auto !important;
	  flex: none !important;
	}
	.ast-above-header-bar .site-header-above-section-right > aside,
	.ast-above-header-bar .site-header-above-section-right > aside > section {
	  width: auto !important;
	  padding: 0 !important;
	  margin: 0 !important;
	}
	.uagb-block-50a43cac {
	  gap: 16px !important;
	  flex-direction: row !important;
	  flex-wrap: nowrap !important;
	  align-items: center !important;
	  justify-content: center !important;
	  padding: 0 !important;
	  width: auto !important;
	}
	.uagb-block-50a43cac > .uagb-container-inner-blocks-wrap {
	  display: flex !important;
	  flex-direction: row !important;
	  flex-wrap: nowrap !important;
	  gap: 16px !important;
	  align-items: center !important;
	  justify-content: center !important;
	}
	.uagb-block-66152b85 {
	  flex-direction: row !important;
	  align-items: center !important;
	  gap: 0 !important;
	  padding: 8px !important;
	  border-radius: 50% !important;
	  background: rgba(0,0,0,0.06) !important;
	  width: auto !important;
	  min-width: unset !important;
	  flex: none !important;
	  transition: background 0.2s !important;
	}
	.uagb-block-66152b85:active {
	  background: rgba(0,0,0,0.15) !important;
	}
	.uagb-block-66152b85 .wp-block-uagb-image {
	  width: 24px !important;
	  min-width: 24px !important;
	  height: 24px !important;
	}
	.uagb-block-66152b85 .wp-block-uagb-image img {
	  width: 24px !important;
	  height: 24px !important;
	}
	.uagb-block-66152b85 > p {
		position: absolute !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
  }