/* ---------- Schriften (bisher eigene Datei fonts.css; jetzt hier, damit alle Seiten nur eine CSS-Datei laden, Anweisung Abschnitt 2) ---------- */
/* Schriften, selbst gehostet (Dateien liegen wie heute unter /wp-content/fonts und /wp-content/uploads/themepunch/gfonts).
   Es werden nur die Schnitte geladen, die die Live-Seite heute wirklich nutzt. */

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url('/wp-content/fonts/roboto-v32-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/fonts/roboto-v32-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: url('/wp-content/fonts/roboto-v32-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/fonts/roboto-v32-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/fonts/roboto-v32-latin-700.woff2') format('woff2'); }

@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 300; font-display: swap; src: url('/wp-content/fonts/roboto-slab-v34-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/fonts/roboto-slab-v34-latin-600.woff2') format('woff2'); }

/* Schriftzug im Header und Hero (Manrope, wie heute aus dem Slider-Revolution-Ordner) */
@font-face { font-family: 'SSManrope'; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'SSManrope'; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/themepunch/gfonts/manrope/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk7PFO_F.ttf') format('truetype'); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-1FFF, U+2070-2073, U+2075-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }
@font-face { font-family: 'SSManrope'; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'SSManrope'; font-weight: 600; font-display: swap; src: url('/wp-content/uploads/themepunch/gfonts/manrope/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE-_F.ttf') format('truetype'); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-1FFF, U+2070-2073, U+2075-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }
@font-face { font-family: 'SSManrope'; font-weight: 700; font-display: swap; src: url('../fonts/manrope-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'SSManrope'; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/themepunch/gfonts/manrope/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4aE-_F.ttf') format('truetype'); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-1FFF, U+2070-2073, U+2075-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }

/* Hero-Schrift Startseite (Staatliches) */
@font-face { font-family: 'SSStaat'; font-weight: 400; font-display: swap; src: url('../fonts/staatliches-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'SSStaat'; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/themepunch/gfonts/staatliches/HI_OiY8KO6hCsQSoAPmtMbec.ttf') format('truetype'); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-1FFF, U+2070-2073, U+2075-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }

/* =========================================================================
   Theme sebastianschueler, Grundgerüst: Basis, Kopfzeile, Sticky-Leiste, Handy-Menü,
   Footer, schwebende Buttons, Zurück-nach-oben. Werte 1:1 aus der Live-Vermessung (30.09.2026).
   ========================================================================= */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: Roboto, Arial, sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: #000;
	background: #fff;
	overflow-x: hidden;
	box-sizing: content-box;
	min-height: 100vh; /* GT3: Seite mindestens so hoch wie das Fenster, am Handy plus Platz für die Kontaktleiste */
}
body.ss-menue-offen { overflow: hidden; }
img { max-width: 100%; height: auto; vertical-align: top; border: 0; }
p { margin: 0 0 18px; padding: 0; }
ul, ol { margin: 5px 0 18px; padding: 0; }
blockquote { margin: 0 0 1em; padding: 0; font-size: 24px; line-height: 34px; }
a { color: inherit; text-decoration: none; }
.site_wrapper a:hover, footer a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: Roboto, Arial, sans-serif; font-weight: 700; color: #181b31; margin: 0; padding: 0; word-wrap: break-word; }
h1 { font-size: 70px; line-height: 70px; letter-spacing: -.02em; }
h2 { font-size: 40px; line-height: 50px; letter-spacing: -.012em; }
h3 { font-size: 30px; line-height: 40px; }
h4 { font-size: 24px; line-height: 33px; }
h5 { font-size: 20px; line-height: 30px; }
h6 { font-size: 18px; line-height: 24px; }
@media (max-width: 1024px) {
	h1 { font-size: 50px; line-height: 1.12; }
	h2 { font-size: 34px; line-height: 1.25; }
}
@media (max-width: 767px) {
	h1 { font-size: 34px; line-height: 1.15; }
	h2 { font-size: 28px; line-height: 1.25; }
	h3 { font-size: 24px; line-height: 1.3; }
	h4 { font-size: 21px; line-height: 1.35; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }
.ss-skip { position: absolute; left: -9999px; top: 0; z-index: 100001; background: #fff; color: #000; padding: 8px 14px; }
.ss-skip:focus { left: 8px; top: 8px; }
.ss-inhalt { max-width: 1170px; margin: 0 auto; padding: 60px 30px; }
.ss-inhalt--schmal { max-width: 800px; }
.ss-404__code { font-size: 80px; line-height: 1; font-weight: 700; color: #181b31; margin: 0 0 10px; }
.ss-suche { display: flex; gap: 8px; margin: 20px 0; }
.ss-suche input { flex: 1; font: inherit; padding: 10px 14px; border: 1px solid rgba(24, 27, 49, .28); border-radius: 2px; }
.ss-suche button { font: inherit; text-transform: uppercase; letter-spacing: .4px; padding: 0 22px; border: 1px solid rgba(24, 27, 49, .28); border-radius: 2px; background: transparent; cursor: pointer; }
.ss-suche button:hover { border-color: #181b31; }

/* Portfolio-Einzelseiten: dunkler Seitenhintergrund, weißer Text, Abstand unter der Kopfzeile (wie heute: GT3-Seitenoption und Basic-CSS) */
body.single-portfolio { background: #191a1c; }
body.single-portfolio .main_wrapper h1, body.single-portfolio .main_wrapper h2, body.single-portfolio .main_wrapper p,
body.single-portfolio .main_wrapper li, body.single-portfolio .main_wrapper a, body.single-portfolio .main_wrapper span { color: #fff; }
.single-portfolio .main_wrapper { padding-top: 110px; }
@media only screen and (max-width: 1024px) { .single-portfolio .main_wrapper { padding-top: 80px; } }
@media only screen and (max-width: 640px) { .single-portfolio .main_wrapper { padding-top: 40px; } }
.main_wrapper { display: block; }

/* ---------- Kopfzeile (Desktop) ---------- */
.ss-header { position: relative; z-index: 1000; font-size: 18px; line-height: 27px; }
.ss-header__bar { position: relative; background: #fff; color: #232325; }
.ss-header__inner { position: relative; height: 100px; display: flex; align-items: center; justify-content: center; }

/* Schriftzug */
.ss-brand {
	position: absolute; left: max(40px, calc(50% - 760px)); top: 50%; transform: translateY(-50%);
	font-family: "SSManrope", Manrope, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.4px; line-height: 1;
	color: #000; text-decoration: none !important; white-space: nowrap; z-index: 5; transition: opacity .2s;
}
.ss-brand:hover, .ss-brand:focus { opacity: .7; text-decoration: none !important; }
.ss-brand:active { opacity: .5; }

/* Menü */
.main-menu { position: static; font-weight: 500; text-align: center; }
.main-menu ul.menu { position: static; list-style: none; margin: 0 -12px; padding: 0; font-size: 17px; line-height: 30px; font-weight: 400; text-transform: uppercase; }
.main-menu ul.menu::after { content: ""; display: table; clear: both; }
.main-menu > ul > li { position: relative; display: inline-block; float: left; vertical-align: middle; margin: 0 19px; padding: 0; z-index: 1; }
@media (min-width: 1025px) and (max-width: 1300px) { .main-menu > ul > li:not(.ss-cta) { margin: 0 6px; } } /* GT3: engere Abstände bis 1300 px */
@media (min-width: 1025px) and (max-width: 1249px) { .main-menu > ul > li:not(.ss-cta) > a { padding: 0 7px; } }
.main-menu > ul > li > a { position: relative; display: block; margin: 0; padding: 0 1px; color: inherit; z-index: 1; transition: all 200ms; }
.main-menu > ul > li > a:active { opacity: .55; }
.main-menu > ul > li > a > span { position: static; display: inline; } /* wie GT3: Unterstrich bezieht sich auf den ganzen Link inkl. Pfeil */
.main-menu > ul > li > a > span::before,
.main-menu ul.sub-menu li a > span::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; border-top: 1px solid; opacity: 0; transition: opacity 200ms; }
.main-menu > ul > li > a:hover > span::before,
.main-menu > ul > li.current-menu-ancestor > a > span::before,
.main-menu > ul > li.current-menu-parent > a > span::before,
.main-menu ul.sub-menu li a:hover > span::before { opacity: .5; }
.main-menu > ul > li.current-menu-item > a > span::before { display: none; }
/* Pfeil bei Punkten mit Untermenü (heute FontAwesome "angle-down", hier als Linie gezeichnet) */
.main-menu > ul > li.menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 6px; vertical-align: middle;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg);
}
/* Untermenü */
.main-menu ul.sub-menu {
	position: absolute; left: 0; top: 30px; z-index: 555; width: 230px; margin: 0; padding: 15px 0; list-style: none; text-align: left;
	background: rgb(222, 231, 232); box-shadow: 0 0 20px rgba(31, 36, 39, .15);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .22s ease-out, transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s;
}
.main-menu > ul > li:hover > ul.sub-menu,
.main-menu > ul > li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s, 0s, 0s; }
.main-menu ul.sub-menu li { display: block; float: none; margin: 0; padding: 8px 15px; position: relative; }
.main-menu ul.sub-menu li a { display: block; width: 100%; font-size: 16px; line-height: 22px; font-weight: 400; color: #000; transition: all 200ms; }
.main-menu ul.sub-menu li a > span { position: relative; }

/* "Jetzt buchen" rechts als Button */
.main-menu > ul > li.ss-cta { position: absolute; right: max(40px, calc(50% - 760px)); top: 50%; transform: translateY(-50%); margin: 0; height: auto; display: flex; align-items: center; }
.main-menu > ul > li.ss-cta > a {
	display: inline-flex; align-items: center; border: 1px solid rgba(24, 27, 49, .28); border-radius: 2px;
	padding: 0 14px; line-height: 30px; height: auto; margin-left: 6px; letter-spacing: .4px;
	transition: border-color .2s, background-color .2s, color .2s, transform .1s ease-out;
}
.main-menu > ul > li.ss-cta > a:hover { border-color: #181b31; background: transparent; color: #181b31; }
.main-menu > ul > li.ss-cta > a:active { transform: scale(.97); opacity: 1; }
.main-menu > ul > li.ss-cta > a > span::before { display: none; }

/* Sticky-Leiste (nur Desktop) */
.sticky_header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
	background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid rgba(0, 0, 0, .08); color: rgb(34, 35, 40);
	transform: translateY(-100%); opacity: 0; pointer-events: none; transition: all .3s ease;
}
.sticky_header.sticky_on { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticky_header .ss-header__inner { height: 58px; }
.sticky_header .ss-brand { font-size: 19px; }
.admin-bar .sticky_header { top: 32px; }
@media (prefers-reduced-transparency: reduce) {
	.sticky_header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
	.main-menu ul.sub-menu { transform: none; transition: opacity .15s; }
	.sticky_header { transition: none; }
}

/* Hamburger (Desktop verborgen) */
.mobile-navigation-toggle { display: none; width: 40px; height: 48px; margin: 0 13px 0 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: center; line-height: 40px; }
.toggle-box { position: relative; display: inline-block; width: 25px; height: 24px; vertical-align: middle; }
.toggle-inner { position: absolute; top: 50%; left: 0; display: block; width: 25px; height: 0; margin-top: -1px; border-top: 2px solid; transition: transform .1s cubic-bezier(.55, .055, .675, .19); }
.toggle-inner::before, .toggle-inner::after { content: ""; position: absolute; left: 0; display: block; width: 25px; height: 0; border-top: 2px solid; }
.toggle-inner::before { top: -9px; transition: top .1s .14s ease, opacity .1s ease; }
.toggle-inner::after { bottom: -7px; transition: bottom .1s .14s ease, transform .1s cubic-bezier(.55, .055, .675, .19); }
.mobile-navigation-toggle.is-active .toggle-inner { transform: rotate(45deg); transition-delay: .14s; transition-timing-function: cubic-bezier(.215, .61, .355, 1); }
.mobile-navigation-toggle.is-active .toggle-inner::before { top: 0; opacity: 0; transition: top .1s ease, opacity .1s .14s ease; }
.mobile-navigation-toggle.is-active .toggle-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom .1s ease, transform .1s .14s cubic-bezier(.215, .61, .355, 1); }

/* Handy-Menü (Desktop verborgen) */
.mobile_menu_container { display: none; background: rgb(222, 231, 232); color: #000; overflow: hidden; }

/* ---------- Kopfzeile: Varianten (Desktop) ---------- */
/* Startseite: Kopfzeile oben unsichtbar (der Hero trägt den Namen), nur die Sticky-Leiste erscheint */
.ss-h-home .ss-header { position: absolute; top: 0; left: 0; right: 0; }
.ss-h-home .ss-header__bar { visibility: hidden; pointer-events: none; }
/* /buchen/: Kopfzeile transparent über dem Hero, weiß, Sticky-Leiste dunkel */
.ss-h-buchen .ss-header { position: absolute; top: 0; left: 0; right: 0; }
.ss-h-buchen .ss-header__bar { background: transparent; }
.ss-h-buchen .sticky_header { background: rgba(9, 9, 9, .78); border-bottom-color: rgba(255, 255, 255, .08); }
/* Business-Portraits-Übersicht: dunkel #090909 */
.ss-h-dunkel09 .ss-header__bar { background: #090909; }
.ss-h-dunkel09 .sticky_header { background: rgba(9, 9, 9, .78); border-bottom-color: rgba(255, 255, 255, .08); }
/* Portfolio-Einzelseiten: dunkel #191a1c */
.ss-h-dunkel19 .ss-header__bar { background: #191a1c; }
.ss-h-dunkel19 .sticky_header { background: rgba(25, 26, 28, .82); border-bottom-color: rgba(255, 255, 255, .08); }
/* Gemeinsam für alle dunklen Varianten: Menü, Schriftzug und Button weiß, Untermenü dunkel */
.ss-h-buchen .ss-header__bar, .ss-h-dunkel09 .ss-header__bar, .ss-h-dunkel19 .ss-header__bar,
.ss-h-buchen .sticky_header, .ss-h-dunkel09 .sticky_header, .ss-h-dunkel19 .sticky_header { color: #fff; }
.ss-h-buchen .ss-brand, .ss-h-dunkel09 .ss-brand, .ss-h-dunkel19 .ss-brand { color: #fff; }
.ss-h-buchen .main-menu > ul > li.ss-cta > a, .ss-h-dunkel09 .main-menu > ul > li.ss-cta > a, .ss-h-dunkel19 .main-menu > ul > li.ss-cta > a { border-color: rgba(255, 255, 255, .55); color: #fff; }
.ss-h-buchen .main-menu > ul > li.ss-cta > a:hover, .ss-h-dunkel09 .main-menu > ul > li.ss-cta > a:hover, .ss-h-dunkel19 .main-menu > ul > li.ss-cta > a:hover { background: #fff; color: #000; border-color: #fff; }
.ss-h-buchen .main-menu ul.sub-menu, .ss-h-dunkel09 .main-menu ul.sub-menu, .ss-h-dunkel19 .main-menu ul.sub-menu { background: #111; border: 1px solid rgba(255, 255, 255, .08); }
.ss-h-buchen .main-menu ul.sub-menu li a, .ss-h-dunkel09 .main-menu ul.sub-menu li a, .ss-h-dunkel19 .main-menu ul.sub-menu li a { color: #fff; }
.ss-h-buchen .main-menu ul.sub-menu li a:hover, .ss-h-dunkel09 .main-menu ul.sub-menu li a:hover, .ss-h-dunkel19 .main-menu ul.sub-menu li a:hover { color: #9a9a9a; }
@media (prefers-reduced-transparency: reduce) {
	.ss-h-buchen .sticky_header, .ss-h-dunkel09 .sticky_header, .ss-h-dunkel19 .sticky_header { background: #111; }
}
/* Startseite: Schriftzug nur in der Sticky-Leiste */
.ss-h-home .ss-header__bar .ss-brand { display: none; }

/* ---------- Tablet und Handy (bis 1024 px) ---------- */
@media (max-width: 1024px) {
	.ss-header__inner { height: 48px; padding: 0 15px; justify-content: flex-end; }
	.ss-header__bar { background: rgb(222, 231, 232); color: #232325; }
	.ss-brand { left: 16px; font-size: 18px; color: #000; }
	.ss-header__bar .main-menu { display: none; }
	.sticky_header { display: none; }
	.mobile-navigation-toggle { display: inline-block; }
	.mobile_menu_container { display: block; }
	.mobile_menu_container[hidden] { display: none; }
	.mobile_menu_container .fullwidth-wrapper { padding: 0 30px; }
	.mobile_menu_container .main-menu { display: block; margin: 0 10px; padding: 0 3px; text-align: left; position: relative; }
	.mobile_menu_container ul.menu { position: relative; width: 100%; margin: 0; padding: 20px 0; line-height: 24px; }
	.mobile_menu_container ul.menu::after { display: none; }
	.mobile_menu_container .main-menu > ul > li { display: block; float: none; margin: 0; padding: 0; height: auto; position: relative; }
	.mobile_menu_container .main-menu > ul > li > a { display: block; width: 100%; padding: 10px 0; color: #000; }
	.mobile_menu_container .main-menu > ul > li > a > span::before { display: none; }
	.mobile_menu_container .main-menu > ul > li.menu-item-has-children > a::after { display: none; }
	.mobile_menu_container .main-menu > ul > li > a:active { opacity: 1; }
	.mobile_menu_container .mobile_switcher { position: absolute; z-index: 1; top: 4px; right: 0; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
	.mobile_menu_container .mobile_switcher::before { content: ""; position: absolute; right: 18px; bottom: calc(50% - 4px); width: 8px; height: 8px; border-top: 1px solid #000; border-left: 1px solid #000; opacity: .7; transform: rotate(135deg); transition: transform .2s; }
	/* Pfeil bleibt wie heute beim Aufklappen unverändert */
	.mobile_menu_container ul.sub-menu { display: none; position: relative; left: 0; top: 0; width: 100%; margin: 0; padding: 0 0 0 15px; opacity: 1; visibility: visible; transform: translateY(6px); transition: none; background: transparent; box-shadow: none; border: 0; } /* 6 px tiefer wie heute (GT3) */
	.mobile_menu_container ul.sub-menu.showsub { display: block; }
	/* Höhere Spezifität als die Plugin-Regel ".main-menu ul li ul .menu-item" und die dunklen Varianten (Untermenü im Handy-Menü immer schwarz auf hell) */
	.mobile_menu_container .main-menu ul.sub-menu li.menu-item { padding: 0; }
	.ss-header .mobile_menu_container .main-menu ul.sub-menu li a { padding: 10px 0; color: #000; }
	.ss-header .mobile_menu_container .main-menu ul.sub-menu { background: transparent; border: 0; }
	.mobile_menu_container ul.sub-menu li a > span::before { display: none; }
	.mobile_menu_container .main-menu > ul > li.ss-cta { position: relative; right: auto; top: auto; transform: none; display: block; margin-top: 14px; }
	.mobile_menu_container .main-menu > ul > li.ss-cta > a { display: inline-block; width: auto; max-width: 100%; margin-left: 0; padding: 0 22px; line-height: 42px; border-color: rgba(24, 27, 49, .28); color: #000; }
	.mobile_menu_container .main-menu > ul > li.ss-cta > a:hover { border-color: #181b31; color: #181b31; background: transparent; }
	/* Varianten */
	.ss-h-home .ss-header { position: absolute; top: 18px; left: 0; right: 0; z-index: 50; }
	.ss-h-home .ss-header__bar { background: transparent; color: #fff; visibility: visible; pointer-events: auto; }
	.ss-h-home .ss-header__bar .ss-brand { display: none; }
	.ss-h-buchen .ss-header { position: relative; top: auto; }
	.ss-h-buchen .ss-header__bar, .ss-h-dunkel09 .ss-header__bar { background: #090909; color: #fff; }
	.ss-h-dunkel19 .ss-header__bar { background: #191a1c; color: #fff; }
	.ss-h-buchen .ss-brand, .ss-h-dunkel09 .ss-brand, .ss-h-dunkel19 .ss-brand { color: #fff; }
	/* Menü-Container (immer hell) */
	.ss-h-buchen .mobile_menu_container, .ss-h-dunkel09 .mobile_menu_container, .ss-h-dunkel19 .mobile_menu_container, .ss-h-home .mobile_menu_container { color: #000; }
	.ss-h-home .mobile_menu_container { position: absolute; left: 0; right: 0; top: 48px; }
}

/* 1025 - 1199 px (Entscheidung Sebastian 01.10.2026, Variante B): wie heute GT3 eine weiße 100-px-Leiste mit
   Menü-Knopf statt Desktop-Menü, Schriftzug aber immer lesbar (dunkel). Startseite unverändert wie heute. */
@media (min-width: 1025px) and (max-width: 1199px) {
	body:not(.ss-h-home) .ss-header__inner { height: 100px; padding: 0 30px; justify-content: flex-end; }
	body:not(.ss-h-home) .ss-header__bar { background: #fff; color: #232325; }
	body:not(.ss-h-home) .ss-header__bar .ss-brand { color: #232325; }
	body:not(.ss-h-home) .mobile_menu_container { color: #000; }
	body:not(.ss-h-home) .ss-header__bar .main-menu { display: none; }
	body:not(.ss-h-home) .sticky_header { display: none; }
	body:not(.ss-h-home) .mobile-navigation-toggle { display: inline-block; }
	body:not(.ss-h-home) .mobile_menu_container { display: block; }
	body:not(.ss-h-home) .mobile_menu_container[hidden] { display: none; }
	body:not(.ss-h-home) .mobile_menu_container .fullwidth-wrapper { padding: 0 30px; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu { display: block; margin: 0 10px; padding: 0 3px; text-align: left; position: relative; }
	body:not(.ss-h-home) .mobile_menu_container ul.menu { position: relative; width: 100%; margin: 0; padding: 20px 0; line-height: 24px; }
	body:not(.ss-h-home) .mobile_menu_container ul.menu::after { display: none; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu > ul > li { display: block; float: none; margin: 0; padding: 0; height: auto; position: relative; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu > ul > li > a { display: block; width: 100%; padding: 10px 0; color: #000; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu > ul > li > a > span::before { display: none; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu > ul > li.menu-item-has-children > a::after { display: none; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu > ul > li > a:active { opacity: 1; }
	body:not(.ss-h-home) .mobile_menu_container .mobile_switcher { position: absolute; z-index: 1; top: 4px; right: 0; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
	body:not(.ss-h-home) .mobile_menu_container .mobile_switcher::before { content: ""; position: absolute; right: 18px; bottom: calc(50% - 4px); width: 8px; height: 8px; border-top: 1px solid #000; border-left: 1px solid #000; opacity: .7; transform: rotate(135deg); transition: transform .2s; }
	body:not(.ss-h-home) .mobile_menu_container ul.sub-menu { display: none; position: relative; left: 0; top: 0; width: 100%; margin: 0; padding: 0 0 0 15px; opacity: 1; visibility: visible; transform: translateY(6px); transition: none; background: transparent; box-shadow: none; border: 0; }
	body:not(.ss-h-home) .mobile_menu_container ul.sub-menu.showsub { display: block; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu ul.sub-menu li.menu-item { padding: 0; }
	body:not(.ss-h-home) .ss-header .mobile_menu_container .main-menu ul.sub-menu li a { padding: 10px 0; color: #000; }
	body:not(.ss-h-home) .ss-header .mobile_menu_container .main-menu ul.sub-menu { background: transparent; border: 0; }
	body:not(.ss-h-home) .mobile_menu_container ul.sub-menu li a > span::before { display: none; }
	/* "Jetzt buchen" steht wie heute rechts neben den Menüpunkten, vertikal mittig (Desktop-Werte) */
	body:not(.ss-h-home) .mobile_menu_container .main-menu > ul > li.ss-cta { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); margin: 0; display: flex; align-items: center; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu > ul > li.ss-cta > a { display: block; width: auto; margin: 0; padding: 0 22px; line-height: 42px; border: 1px solid rgba(24, 27, 49, .28); border-radius: 2px; color: #000; letter-spacing: .4px; background: transparent; }
	body:not(.ss-h-home) .mobile_menu_container .main-menu > ul > li.ss-cta > a:hover { border-color: #181b31; color: #181b31; background: transparent; }
}

/* Nur Tablet (768 - 1024 px): wie heute GT3-Tablet-Kopfzeile, 100 px hoch, nicht über dem Inhalt,
   Startseite weiß ohne Schriftzug, sonst Schriftzug links (16 px) und Menü-Schalter 30 px vom Rand. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ss-header__inner { height: 100px; padding: 0 30px; }
	.ss-header__bar { background: #fff; color: #232325; }
	.ss-brand { color: #232325; }
	.ss-h-home .ss-header { position: relative; top: auto; }
	.ss-h-home .ss-header__bar { background: #fff; color: #232325; }
	.ss-h-home .mobile_menu_container { position: static; }
	.ss-h-buchen .ss-header__bar, .ss-h-dunkel09 .ss-header__bar { background: #090909; color: #fff; }
	.ss-h-dunkel19 .ss-header__bar { background: #191a1c; color: #fff; }
	.ss-h-buchen .ss-brand, .ss-h-dunkel09 .ss-brand, .ss-h-dunkel19 .ss-brand { color: #fff; }
}

/* Handy im Querformat (niedrige Höhe): Startseite ohne weiße Leiste, Menü-Knopf liegt wie im Hochformat über dem Hero
   (Entscheidung Sebastian 01.10.2026, Pilotvergleich Punkt 3) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1199px) {
	.ss-h-home .ss-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
	.ss-h-home .ss-header__bar { background: transparent; }
}

/* Cookie-Knopf (Real Cookie Banner, nach einer Entscheidung unten links): Hülle nicht über die volle Breite
   (sonst hält das Handy-Hero-Skript sie für die Kontaktleiste und kürzt den Hero), am Handy kleiner und
   mittig in der linken, freigehaltenen Ecke der Kontaktleiste (Entscheidung Sebastian 01.10.2026, Punkt 6) */
body > div.animate__animated:has(> div > a[aria-label="focus"]) { width: auto !important; max-width: 100%; right: auto !important; }
@media (max-width: 767px) {
	body > div.animate__animated > div > a[aria-label="focus"] + div { transform: translate(-3px, 19px) scale(.8); }
}

/* ---------- Footer ---------- */
.main_footer { position: relative; background: #f9f8f8; color: #2d3134; font-size: 16px; line-height: 27px; }
.main_footer.ss-footer-leer { display: none; } /* Danke-Seite wie heute: Footer leer und ausgeblendet */
.main_footer .container { width: 1170px; max-width: 100%; margin: 0 auto; }
.main_footer .row { display: flex; flex-wrap: wrap; margin: 0 -2.5%; } /* GT3: -2,5 % des Containers */
.top_footer .row { padding: 94px 0 35px; }
.top_footer .container { overflow: hidden; } /* wie GT3: negativer Zeilenrand erzeugt keine seitliche Verschiebung */
.main_footer .span6 { width: 50%; padding: 0 2.5%; }
.main_footer .span3 { width: 25%; padding: 0 2.5%; }
.main_footer .span12 { width: 100%; padding: 0 15px; }
.main_footer .widget { position: relative; display: flow-root; }
.main_footer .widget + .widget { margin-top: 0; }
.main_footer h3.widget-title { font-size: 20px; line-height: 30px; font-weight: 700; color: #2d3134; margin: 0 0 26px; letter-spacing: 0; }
.main_footer p { margin: 0; font-size: 16px; line-height: 24px; }
.main_footer .ss-footer-ueber { padding-bottom: 19px; }
.main_footer a { color: #2d3134; }
.main_footer ul.menu { list-style: none; margin: 5px 0 0; padding: 0; }
.main_footer ul.menu li { margin: 0; padding: 0 0 9px; font-size: 16px; line-height: 25.6px; }
.main_footer ul.menu li a { display: inline; }
.main_footer ul.menu li:last-child { padding-bottom: 0; }
.copyright { background: #efefef; border-top: 1px solid rgba(249, 248, 248, 1); color: #212121; font-size: 14px; font-weight: 300; line-height: 21px; text-align: center; }
.copyright .row { margin: 0 -15px; padding: 14px 0 18px; }
.copyright p { font-size: 14px; line-height: 21px; font-weight: 300; margin: 0; }
.copyright a { color: #212121; }
/* Unter 1200 px: GT3-Containerbreiten wie heute (998 / 740 / 560 / 420 / 90 %), 30 px Spaltenabstand */
@media only screen and (max-width: 1199px) { .main_footer .container { width: 998px; max-width: 100%; padding: 0; } }
@media only screen and (max-width: 1099px) {
	.main_footer .row { margin: 0 -15px; }
	.main_footer .span6, .main_footer .span3 { padding: 0 15px; }
}
@media only screen and (max-width: 1023px) {
	.main_footer .container { width: 740px; }
	.top_footer .row { align-items: flex-start; }
	.main_footer .span6, .main_footer .span3 { width: 50%; }
	.main_footer .span6 { margin-bottom: 35px; }
}
@media only screen and (max-width: 767px) {
	.main_footer .container { width: 560px; }
	.main_footer .span6, .main_footer .span3 { width: 100%; }
	.main_footer .span6, .main_footer .span3:not(:last-child) { margin-bottom: 15px; }
}
@media only screen and (max-width: 599px) { .main_footer .container { width: 420px; } }
@media only screen and (max-width: 479px) { .main_footer .container { width: 90%; } }
@media only screen and (min-width: 390px) and (max-width: 480px) { .main_footer .container { width: calc(90% - 20px); } }

/* ---------- Zurück nach oben ---------- */
.back_to_top_container { position: fixed; z-index: 3; right: 40px; bottom: 40px; pointer-events: none; }
#back_to_top { position: relative; display: block; width: 43px; height: 43px; border-radius: 50px; background: #181b31; color: #fff; opacity: 0; pointer-events: none; transition: all .3s; text-align: center; }
#back_to_top svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); }
#back_to_top.show { opacity: 1; pointer-events: auto; }
#back_to_top.show:hover { opacity: .7; }
@media only screen and (max-width: 600px) {
	.back_to_top_container { right: 25px; bottom: 25px; }
}

/* ---------- Schwebende Kontakt-Buttons (Custom-CSS-JS 4390, 1:1) ---------- */
.cc-floating-menu{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:999;display:flex;flex-direction:column;gap:1px}
.cc-floating-menu a.cc-fm-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(24,24,26,.9);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-decoration:none;border:0;transition:transform .1s ease-out,background .2s ease,color .2s ease}
.cc-floating-menu a.cc-fm-btn:hover,.cc-floating-menu a.cc-fm-btn:focus-visible{background:#fff;color:#000;text-decoration:none}
.cc-floating-menu a.cc-fm-btn:active{transform:scale(.96)}
.cc-floating-menu a.cc-fm-btn svg{width:20px;height:20px;fill:currentColor;display:block}
.cc-fm-tip{position:absolute;right:44px;top:50%;transform:translateY(-50%);white-space:nowrap;background:#000;color:#fff;font-size:12px;line-height:1;padding:9px 11px;opacity:0;visibility:hidden;transition:opacity .2s ease;pointer-events:none}
.cc-floating-menu a.cc-fm-btn:hover .cc-fm-tip,.cc-floating-menu a.cc-fm-btn:focus-visible .cc-fm-tip{opacity:1;visibility:visible}
@media (max-width:767px){.cc-fm-tip{display:none}}
/* Handy: Kontaktknöpfe als Leiste am unteren Rand (Customizer-CSS 29.09.2026) */
@media (max-width: 767px) {
	body .cc-floating-menu { top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; gap: 0; height: calc(52px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom) 84px; background: rgba(18, 18, 20, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 -1px 0 rgba(255,255,255,.08); }
	body .cc-floating-menu a.cc-fm-btn { flex: 1 1 0; width: auto; height: 52px; border-radius: 0; background: transparent; box-shadow: inset 1px 0 0 rgba(255,255,255,.10); -webkit-backdrop-filter: none; backdrop-filter: none; }
	body .cc-floating-menu a.cc-fm-btn svg { width: 20px; height: 20px; }
	body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
	body .back_to_top_container { bottom: calc(66px + env(safe-area-inset-bottom)) !important; right: 14px !important; }
}

/* =========================================================================
   Schritt 8: Seitenvorlagen ohne Elementor
   ========================================================================= */

/* ---------- Gemeinsame Grundwerte (heute aus GT3: p mit Zeilenhöhe 1,5, Label unter Checkbox) ---------- */
/* Nur in den neuen Vorlagen (Startseite, /buchen/, Portfolio-Vorlage); :where() hält die Spezifität wie bei "p".
   Die noch nicht umgebauten Seiten bleiben wie in Schritt 7 (dort fehlen die GT3-Klassen, die live die Zeilenhöhe überschreiben). */
:where(.ss-start, .ssb, .ss-pf, .ss-ue, .ss-ratgeber) p { line-height: 1.5; }
:where(.ss-start, .ssb, .ss-pf) label { display: block; margin-bottom: 5px; font-weight: inherit; }
:where(.ss-start, .ssb, .ss-pf) input[type="checkbox"] + label { position: relative; display: inline-block; padding-left: 5px; color: inherit; }

/* "Mehr anzeigen"-Text (heute als CSS im HTML-Widget der Portfolio-Seiten) */
.toggle-wrapper { max-width: 800px; margin: 0 auto; text-align: left; font-family: sans-serif; line-height: 1.6; padding: 0; color: #fff; }
#readmore-toggle { display: none; }
.full-text-wrapper { max-height: 0; overflow: hidden; transition: max-height .6s ease-in-out; }
#readmore-toggle:checked ~ .full-text-wrapper { max-height: 20000px; }
.toggle-button { display: inline-block; margin-top: 15px; color: inherit; cursor: pointer; font-weight: 500; text-decoration: underline; }
.toggle-wrapper h2.ssw-h { font-size: 22px; line-height: 1.35; font-weight: 700; margin: 30px 0 10px; color: inherit; }
.toggle-wrapper h2.ssw-h:first-child { margin-top: 0; }
.toggle-wrapper a { text-decoration: underline; text-underline-offset: 3px; transition: .2s ease-in-out; }

/* Button "… anfragen" unter Portfolio-Texten (heute Zusätzliches CSS, Feinschliff 29.09.2026) */
.ss-cta-inline { margin: 22px 0 28px; }
.ss-cta-inline a { display: inline-block; padding: 13px 26px; border: 1px solid currentColor; text-decoration: none !important; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; line-height: 1.2; transition: background .2s, color .2s; }
.ss-cta-inline a:hover { background: #fff; color: #111 !important; }
.ss-cta-inline a:active { transform: translateY(-1px) scale(.98); }

/* ---------- Vorlage Portfolio-Seite ---------- */
.ss-pf-kopf { padding: 0 0 40px; }
.ss-pf-kopf__innen { display: flex; flex-direction: column; max-width: 740px; margin: 0 auto; padding: 10px; }
.ss-pf-kopf__innen > * { width: 100%; margin-top: 0; margin-bottom: 0; }
.ss-pf-kopf__innen > .toggle-wrapper { margin: 0 auto; }
.ss-kicker { margin: 0; padding: 0 0 10px; font-size: 12px; line-height: 1em; font-weight: 400; color: #fff; }
.ss-pf .wp-block-post-title { margin: 0; color: #fff; }
.ss-pf h1.wp-block-post-title { font-size: 70px; line-height: 70px; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 1024px) { .ss-pf h1.wp-block-post-title { font-size: 50px; line-height: 1.12; } }
@media (max-width: 767px) { .ss-pf h1.wp-block-post-title { font-size: 34px; line-height: 1.15; } }
/* Seitentitel als h2 (Kicker ist dort die h1): Größen der normalen h2 */
/* Eigene h1 statt Seitentitel (Frauen- und Männerportraits): 40/50 px, Handy 28/36 px */
.ss-pf h1.ss-pf-h1 { font-size: 40px; line-height: 50px; color: #fff; }
@media (max-width: 767px) { .ss-pf h1.ss-pf-h1 { font-size: 28px; line-height: 36px; } }
/* Text unter dem Titel (heute Elementor-Texteditor): Abstand 27 px oben, 19 px unten */
.ss-pf-kopf__innen > .ss-pf-text { margin: 27px 0 19px; color: #fff; }
.ss-pf-text > :last-child { margin-bottom: 0; }
.ss-pf-text a { color: #fff; }
.ss-pf-text h2.ss-pf-text__h2 { font-size: 26px; line-height: 1.3; font-weight: 400; margin: 28px 0 12px; color: #fff; }

/* Kategorie-Zeile (heute GT3-Widget "Custom Meta"): gleiche Verschachtelung und Werte wie dort,
   Bezeichnung normal, Werte halbfett, Umbruch nur bei Platzmangel */
.ss-pf-kategorie { font-size: 18px; line-height: 27px; }
.ss-pf-kategorie__eintrag { display: inline-block; padding-right: 30px; font-size: 14px; line-height: 24.5px; }
.ss-pf-kategorie__titel { display: inline-block; margin-right: 7px; font-size: 16px; line-height: 20px; font-weight: 400; color: #fff; }
.ss-pf-kategorie__werte { display: inline-block; font-size: 16px; line-height: 20px; font-weight: 600; font-family: Roboto, Arial, sans-serif; }
.ss-pf-kategorie__werte a { font-size: 16px; line-height: 20px; font-weight: 600; color: #fff; transition: .3s; }
/* Nur Business Portraits für Frauen: Links zu Editorial-Kategorien ausgeblendet (Wunsch Sebastian 28.09.2026, heute Seiten-CSS) */
/* Kategorie plus weitere Einträge (Website, Instagram, Make-up, Lesetipp) in einer Zeile wie heute */
.ss-pf-meta { font-size: 18px; line-height: 27px; }
.ss-pf-meta > .ss-pf-kategorie { display: contents; }
.ss-pf-meta__eintrag { display: inline-block; margin: 0; padding-right: 30px; font-size: 14px; line-height: 24.5px; }
.ss-pf-meta__eintrag a { font-size: 16px; line-height: 20px; font-weight: 600; color: #fff; transition: .3s; }
.postid-2510 .ss-pf-kategorie__werte { font-size: 0; }
.postid-2510 .ss-pf-kategorie a[href$="/portfolio/all-about-woman/"],
.postid-2510 .ss-pf-kategorie a[href$="/portfolio-commercial-fashion/"] { display: none !important; }
.postid-2510 .ss-pf-kategorie a[href$="/portfolio-business-portraits/"]::after { content: ", "; color: #000; }

/* Abschnitt nach der Galerie (heute Elementor-Container mit HTML-Widget) */
.ss-pf-ende { padding: 10px; }
.ss-pf-ende--abstand { padding: 40px 0 100px; }
.ss-men { max-width: 820px; margin: 0 auto; padding: 40px 20px 20px; color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.75; }
.ss-men h2 { font-size: 30px; line-height: 1.25; margin: 64px 0 18px; color: #fff; }
.ss-men h2:first-child { margin-top: 0; }
.ss-men p { margin: 0 0 16px; color: #fff; }
.ss-men a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ss-men:not(.ss-men--einfach) h3 { margin: 34px 0 8px; color: #fff; text-transform: none; letter-spacing: normal; font-size: 19px; line-height: 1.35; }
.ss-men h3.ss-men__frage { font-size: 19px; margin: 24px 0 6px; color: #fff; }
.ss-men .ss-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 10px; }
.ss-men .ss-steps h3 { margin-top: 0; }
@media (max-width: 900px) {
	.ss-men .ss-steps { grid-template-columns: 1fr; gap: 6px; }
	.ss-men h2 { font-size: 25px; margin-top: 48px; }
}
.ss-men .ss-cta-inline { text-align: center; margin-top: 60px; }
.ss-men .ss-cta-inline a { padding: 16px 38px; background: #fff; color: #121516 !important; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; border-radius: 8px; border-bottom: 0; box-shadow: 0 0 22px 0 rgba(240, 98, 56, .35); transition: box-shadow .45s ease, transform .45s ease; }
.ss-men .ss-cta-inline a:hover, .ss-men .ss-cta-inline a:focus-visible { box-shadow: 0 0 38px 4px rgba(240, 98, 56, .7); transform: translateY(-2px); color: #121516 !important; }
/* Business Casual: Lesen-mehr-Abschnitt unter der Galerie mit 20 px Innenabstand (wie heute) */
.toggle-wrapper--abschnitt { padding: 20px; }

/* Galerie (Mauerwerk wie heute: 3 Spalten, Abstand und Spalten für Tablet/Handy je Seite aus dem Galerie-Block, Standard 0 px / 3 / 2) */
.ss-pf-galerie { padding: 0 10px; }
.ss-pf-galerie__innen { max-width: 1600px; margin: 0 auto; padding: 10px 0; }
.ss-galerie {
	--cols: var(--cols-d, 3); --hgap: var(--gap-d, 0px); --vgap: var(--gap-d, 0px); --smax: var(--smax-d); --gmax: var(--gmax-d);
	--w: calc((100% - (var(--cols) - 1) * var(--hgap)) / var(--cols));
	position: relative; height: 0; padding-bottom: calc(var(--smax) * var(--w)); margin-bottom: calc(var(--gmax) * var(--vgap));
}
.ss-galerie__bild {
	--c: var(--c-d); --s: var(--s-d); --i: var(--i-d);
	position: absolute; top: 0; left: calc(var(--w) * var(--c) + var(--hgap) * var(--c)); width: var(--w);
	margin-top: calc(var(--s) * var(--w) + var(--i) * var(--vgap));
	display: block; overflow: hidden; color: #fff;
}
.ss-galerie__bild img { display: block; width: 100%; height: auto; transform-origin: center top; transition: filter .8s, transform .8s; }
.ss-galerie--js .ss-galerie__bild img:not(.ss-geladen) { filter: opacity(0); transform: scale(.5); }
.ss-galerie__ueberlagerung { position: absolute; inset: 0; background-color: transparent; transition: background-color .8s, opacity .8s; }
.ss-galerie__bild:hover .ss-galerie__ueberlagerung, .ss-galerie__bild:focus .ss-galerie__ueberlagerung { background-color: rgba(0, 0, 0, .5); }
.ss-galerie__bild:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* Elementor-Galerie schaltet erst unter 1024 px auf Tablet (bei genau 1024 px noch ohne Abstand). */
@media (max-width: 1023px) {
	.ss-galerie { --cols: var(--cols-t, 3); --hgap: 10px; --vgap: 10px; --smax: var(--smax-t); --gmax: var(--gmax-t); }
	.ss-galerie__bild { --c: var(--c-t); --s: var(--s-t); --i: var(--i-t); }
}
@media (max-width: 766px) {
	.ss-galerie { --cols: var(--cols-m, 2); --smax: var(--smax-m); --gmax: var(--gmax-m); }
	.ss-galerie__bild { --c: var(--c-m); --s: var(--s-m); --i: var(--i-m); }
}
@media (prefers-reduced-motion: reduce) { .ss-galerie__bild img, .ss-galerie__ueberlagerung { transition: none; } }

/* Zurück / Portfolio / Weiter (heute GT3) */
.single_prev_next_posts { position: relative; margin: 65px 0 100px; padding: 0 25px; font-size: 0; line-height: 0; background: transparent; }
.single_prev_next_posts .container { position: relative; width: 1170px; max-width: 100%; margin: 0 auto; padding: 25px 0; border-top: 1px solid rgba(148, 148, 148, .1); border-bottom: 1px solid rgba(148, 148, 148, .1); }
.single_prev_next_posts .fleft, .single_prev_next_posts .fright { display: inline-block; width: 50%; vertical-align: top; }
.single_prev_next_posts .fleft { text-align: left; padding-right: 14px; }
.single_prev_next_posts .fright { text-align: right; padding-left: 14px; }
.single_prev_next_posts a { display: inline-block; padding: 13px 0; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; line-height: 18px; font-weight: 700; color: #fff; transition: .2s ease-in-out; }
.single_prev_next_posts a:hover { text-decoration: none !important; }
.single_prev_next_posts .port_back2grid { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); box-sizing: content-box; }
.port_back2grid span { position: absolute; display: block; width: 13px; height: 13px; border-radius: 10px; background: #fff; transition: all .5s; }
.port_back2grid:hover span { opacity: .7; }
.port_back2grid_box1 { left: 0; top: 0; }
.port_back2grid_box2 { left: 0; bottom: 0; }
.port_back2grid_box3 { right: 0; top: 0; }
.port_back2grid_box4 { right: 0; bottom: 0; }
@media only screen and (min-width: 768px) {
	.single_prev_next_posts a span.gt3_post_navi { position: relative; display: block; vertical-align: top; }
	.single_prev_next_posts .fleft a span.gt3_post_navi { padding-left: 30px; }
	.single_prev_next_posts .fright a span.gt3_post_navi { padding-right: 30px; }
	.single_prev_next_posts a span.gt3_post_navi::before { content: ""; position: absolute; top: 50%; display: block; width: 19px; border-top: 1px solid #c0c0c0; box-sizing: content-box; transition: all .3s; }
	.single_prev_next_posts .fleft a span.gt3_post_navi::before { left: 0; }
	.single_prev_next_posts .fright a span.gt3_post_navi::before { right: 0; }
	.single_prev_next_posts a span.gt3_post_navi::after { content: ""; position: absolute; top: 50%; left: 1px; display: block; width: 8px; height: 8px; margin-top: -4px; border-right: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; box-sizing: content-box; transform: rotate(135deg); transition: all .3s; }
	.single_prev_next_posts .fright a span.gt3_post_navi::after { left: auto; right: 1px; transform: rotate(-45deg); }
	.single_prev_next_posts .fleft a:hover span.gt3_post_navi::after, .single_prev_next_posts .fleft a:hover span.gt3_post_navi::before { margin-left: -5px; }
	.single_prev_next_posts .fright a:hover span.gt3_post_navi::after, .single_prev_next_posts .fright a:hover span.gt3_post_navi::before { margin-right: -5px; }
}
@media only screen and (max-width: 1199px) { .single_prev_next_posts .container { width: 998px; } }
@media only screen and (max-width: 1023px) { .single_prev_next_posts .container { width: 740px; } }
@media only screen and (max-width: 767px) { .single_prev_next_posts .container { width: 560px; } }
@media only screen and (max-width: 599px) { .single_prev_next_posts .container { width: 420px; } }
@media only screen and (max-width: 479px) { .single_prev_next_posts .container { width: 90%; } }
@media only screen and (min-width: 390px) and (max-width: 480px) { .single_prev_next_posts .container { width: calc(90% - 20px); } }

/* Lightbox der Galerie (ersetzt die Elementor-Lightbox: Zähler, Zoom, Vollbild, Teilen, Titel und Beschreibung) */
.ss-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .8); color: rgba(237, 237, 237, .9); font-family: Roboto, Arial, sans-serif; user-select: none; }
.ss-lightbox[hidden] { display: none; }
.ss-lightbox:focus { outline: none; }
.ss-lightbox button { display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ss-lightbox .ss-lb-svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.ss-lightbox__buehne { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 70px; overflow: hidden; }
.ss-lightbox__bild { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; cursor: grab; }
.ss-lightbox--zoom .ss-lightbox__buehne { overflow: auto; align-items: flex-start; justify-content: flex-start; padding: 0; }
.ss-lightbox--zoom .ss-lightbox__bild { max-width: none; max-height: none; cursor: zoom-out; }
/* Kopfleiste links: Teilen, Zoom, Vollbild, Zähler (wie Elementor: 20 px Rand, Symbole 30 px mit 7 px Abstand) */
.ss-lightbox__kopf { position: absolute; top: 0; left: 0; z-index: 3; display: flex; align-items: center; height: 60px; padding: 15px 52px 15px 20px; font-size: 20px; }
.ss-lightbox .ss-lb-knopf { width: 30px; height: 30px; padding: 5px; margin: 0 7px; transition: color .3s; }
.ss-lightbox .ss-lb-knopf:hover, .ss-lightbox .ss-lb-knopf:focus-visible { color: #fff; }
.ss-lb-zoom .ss-lb-svg--zoomRaus, .ss-lightbox--zoom .ss-lb-zoom .ss-lb-svg--zoomRein,
.ss-lb-vollbild .ss-lb-svg--vollbildAus, .ss-lightbox--vollbild .ss-lb-vollbild .ss-lb-svg--vollbild { display: none; }
.ss-lightbox--zoom .ss-lb-zoom .ss-lb-svg--zoomRaus, .ss-lightbox--vollbild .ss-lb-vollbild .ss-lb-svg--vollbildAus { display: block; }
.ss-lightbox__zaehler { font-size: 15px; line-height: 1.5; }
.ss-lightbox .ss-lb-schliessen { position: absolute; top: 13px; right: 15px; z-index: 4; margin: 0; }
/* Blättern: unsichtbare Flächen links und rechts, Pfeil 25 px mittig */
.ss-lightbox .ss-lightbox__zurueck, .ss-lightbox .ss-lightbox__weiter { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 15%; height: 100%; font-size: 25px; }
.ss-lightbox__zurueck { left: 0; }
.ss-lightbox__weiter { right: 0; }
.ss-lightbox__zurueck .ss-lb-svg, .ss-lightbox__weiter .ss-lb-svg { width: 25px; height: 25px; }
.ss-lightbox--zoom .ss-lightbox__zurueck, .ss-lightbox--zoom .ss-lightbox__weiter { display: none; }
/* Teilen: Ebene über allem, weißes Feld rechts oben */
.ss-lightbox__teilen { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .5); }
.ss-lightbox__teilen[hidden] { display: none; }
.ss-lightbox__teilen-links { position: absolute; top: 60px; right: 56px; width: 240px; padding: 14px 20px; background: #fff; border-radius: 3px; box-shadow: 0 4px 15px rgba(0, 0, 0, .3); }
.ss-lightbox__teilen a { display: block; font-size: 12px; line-height: 30px; color: #0c0d0e; text-align: start; }
.ss-lightbox__teilen a:hover { text-decoration: none !important; opacity: .7; }
.ss-lightbox__teilen .ss-lb-svg { display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: baseline; }
.ss-lightbox__teilen .ss-lb-fb .ss-lb-svg { fill: #3b5998; }
.ss-lightbox__teilen .ss-lb-x .ss-lb-svg { fill: #000; }
.ss-lightbox__teilen .ss-lb-pin .ss-lb-svg { fill: #bd081c; }
@media (max-width: 767px) {
	.ss-lightbox__buehne { padding: 70px 0; }
	.ss-lightbox .ss-lightbox__zurueck { justify-content: flex-start; }
	.ss-lightbox .ss-lightbox__weiter { justify-content: flex-end; }
}

/* ---------- Vorlage Buchen (/buchen/): 1:1 aus dem bisherigen HTML-Widget, ohne die alten GT3-Kopfzeilen-Regeln (macht jetzt das Theme) ---------- */
/* Grundwerte für Knöpfe wie heute im GT3-Theme (nur innerhalb der Buchen-Seite, die Paket-Knöpfe bauen darauf auf) */
.ssb button { display: inline-block; transition: 300ms; border-radius: 50px; outline: none; width: auto; height: 56px; cursor: pointer; padding: 10px 30px; line-height: 23px; margin: 0 0 15px; font-family: inherit; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0; border: none; background: transparent; }
/* Handy: Hero-Bild niedriger (heute Zusätzliches CSS, Feinschliff 2 vom 29.09.2026) */
@media (max-width: 767px) { .page-id-5394 .ssb .ssb-hero-img { height: 68vw; min-height: 240px; } }
@media (max-width: 767px) and (max-height: 700px) { .page-id-5394 .ssb .ssb-hero-img { height: 52vw; min-height: 190px; } .page-id-5394 .ssb .ssb-hero-txt h1 { font-size: 25px; line-height: 1.2; } .page-id-5394 .ssb .ssb-hero .ssb-lead { font-size: 15px; line-height: 1.5; } .page-id-5394 .ssb .ssb-hero-cta { margin-top: 16px; } }
.ssb{font-family:Roboto,Arial,sans-serif;color:#000;--ink:#000;--line:rgba(24,27,49,.28);--muted:#555;--dark:#090909}
.ssb *{box-sizing:border-box}
.ssb .ssb-wrap{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
.ssb .ssb-eyebrow{font-family:"Roboto Slab",serif;font-size:19px;line-height:1.35;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted);margin:0 0 12px}
.ssb h1{font-size:40px;line-height:1.15;font-weight:700;margin:0 0 18px;color:#181b31}
.ssb h2{font-size:30px;line-height:1.2;font-weight:700;margin:0 0 14px;color:#181b31}
.ssb p{font-size:18px;line-height:1.55;margin:0 0 16px}
.ssb .ssb-lead{max-width:760px;color:#222}
.ssb .ssb-top{padding-top:70px;padding-bottom:40px}
.ssb .ssb-btn{display:inline-block;font-size:15px;letter-spacing:.6px;text-transform:uppercase;text-decoration:none;color:#232325;border:1px solid rgba(24,27,49,.5);border-radius:2px;padding:12px 22px;background:transparent;cursor:pointer;line-height:1.2;transition:background .2s,color .2s,border-color .2s,transform .1s ease-out}
.ssb .ssb-btn:active,.ssb .ssb-pill:active{transform:scale(.98)}
.ssb .ssb-btn:hover{background:#000;color:#fff;border-color:#000}
.ssb .ssb-btn.ssb-solid{background:#000;color:#fff;border-color:#000}
.ssb .ssb-btn.ssb-solid:hover{background:#333;border-color:#333}
.ssb .ssb-sec{padding-top:50px;padding-bottom:50px}
.ssb .ssb-talk{border:1px solid var(--line);border-radius:4px;padding:34px 36px;display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:center;background:#fafafa}
.ssb .ssb-talk h2{font-size:26px;margin-bottom:8px}
.ssb .ssb-talk p{margin-bottom:0;font-size:17px}
.ssb .ssb-talk .ssb-meta{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ssb .ssb-talk .ssb-act{text-align:right}
.ssb .ssb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.ssb .ssb-card{position:relative;border:1px solid var(--line);border-radius:4px;padding:28px 24px 26px;display:flex;flex-direction:column;background:#fff;transition:border-color .2s,box-shadow .2s}
.ssb .ssb-card:hover{border-color:#000;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.ssb .ssb-card.ssb-hi{border-color:#000}
.ssb .ssb-badge{position:absolute;top:-11px;left:22px;background:#000;color:#fff;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:2px}
.ssb .ssb-dur{font-size:34px;font-weight:700;line-height:1;color:#181b31}
.ssb .ssb-dur small{font-size:14px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:block;margin-top:6px}
.ssb .ssb-card h3{font-size:19px;line-height:1.25;font-weight:700;margin:18px 0 8px;color:#181b31}
.ssb .ssb-card p{font-size:15.5px;line-height:1.5;color:#333;margin-bottom:14px}
.ssb .ssb-card ul{list-style:none;padding:0;margin:0 0 22px;flex:1}
.ssb .ssb-card li{font-size:15px;line-height:1.45;padding:7px 0 7px 22px;position:relative;border-top:1px solid #eee}
.ssb .ssb-card li:before{content:""!important;position:absolute!important;left:2px!important;top:14px!important;width:10px!important;height:6px!important;background:transparent!important;border:0!important;border-left:2px solid #000!important;border-bottom:2px solid #000!important;border-radius:0!important;transform:rotate(-45deg)!important;box-sizing:border-box!important;margin:0!important}
.ssb .ssb-card .ssb-btn{width:100%;text-align:center}
.ssb .ssb-note{font-size:14.5px;color:var(--muted);margin:18px 0 0;line-height:1.6}.ssb .ssb-note a{color:#000;display:inline-block;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.ssb .ssb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:26px}
.ssb .ssb-step .n{font-family:"Roboto Slab",serif;font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted);margin-bottom:8px}
.ssb .ssb-step h3{font-size:20px;font-weight:700;margin:0 0 8px;color:#181b31}
.ssb .ssb-step p{font-size:16px;line-height:1.5;margin:0;color:#333}
.ssb .ssb-cal{background:var(--dark);color:#fff;padding:70px 0 60px}
.ssb .ssb-cal h2{color:#fff}
.ssb .ssb-cal .ssb-eyebrow{color:#aaa}
.ssb .ssb-pills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.ssb .ssb-pill{font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:#ddd;border:1px solid rgba(255,255,255,.5);border-radius:2px;padding:9px 14px;background:transparent;cursor:pointer;font-family:inherit;transition:transform .1s ease-out}
.ssb .ssb-pill.ssb-on,.ssb .ssb-pill:hover{background:#fff;color:#000;border-color:#fff}
.ssb .ssb-calbox{min-height:520px;border-radius:6px;overflow:hidden}
.ssb .ssb-calbox .meetergo-iframe{width:100%}
.ssb .ssb-calbox iframe{width:100%!important;max-width:100%!important;border:0;animation:ssbFadeIn .45s ease .1s both}
.ssb .ssb-fallback{padding:40px 20px;text-align:center;color:#ccc;font-size:16px}
.ssb .ssb-fallback a{color:#fff;text-decoration:underline}
.ssb .ssb-alt{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.15);color:#bbb;font-size:16px;line-height:1.6}
.ssb .ssb-alt a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);display:inline-block;padding:6px 0;line-height:1.3}
@media(max-width:1024px){.ssb .ssb-grid{grid-template-columns:repeat(2,1fr)}.ssb h1{font-size:34px}}
@media(max-width:767px){.ssb .ssb-top{padding-top:36px;padding-bottom:16px}.ssb h1{font-size:28px}.ssb h2{font-size:24px}.ssb p{font-size:16px}.ssb .ssb-talk{grid-template-columns:1fr;padding:26px 22px}.ssb .ssb-talk .ssb-act{text-align:left}.ssb .ssb-grid{grid-template-columns:1fr;gap:26px}.ssb .ssb-steps{grid-template-columns:1fr;gap:22px}.ssb .ssb-sec{padding-top:34px;padding-bottom:34px}.ssb .ssb-cal{padding:50px 0 40px}.ssb .ssb-btn{padding:15px 18px;font-size:14px;min-height:48px}.ssb .ssb-wrap{padding-left:16px;padding-right:16px}.ssb .ssb-pill{padding:12px 14px}.ssb .ssb-alt{font-size:15px}.ssb .ssb-pakete .ssb-sec{padding-top:44px;padding-bottom:44px}}
.ssb .ssb-pakete{--p:0;background:#fff;color:#000;transition:background-color .35s linear,color .35s linear}
.ssb .ssb-pakete .ssb-card{transition:background-color .35s linear,color .35s linear,border-color .35s linear,transform .2s ease-out,box-shadow .2s ease-out}
.ssb .ssb-pakete .ssb-card:hover{transform:translateY(-2px)}
.ssb .ssb-pakete h2,.ssb .ssb-pakete .ssb-lead,.ssb .ssb-pakete .ssb-card h3,.ssb .ssb-pakete .ssb-card p,.ssb .ssb-pakete .ssb-card li,.ssb .ssb-pakete .ssb-dur,.ssb .ssb-pakete .ssb-btn,.ssb .ssb-pakete .ssb-note,.ssb .ssb-pakete .ssb-note a,.ssb .ssb-pakete .ssb-eyebrow,.ssb .ssb-pakete .ssb-card li:before{transition:background-color .35s linear,color .35s linear,border-color .35s linear}
@supports (color:color-mix(in srgb,#000 50%,#fff)){
.ssb .ssb-pakete{background:color-mix(in srgb,#090909 calc(var(--p)*100%),#fff)}
.ssb .ssb-pakete h2,.ssb .ssb-pakete .ssb-lead{color:color-mix(in srgb,#fff calc(var(--p)*100%),#181b31)}
.ssb .ssb-pakete .ssb-eyebrow{color:color-mix(in srgb,#aaa calc(var(--p)*100%),#555)}
.ssb .ssb-pakete .ssb-card{background:color-mix(in srgb,#141414 calc(var(--p)*100%),#fff);border-color:color-mix(in srgb,rgba(255,255,255,.18) calc(var(--p)*100%),rgba(24,27,49,.28))}
.ssb .ssb-pakete .ssb-card h3,.ssb .ssb-pakete .ssb-dur{color:color-mix(in srgb,#fff calc(var(--p)*100%),#181b31)}
.ssb .ssb-pakete .ssb-card p,.ssb .ssb-pakete .ssb-card li{color:color-mix(in srgb,#d6d6d6 calc(var(--p)*100%),#333)}
.ssb .ssb-pakete .ssb-dur small{color:color-mix(in srgb,#b5b5b5 calc(var(--p)*100%),#555)}
.ssb .ssb-pakete .ssb-card.ssb-hi .ssb-dur small{color:#555}
.ssb .ssb-pakete .ssb-card li{border-top-color:color-mix(in srgb,rgba(255,255,255,.1) calc(var(--p)*100%),#eee)}
.ssb .ssb-pakete .ssb-card li:before{border-left-color:color-mix(in srgb,#fff calc(var(--p)*100%),#000)!important;border-bottom-color:color-mix(in srgb,#fff calc(var(--p)*100%),#000)!important}
.ssb .ssb-pakete .ssb-btn{color:color-mix(in srgb,#fff calc(var(--p)*100%),#232325);border-color:color-mix(in srgb,rgba(255,255,255,.45) calc(var(--p)*100%),rgba(24,27,49,.28))}
.ssb .ssb-pakete .ssb-btn:hover{background:color-mix(in srgb,#fff calc(var(--p)*100%),#000);color:color-mix(in srgb,#000 calc(var(--p)*100%),#fff);border-color:color-mix(in srgb,#fff calc(var(--p)*100%),#000)}
.ssb .ssb-pakete .ssb-note{color:color-mix(in srgb,#aaa calc(var(--p)*100%),#555)}
.ssb .ssb-pakete .ssb-note a{color:color-mix(in srgb,#fff calc(var(--p)*100%),#000)}
.ssb .ssb-pakete .ssb-card:hover{border-color:color-mix(in srgb,#fff calc(var(--p)*100%),#000);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.ssb .ssb-pakete .ssb-card.ssb-hi,.ssb .ssb-pakete .ssb-card.ssb-hi:hover{background:#fff;border-color:color-mix(in srgb,#fff calc(var(--p)*100%),#000)}
.ssb .ssb-pakete .ssb-card.ssb-hi h3,.ssb .ssb-pakete .ssb-card.ssb-hi .ssb-dur{color:#181b31}
.ssb .ssb-pakete .ssb-card.ssb-hi p,.ssb .ssb-pakete .ssb-card.ssb-hi li{color:#333}
.ssb .ssb-pakete .ssb-card.ssb-hi li{border-top-color:#eee}
.ssb .ssb-pakete .ssb-card.ssb-hi li:before{border-left-color:#000!important;border-bottom-color:#000!important}
.ssb .ssb-pakete .ssb-card.ssb-hi .ssb-btn{background:#000;color:#fff;border-color:#000}
.ssb .ssb-pakete .ssb-card.ssb-hi .ssb-btn:hover{background:#333;border-color:#333}
}
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
.ssb .ssb-pakete{transition:background-color .8s ease,color .8s ease}
.ssb .ssb-pakete.ssb-dark{background:#090909;color:#fff}
.ssb .ssb-pakete.ssb-dark h2,.ssb .ssb-pakete.ssb-dark .ssb-lead{color:#fff}
.ssb .ssb-pakete.ssb-dark .ssb-eyebrow{color:#aaa}
.ssb .ssb-pakete.ssb-dark .ssb-card{background:#141414;border-color:rgba(255,255,255,.18);color:#fff}
.ssb .ssb-pakete.ssb-dark .ssb-card h3,.ssb .ssb-pakete.ssb-dark .ssb-dur{color:#fff}
.ssb .ssb-pakete.ssb-dark .ssb-card p,.ssb .ssb-pakete.ssb-dark .ssb-card li{color:#d6d6d6}
.ssb .ssb-pakete.ssb-dark .ssb-dur small{color:#b5b5b5}
.ssb .ssb-pakete.ssb-dark .ssb-card.ssb-hi .ssb-dur small{color:#555}
.ssb .ssb-pakete.ssb-dark .ssb-card li{border-top-color:rgba(255,255,255,.1)}
.ssb .ssb-pakete.ssb-dark .ssb-card li:before{border-left-color:#fff!important;border-bottom-color:#fff!important}
.ssb .ssb-pakete.ssb-dark .ssb-btn{color:#fff;border-color:rgba(255,255,255,.45)}
.ssb .ssb-pakete.ssb-dark .ssb-card.ssb-hi{background:#fff;border-color:#fff;color:#000}
.ssb .ssb-pakete.ssb-dark .ssb-card.ssb-hi h3,.ssb .ssb-pakete.ssb-dark .ssb-card.ssb-hi .ssb-dur{color:#181b31}
.ssb .ssb-pakete.ssb-dark .ssb-card.ssb-hi p,.ssb .ssb-pakete.ssb-dark .ssb-card.ssb-hi li{color:#333}
.ssb .ssb-pakete.ssb-dark .ssb-card.ssb-hi li:before{border-left-color:#000!important;border-bottom-color:#000!important}
.ssb .ssb-pakete.ssb-dark .ssb-card.ssb-hi .ssb-btn{background:#000;color:#fff;border-color:#000}
.ssb .ssb-pakete.ssb-dark .ssb-note{color:#aaa}
.ssb .ssb-pakete.ssb-dark .ssb-note a{color:#fff}
}
.ssb .ssb-pakete .ssb-sec{padding-top:70px;padding-bottom:70px}
@media(prefers-reduced-motion:reduce){.ssb .ssb-pakete,.ssb .ssb-pakete *{transition:none!important}}
@keyframes ssbFadeIn{from{opacity:0}to{opacity:1}}

.ssb .ssb-btn:focus-visible,.ssb .ssb-pill:focus-visible,.ssb a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.ssb .ssb-pakete .ssb-btn:focus-visible,.ssb .ssb-cal .ssb-btn:focus-visible,.ssb .ssb-pill:focus-visible{outline-color:#8ab4ff}
.ssb .ssb-trust{font-size:14px;line-height:1.6;color:#555;margin:18px 0 0}
.ssb .ssb-hero-cta .ssb-btn:not(.ssb-solid){background:none;border:0;box-shadow:none;padding:0 0 2px;margin-left:24px;min-height:0;text-transform:none;letter-spacing:normal;font-size:16px;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:5px!important;align-self:center}
.ssb .ssb-trust .ssb-star{color:#181b31;margin-right:4px}
.ssb .ssb-trust .ssb-sep{margin:0 8px;color:#999}
@media(max-width:767px){.ssb .ssb-trust{font-size:13.5px}.ssb .ssb-trust .ssb-sep{display:block;height:0;overflow:hidden;margin:0}}
.ssb .ssb-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:max(640px,min(50vw,85vh));background:#090909;color:#fff;overflow:hidden;display:flex;align-items:flex-end}
.ssb .ssb-hero-img{position:absolute;left:0;right:0;top:-14%;bottom:-14%;z-index:0;will-change:transform}
.ssb .ssb-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.05) 100%),linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
.ssb .ssb-hero-img img{width:100%;max-width:none;height:100%;object-fit:cover;object-position:50% 0;display:block;animation:ssbHeroIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.ssb .ssb-hero-img:after{content:"";position:absolute;inset:0;display:none}
@keyframes ssbHeroIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.ssb .ssb-hero-txt{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:150px 20px 56px;animation:ssbHeroTxt .8s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes ssbHeroTxt{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ssb .ssb-hero-txt h1{color:#fff;max-width:640px;margin-bottom:14px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.ssb .ssb-hero .ssb-eyebrow{color:#cfcfcf}
.ssb .ssb-hero .ssb-lead{color:#e6e6e6;max-width:600px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.ssb .ssb-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ssb .ssb-hero .ssb-btn{color:#fff;border-color:rgba(255,255,255,.55)}
.ssb .ssb-hero .ssb-btn:hover{background:#fff;color:#000;border-color:#fff}
.ssb .ssb-hero .ssb-btn.ssb-solid{background:#fff;color:#000;border-color:#fff}
.ssb .ssb-hero .ssb-btn.ssb-solid:hover{background:#e4e4e4;border-color:#e4e4e4}
.ssb .ssb-hero .ssb-trust{color:#d0d0d0;max-width:720px}
.ssb .ssb-hero .ssb-trust .ssb-star{color:#fff}
.ssb .ssb-hero .ssb-trust .ssb-sep{color:#888}
@media(max-width:1024px){.ssb .ssb-hero{min-height:600px}.ssb .ssb-hero-txt{padding-top:90px}}
@media(max-width:767px){.ssb .ssb-hero{min-height:0;display:block}.ssb .ssb-hero:before{display:none}.ssb .ssb-hero-img{position:relative;top:auto;bottom:auto;height:96vw;min-height:320px;transform:none!important}.ssb .ssb-hero-img img{width:100%;object-position:50% 12%}.ssb .ssb-hero-img:after{display:block;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,#090909 100%)}.ssb .ssb-alt a{display:inline-block;padding:6px 0;margin:-6px 0}.ssb .ssb-hero-txt{padding:0 20px 44px;margin-top:-56px;animation:none}.ssb .ssb-hero-txt h1{color:#fff}.ssb .ssb-hero-cta .ssb-btn{flex:1 1 100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.ssb .ssb-hero-img img,.ssb .ssb-hero-txt,.ssb .ssb-calbox iframe{animation:none!important;opacity:1!important;transform:none!important}}
.ssb .ssb-band{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#090909;color:#fff;overflow:hidden}
.ssb .ssb-band-in{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:end}
.ssb .ssb-band-txt{padding:70px 0}
.ssb .ssb-band .ssb-eyebrow{color:#aaa}
.ssb .ssb-band h2{color:#fff;margin:0 0 14px}
.ssb .ssb-band p{color:#c8c8c8;max-width:460px;margin:0}
.ssb .ssb-band-imgs{height:630px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;padding-top:70px;padding-bottom:70px}
.ssb .ssb-band-imgs img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.ssb .ssb-band-imgs img:nth-child(2){height:82%;transition-delay:.12s}
.ssb .ssb-band.ssb-in img{opacity:1;transform:none}
@media(max-width:1024px){.ssb .ssb-band-imgs{height:460px}.ssb .ssb-band-in{gap:36px}}
@media(max-width:767px){.ssb .ssb-band-in{grid-template-columns:1fr;gap:0}.ssb .ssb-band-txt{padding:40px 0 22px}.ssb .ssb-band-imgs{height:auto;padding:0 0 40px;gap:10px;align-items:end}.ssb .ssb-band-imgs img{height:62vw}.ssb .ssb-band-imgs img:nth-child(2){height:52vw}}
@media(prefers-reduced-motion:reduce){.ssb .ssb-band-imgs img{opacity:1;transform:none;transition:none}}
.ssb a.ssb-btn,.ssb a.ssb-btn:hover,.ssb a.ssb-btn:focus,.ssb a.ssb-pill,.ssb a.ssb-pill:hover{text-decoration:none!important}
.ssb .ssb-steps:not(.ssb-in) .ssb-step,.ssb .ssb-grid:not(.ssb-in) .ssb-card{opacity:0}
.ssb .ssb-steps.ssb-in .ssb-step,.ssb .ssb-grid.ssb-in .ssb-card{animation:ssbUp .7s cubic-bezier(.2,.7,.2,1) backwards}
.ssb .ssb-steps.ssb-in .ssb-step:nth-child(2),.ssb .ssb-grid.ssb-in .ssb-card:nth-child(2){animation-delay:.1s}
.ssb .ssb-steps.ssb-in .ssb-step:nth-child(3),.ssb .ssb-grid.ssb-in .ssb-card:nth-child(3){animation-delay:.2s}
.ssb .ssb-grid.ssb-in .ssb-card:nth-child(4){animation-delay:.3s}
@keyframes ssbUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ssb .ssb-band{--py:0px}
.ssb .ssb-band.ssb-in img{transform:translateY(var(--py))}
.ssb .ssb-band.ssb-in img:nth-child(2){transform:translateY(calc(var(--py)*1.7))}
.ssb .ssb-band.ssb-done img{transition:opacity .9s}
@media(prefers-reduced-motion:reduce){.ssb .ssb-steps .ssb-step,.ssb .ssb-grid .ssb-card{opacity:1!important;animation:none!important}.ssb .ssb-band img{transform:none!important}}
/* Buchungsseite: Header ueber dem Hero, dunkle transparente Sticky-Leiste */
@media(min-width:1025px){
















.page-id-5394 .ssb .ssb-hero{min-height:max(740px,min(calc(50vw + 100px),92vh))}
.page-id-5394 .ssb .ssb-hero:before{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%),linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.05) 100%),linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
}

.ssb h1{letter-spacing:-.02em}.ssb h2{letter-spacing:-.012em}
.ssb .ssb-pill{transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out,transform .1s ease-out}
.ssb .ssb-card:hover{transform:translateY(-2px)}
.ssb .ssb-band-imgs img{will-change:transform}
@media(prefers-reduced-motion:reduce){.ssb .ssb-card:hover{transform:none}}
/* Paul 28.09.: Kalender in die Flucht, meetergo hat ca. 50 px Innenabstand und max. 1040 px Kartenbreite */
@media(min-width:768px){.ssb #ssb-kalender .ssb-wrap{max-width:1080px}.ssb .ssb-calbox iframe{width:calc(100% + 100px)!important;max-width:none!important;margin:0 -50px!important}}
@media(max-width:1024px){.ssb .ssb-band-imgs{height:530px}}

/* ---------- Startseite: Hero (Desktop #ssh, Handy #ssm), Labels, Collage, Leistungen-Kacheln. 1:1 aus den bisherigen HTML-Widgets, ohne die alten GT3-Kopfzeilen-Regeln ---------- */
.ssh{position:relative;width:100%;height:100vh;overflow:hidden;background:#000;--s:1;--ease:cubic-bezier(.45,0,.55,1)}
.ssh *{box-sizing:border-box}
.ssh .ssh-bg{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 50%;animation:sshBg .95s var(--ease) both}
.ssh-word,.ssh-gl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.ssh-word{display:flex;align-items:center;justify-content:center;z-index:2}
.ssh-word span{font-family:"SSStaat",sans-serif;font-weight:400;color:#ff5b2d;font-size:13.05vw;line-height:1;white-space:nowrap;transform:translateY(-.8vw);letter-spacing:0}
.ssh-word{animation:sshScale 1.6s var(--ease) both}
.ssh-bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.ssh-gl{z-index:3;opacity:0;transition:opacity .2s}
.ssh.gl-on .ssh-gl{opacity:1}.ssh.gl-on .ssh-word span{visibility:hidden}
.ssh-dogwrap{position:absolute;left:50%;top:50%;z-index:13;width:var(--dogW);height:calc(var(--dogW)*1.2496);margin-left:calc(var(--dogW)/-2);margin-top:calc(var(--dogW)*-0.6248);animation:sshDrop 1.6s var(--ease) both;will-change:transform}
.ssh-dogfollow{width:100%;height:100%;transform:translate3d(var(--fx,0px),var(--fy,0px),0)}
.ssh .ssh-dog{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;animation:sshFloat 3s ease-in-out .5s infinite alternate}
.ssh-logo{position:absolute;left:0;right:0;top:var(--logoTop);z-index:11;text-align:center;font-family:"SSManrope",sans-serif;font-weight:700;font-size:var(--logoFs);line-height:var(--logoLh);letter-spacing:var(--logoLs);color:#000;animation:sshDown 1.6s var(--ease) both}
.ssh-tag{position:absolute;left:0;right:0;bottom:var(--tagB);z-index:8;text-align:center;font-family:"SSManrope",sans-serif;font-weight:500;font-size:var(--tagFs);line-height:var(--tagLh);letter-spacing:var(--tagLs);text-transform:uppercase;color:#000;animation:sshScale 1.6s var(--ease) both}
.ssh-ctawrap{position:absolute;left:0;right:0;bottom:var(--ctaB);line-height:0;z-index:12;text-align:center;animation:sshUp 1.6s var(--ease) both}
.ssh-cta{position:relative;display:inline-block;overflow:hidden;border:1px solid #000;background:transparent;color:#000!important;text-decoration:none!important;font-family:"SSManrope",sans-serif;font-size:var(--ctaFs);line-height:var(--ctaLh);padding:0 var(--ctaPx);transition:border-color .2s ease-out}
.ssh-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(40deg,#ff7a63 0%,#ff9400 100%);opacity:0;transition:opacity .25s ease-out}
.ssh-cta .n,.ssh-cta .h{position:relative;display:block;transition:transform .3s cubic-bezier(.65,0,.35,1),opacity .3s}
.ssh-cta .n{font-weight:600}
@media (max-width:767px){.ssh{height:calc(100vh - 100px - env(safe-area-inset-bottom));height:calc(100svh - 100px - env(safe-area-inset-bottom))}}
.ssh-cta+.ssh-cta{margin-left:14px}
@media (max-width:479px){.ssh-ctawrap .ssh-cta{padding:0 18px}.ssh-cta+.ssh-cta{margin-left:8px}}.ssh-cta .h{position:absolute;left:0;right:0;top:0;font-weight:500;transform:translateY(100%);opacity:0}
.ssh-cta:hover,.ssh-cta:focus-visible{border-color:#ff5b2d}.ssh-cta:hover:before,.ssh-cta:focus-visible:before{opacity:1}
.ssh-cta:hover .n,.ssh-cta:focus-visible .n{transform:translateY(-100%);opacity:0}.ssh-cta:hover .h,.ssh-cta:focus-visible .h{transform:translateY(0);opacity:1}
@keyframes sshBg{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes sshScale{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes sshDown{from{opacity:0;transform:translateY(calc(-150px*var(--s)))}to{opacity:1;transform:none}}
@keyframes sshUp{from{opacity:0;transform:translateY(calc(150px*var(--s)))}to{opacity:1;transform:none}}
@keyframes sshDrop{from{transform:translateY(-100vh)}to{transform:none}}
@keyframes sshFloat{from{transform:translateY(calc(-10px*var(--s)))}to{transform:translateY(calc(10px*var(--s)))}}
@media (max-width:767px){.ssh-dogwrap{width:calc(var(--dogW)*.72);height:calc(var(--dogW)*.72*1.2496);margin-left:calc(var(--dogW)*-.36);margin-top:calc(var(--dogW)*-0.4499 + 24vw)}}
@media (max-width:767px) and (max-height:760px){.ssh-dogwrap{width:calc(var(--dogW)*.5);height:calc(var(--dogW)*.5*1.2496);margin-left:calc(var(--dogW)*-.25)}}

@media (prefers-reduced-motion:reduce){.ssh *{animation:none!important;transition:none!important}}


.ssm{display:none}
@media (max-width:767px){
#ssh{display:none!important}



.ssm{display:block;position:relative;width:100%;height:calc(100vh - 50px - env(safe-area-inset-bottom));height:calc(100svh - 50px - env(safe-area-inset-bottom));min-height:460px;overflow:hidden;background:#111;color:#fff;font-family:"SSManrope",sans-serif}
.ssm-sl{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;transition:opacity 1.1s ease}
.ssm-sl img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 20%;display:block}
.ssm-sl.act{opacity:1}
.ssm-sl.act img{animation:ssmKb 5.5s ease-out forwards}
@keyframes ssmKb{from{transform:scale(1.14)}to{transform:none}}
.ssm-sh{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(12,12,12,.94) 0%,rgba(12,12,12,.7) 45%,rgba(12,12,12,0) 100%);pointer-events:none}
.ssm-st{position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(to bottom,rgba(12,12,12,.6),rgba(12,12,12,0));pointer-events:none}
.ssm-bars{position:absolute;left:16px;right:16px;top:6px;display:flex;gap:6px;z-index:3}
.ssm-seg{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.ssm-seg i{display:block;height:100%;width:0;background:#fff}
.ssm-seg.done i{width:100%}
.ssm-seg.run i{animation:ssmGr 4.2s linear forwards}
@keyframes ssmGr{from{width:0}to{width:100%}}
.ssm-logo{position:absolute;left:20px;top:28px;z-index:3;font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.02em;color:#fff}
.ssm-kz{position:absolute;right:16px;top:84px;width:78px!important;height:auto!important;z-index:3;animation:ssmFl 3s ease-in-out infinite alternate}
@keyframes ssmFl{from{transform:translateY(-6px) rotate(-6deg)}to{transform:translateY(6px) rotate(4deg)}}
.ssm-tz{position:absolute;top:120px;bottom:48%;width:50%;border:0!important;padding:0!important;margin:0!important;background:transparent!important;box-shadow:none!important;z-index:2;-webkit-tap-highlight-color:transparent;cursor:pointer}
.ssm-prev{left:0}.ssm-next{right:0}
.ssm-bottom{position:absolute;left:20px;right:20px;bottom:38px;z-index:3}
.ssm-title{font-family:"SSStaat",sans-serif;font-weight:400;font-size:min(96px,24.6vw);line-height:.86;color:#ff5b2d;margin:0 0 14px}
.ssm-tag{font-weight:600;font-size:13px;letter-spacing:.12em;line-height:1.7;text-transform:uppercase;margin:0 0 18px;color:#fff}
.ssm-cw{display:flex;gap:10px}
.ssm-cta{flex:1;display:flex;align-items:center;justify-content:center;height:52px;border:1.5px solid #fff;color:#fff!important;text-decoration:none!important;font-weight:700;font-size:15px;letter-spacing:.04em}
.ssm-cta.pri{background:#ff5b2d;border-color:#ff5b2d}
}
@media (max-width:767px) and (max-height:700px){.ssm-title{font-size:min(76px,20vw);margin-bottom:10px}.ssm-tag{margin-bottom:12px}.ssm-bottom{bottom:36px}.ssm-kz{width:62px!important}}
@media (max-width:767px) and (max-height:620px){.ssm-title{font-size:min(62px,17vw)}.ssm-tag{font-size:12px;margin-bottom:10px}.ssm-kz{width:52px!important;top:78px}}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.ssm-sl.act img,.ssm-kz{animation:none!important}}


.ss-hero-labels span{position:absolute;bottom:92px;z-index:20;font-family:"Manrope",sans-serif;font-size:11px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:#121516;opacity:.72;line-height:1;pointer-events:none;white-space:nowrap}
.ss-hero-labels .l{left:48px}.ss-hero-labels .r{right:48px}
@media(max-width:1024px){.ss-hero-labels span{bottom:40px}.ss-hero-labels .l{left:28px}.ss-hero-labels .r{right:28px}}
@media(max-width:767px){.ss-hero-labels{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px 6px}.ss-hero-labels span{position:static;font-size:10px;letter-spacing:1.8px}}


.sshc{position:relative;height:560px;max-width:520px;margin:0 auto}
.sshc img{position:absolute;object-fit:cover;border-radius:4px;display:block;animation:sshcIn .65s cubic-bezier(.2,.7,.2,1) both}
.sshc .sshc-1{left:0;top:0;width:68%;height:90%}
.sshc .sshc-2{right:0;bottom:0;width:46%;height:60%;box-shadow:0 30px 60px rgba(0,0,0,.25);animation-delay:.15s}
@keyframes sshcIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:1024px){.sshc{height:480px}}
@media(max-width:767px){.sshc{height:400px;max-width:100%}}
@media(prefers-reduced-motion:reduce){.sshc img{animation:none}}


.ss-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:320px;gap:18px;margin-top:50px}
.ss-bento .t1{grid-column:1;grid-row:1 / span 2}.ss-bento .t4{grid-column:2 / span 2}.ss-bento .t6{grid-column:2 / span 2}
.ss-tile{position:relative;display:block;overflow:hidden;border-radius:4px;background:#121516;text-decoration:none !important}
.ss-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(0%);transform:scale(1.001);transition:filter .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ss-tile.t6{background:linear-gradient(180deg,#F96701 0%,#E85A01 50%,#DC4600 100%)}
.ss-tile.t6 img{object-fit:cover;object-position:center 55%}
.ss-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%);transition:opacity .6s ease}
.ss-cap{position:absolute;left:26px;right:26px;bottom:22px;color:#fff;z-index:2}
.ss-no{display:block;font-family:"Manrope",sans-serif;font-size:11px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;opacity:.85;margin-bottom:8px}
.ss-bento h3.ss-title{margin:0 !important;padding:0;color:#fff !important;font-size:24px;line-height:1.2;font-weight:700}
.ss-desc{display:block;font-size:15px;line-height:1.5;max-width:420px;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .6s ease,margin .6s ease}
.ss-tile:hover img,.ss-tile:focus-visible img{filter:grayscale(90%) contrast(1.05);transform:scale(1.045)}
.ss-tile.t6:hover img{transform:scale(1.045)}
.ss-tile:hover .ss-desc,.ss-tile:focus-visible .ss-desc{max-height:80px;opacity:.92;margin-top:8px}
@media(hover:none){.ss-tile img{filter:none}.ss-desc{max-height:none;opacity:.92;margin-top:8px}}
@media(max-width:1024px){.ss-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:300px}.ss-bento .t1{grid-column:1;grid-row:1 / span 2}.ss-bento .t4,.ss-bento .t6{grid-column:1 / span 2}}
@media(max-width:767px){.ss-bento{grid-template-columns:1fr;grid-auto-rows:360px;gap:14px;margin-top:34px}.ss-bento .t1{grid-row:span 1;grid-column:1}.ss-bento .t1{grid-auto-rows:460px}.ss-bento .t4,.ss-bento .t6{grid-column:1}.ss-cap{left:20px;right:20px;bottom:18px}.ss-bento h3.ss-title{font-size:21px}}

/* ---------- Vorlage Startseite (front-page.php): Abschnitte ohne Elementor, Maße 1:1 aus der Live-Seite (30.09.2026) ---------- */
.ss-start { position: relative; }
:is(.ss-start, .ss-ue) .ss-s { position: relative; }
:is(.ss-start, .ss-ue) .ss-box { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; max-width: 1140px; margin: 0 auto; padding: 10px; }
:is(.ss-start, .ss-ue) .ss-box > * { width: 100%; }
:is(.ss-start, .ss-ue) .ss-box > :where(p, h1, h2, h3, figure, .wp-block-group) { margin-top: 0; margin-bottom: 0; }
.ss-start .ss-reihe { position: relative; display: flex; width: 100%; margin: 0 auto; }
.ss-start .ss-spalte { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; min-height: 1px; }
.ss-start .ss-spalte > * { width: 100%; margin-top: 0; }
.ss-start .ss-spalte > *:not(:last-child) { margin-bottom: 20px; }
.ss-start p { margin: 0 0 18px; }
:is(.ss-start, .ss-ue) .ss-text > p:last-child, .ss-start .ss-intro > p:last-child { margin-bottom: 0; }
.ss-start h1, .ss-start h2, .ss-start h3 { color: #000; }

/* Kopf eines Abschnitts: Dachzeile, Überschrift, Einleitung (zentriert, 740 px) */
.ss-start .ss-eyebrow { padding: 0 0 10px; font-family: "Roboto Slab", sans-serif; font-size: 19px; font-weight: 400; line-height: 19px; color: #000; text-align: center; margin: 0; }
.ss-start .ss-titel { width: 740px; max-width: 740px; margin: 0 0 14px; padding: 0 0 15px; font-size: 48px; line-height: 48px; text-align: center; color: #000; }
.ss-start .ss-intro { width: 740px; max-width: 740px; align-self: flex-start; text-align: center; }
.ss-start .ss-intro > p { max-width: 720px; margin-left: auto; margin-right: auto; }
.ss-start .ss-intro a { text-decoration: underline; text-underline-offset: 3px; }

/* 2 Einleitung mit H1 */
.ss-start .ss-s-intro { margin: 90px 0; }
/* 3 LinkedIn-Aktion */
.ss-start .ss-s-aktion { padding: 80px 0; background-color: transparent; background-image: radial-gradient(at center center, #242424 11%, #111010 40%); }
.ss-start .ss-s-aktion > .ss-box { max-width: none; }
.ss-start .ss-s-aktion .ss-reihe { max-width: 1140px; align-items: center; }
.ss-start .ss-s-aktion .ss-spalte--50 { width: 50%; align-content: center; align-items: center; }
.ss-start .ss-aktion-titel { margin: 0 0 23px !important; font-size: 18px; line-height: 18px; color: #fff; }
.ss-start .ss-s-aktion .ss-spalte--50 > p:not(.ss-aktion-titel) { color: #fff; margin: 0; }
/* 4 Über mich */
.ss-start .ss-s-ueber { padding: 80px 0; background-color: #fff; }
.ss-start .ss-s-ueber > .ss-box { max-width: none; }
.ss-start .ss-s-ueber .ss-reihe { max-width: 1180px; align-items: stretch; }
.ss-start .ss-spalte--collage { width: 51.019%; padding: 30px; align-content: center; align-items: center; }
.ss-start .ss-spalte--ueber { width: 48%; padding: 90px; align-content: center; align-items: center; }
.ss-start .ss-ueber-titel { font-family: "Roboto Slab", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2em; color: #000; }
/* 5 Warum */
.ss-start .ss-s-warum, .ss-start .ss-s-ablauf, .ss-start .ss-s-leistungen, .ss-start .ss-s-studio, .ss-start .ss-s-referenzen, .ss-start .ss-s-faq { margin: 60px 0; }
.ss-start .ss-reihe--karten { margin-top: 40px; max-width: 1140px; }
.ss-start .ss-karte { width: 33.333%; padding: 24px; border-left: 3px solid #e05a2b; }
.ss-start .ss-karte-titel, .ss-start .ss-schritt-titel { font-size: 20px; line-height: 1.3em; color: #121516; text-align: start; }
.ss-start .ss-karte .ss-text, .ss-start .ss-schritt .ss-text { padding-top: 10px; }
/* 6 Ablauf */
.ss-start .ss-ablauf-bild { margin: 40px 0 50px; text-align: center; }
.ss-start .ss-ablauf-bild img { display: inline-block; width: 100%; max-width: 1200px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; vertical-align: middle; }
.ss-start .ss-reihe--schritte { max-width: 900px; margin-top: 20px; }
.ss-start .ss-reihe--schritte.ss-reihe--erste { margin-top: 40px; }
.ss-start .ss-schritt { width: 50%; padding: 10px 30px; }
.ss-start .ss-nummer { margin: 0; font-size: 44px; font-weight: 700; line-height: 44px; color: #e05a2b; text-align: start; }
.ss-start .ss-spalte > .ss-nummer:not(:last-child) { margin-bottom: 20px; }
/* Button "Business Fotoshooting anfragen" (Seiten-CSS der Startseite) */
.ss-start .ss-cta-inline { text-align: center; margin-top: 60px; }
.ss-start .ss-cta-inline a { display: inline-block; padding: 16px 38px; background: #121516; color: #fff !important; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; border-radius: 8px; text-decoration: none !important; box-shadow: 0 0 22px 0 rgba(240, 98, 56, .35); transition: box-shadow .2s ease-out, transform .2s ease-out; border-bottom: 0 !important; background-image: none !important; }
.ss-start .ss-cta-inline a:hover, .ss-start .ss-cta-inline a:focus-visible { box-shadow: 0 0 38px 4px rgba(240, 98, 56, .7); transform: translateY(-2px); }
.ss-start .ss-cta-inline a:hover, .ss-start .ss-cta-inline a:focus, .ss-start .ss-cta-inline a:active { text-decoration: none !important; color: #fff !important; }
/* 8 Studio / Angebot */
.ss-start .ss-s-studio .ss-reihe { max-width: 1140px; }
.ss-start .ss-spalte--studio { width: 50%; padding: 10px 20px; }
.ss-start .ss-eyebrow--links { text-align: start; }
.ss-start .ss-titel-klein { margin: 8px 0 22px; font-size: 30px; line-height: 1.2em; color: #121516; text-align: start; }
.ss-start .ss-spalte > .ss-titel-klein:not(:last-child) { margin-bottom: 42px; }
/* 9 Bilderleiste */
.ss-start .ss-s-leiste { margin: 70px 0 0; }
.ss-start .ss-s-leiste .ss-reihe { max-width: 1600px; }
.ss-start .ss-kachel { width: 25%; padding: 40px; background-color: #fff; border: 1px solid #e3e3e3; min-height: 562px; }
.ss-start .ss-kachel::before { content: ""; position: absolute; inset: 0; background-position: top center; background-size: cover; opacity: 1; }
/* Bilderleiste: Hintergrundbilder erst kurz vor dem Hereinscrollen laden (Klasse ss-bilder per einblenden.js), damit sie am Handy nicht mit dem Hero-Bild um die Leitung konkurrieren */
.ss-start .ss-s-leiste.ss-bilder .ss-kachel::before { background-image: var(--ss-bild); }
.ss-start .ss-kachel--1 { --ss-bild: url("/wp-content/uploads/2025/05/Christine-Lagarde-EZB-Business-Portrait-Fotograf-Frankfurt-Sebastian-Schueler_9-1536x1024.jpg"); }
.ss-start .ss-kachel--2 { --ss-bild: url("/wp-content/uploads/2024/08/Business-Portrait-Fotograf-Frankfurt-Sebastian-Schueler-Foto-33-1023x1536.jpg"); }
.ss-start .ss-kachel--3 { --ss-bild: url("/wp-content/uploads/2024/08/Business-Portrait-Fotograf-Frankfurt-Sebastian-Schueler-Foto-117-1-1229x1536.jpg"); }
.ss-start .ss-kachel--4 { --ss-bild: url("/wp-content/uploads/2024/08/Business-Portrait-Fotograf-Frankfurt-Sebastian-Schueler-Foto-42-1024x1536.jpg"); }
.ss-start .ss-kachel-text { position: absolute !important; left: 16px; bottom: 14px; z-index: 3; width: auto !important; margin: 0 !important; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .5px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
/* 10 Referenzen */
.ss-start .ss-trustindex { margin-top: 30px !important; min-height: 0; }
/* 11 Kundenlogos */
.ss-start .ss-s-logos { background-color: #121516; padding: 20px 20px; }
:is(.ss-start, .ss-ue) .ss-logos { display: flex; flex-direction: column; background-color: #121516; }
:is(.ss-start, .ss-ue) .ss-logos__raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; width: 100%; max-width: 960px; margin: 30px auto 0; padding-bottom: 60px; box-sizing: content-box; }
/* Savills-Logo ist als einziges schwarz auf weißem Quadrat: wie die anderen weiß auf dem dunklen Grund darstellen (Punkt 6) */
:is(.ss-start, .ss-ue) .ss-logos img[src*="/savils_1.svg"] { filter: invert(1); mix-blend-mode: lighten; transform: translateY(-21%); } /* Schriftzug sitzt im Quadrat unten, daher mittig gerückt */
:is(.ss-start, .ss-ue) .ss-logo { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
:is(.ss-start, .ss-ue) .ss-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(.ss-start, .ss-ue) .client-schueler a:hover { opacity: .5; transition: opacity .5s ease 0s; }
/* 12 FAQ (natives details/summary statt Elementor-Toggle) */
.ss-start .ss-faq-liste { width: 100%; max-width: 860px; margin: 30px auto 0 !important; }
.ss-start .ss-faq { margin: 0; border: 0; }
.ss-start .ss-faq > summary { display: block; list-style: none; cursor: pointer; padding: 18px 0; border-bottom: 1px solid #e3e3e3; text-align: left; outline: none; }
.ss-start .ss-faq > summary::-webkit-details-marker { display: none; }
.ss-start .ss-faq__frage { margin: 0; font-size: 19px; line-height: 19px; font-weight: 700; color: #121516; }
.ss-start .ss-faq__icon { display: inline-block; float: left; width: 1em; text-align: left; color: #121516; }
.ss-start .ss-faq__icon svg { width: auto; height: 1em; fill: currentColor; vertical-align: -0.125em; }
.ss-start .ss-faq__icon .zu { display: none; }
.ss-start .ss-faq[open] .ss-faq__icon .auf { display: none; }
.ss-start .ss-faq[open] .ss-faq__icon .zu { display: inline; }
.ss-start .ss-faq[open] .ss-faq__frage, .ss-start .ss-faq[open] .ss-faq__icon { color: #e05a2b; }
.ss-start .ss-faq > summary:focus-visible { outline: 2px solid #e05a2b; outline-offset: 2px; }
.ss-start .ss-faq > p, .ss-start .ss-faq > .ss-faq__antwort { text-align: left; }
.ss-start .ss-faq__antwort { padding: 10px 0 20px; border: 0; }
.ss-start .ss-faq__antwort > p:last-child { margin-bottom: 0; }
.ss-start .ss-faq-link { margin-top: 20px !important; text-align: center; }
.ss-start .ss-faq-link p { margin: 0; }
/* 13 Zitat */
.ss-start .ss-s-zitat { padding: 80px 0; background-color: #fff; }
.ss-start .ss-s-zitat .ss-reihe { max-width: 1140px; }
.ss-start .ss-s-zitat .ss-reihe::before { content: ""; position: absolute; inset: 0; background-image: url("/wp-content/uploads/2024/08/quote.svg"); background-position: top center; background-repeat: no-repeat; opacity: 1; mix-blend-mode: multiply; filter: brightness(98%) contrast(100%) saturate(100%) blur(0) hue-rotate(0deg); }
.ss-start .ss-spalte--rand { width: 25%; }
.ss-start .ss-spalte--zitat { width: 49.332%; padding: 10px; }
.ss-start .ss-zitat { margin: 0; padding: 4px 0 4px 4px; border: 0; }
.ss-start .ss-zitat p { margin: 0; font-size: 62px; font-weight: 700; line-height: 64px; color: #1b1b1b; }
.ss-start .ss-zitat cite { display: block; margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 28.8px; font-style: normal; color: #1b1b1b; }
/* 14 Abschluss */
:is(.ss-start, .ss-ue) .ss-s-abschluss { padding: 80px 0; background-color: transparent; background-image: radial-gradient(at center center, #242424 11%, #111010 40%); }
:is(.ss-start, .ss-ue) .ss-s-abschluss > .ss-box { max-width: 740px; }
:is(.ss-start, .ss-ue) .ss-abschluss-titel { margin-bottom: 3px !important; text-align: center; color: #fff !important; }
:is(.ss-start, .ss-ue) .ss-s-abschluss .ss-text { padding: 10px 10px 0; margin-bottom: 20px !important; text-align: center; color: #fff; }
:is(.ss-start, .ss-ue) .ss-s-abschluss .ss-text > p { max-width: 720px; margin-left: auto; margin-right: auto; }
:is(.ss-start, .ss-ue) .ss-s-abschluss .cta-wrapper { margin: 30px 10px 10px; }

/* CTA-Knopf mit Leuchten (heute Custom-CSS "basic") */
.cta-wrapper { justify-content: center; display: flex; }
.cta-wrapper .cta-button { margin-top: 30px; display: inline-flex; justify-content: center; background: #fff; padding: 2% 4%; text-align: center; align-items: center; border-radius: 8px; margin: auto; animation: ssGlow 2.4s ease-out infinite; }
@keyframes ssGlow { 0% { box-shadow: 0 0 0 0 #fff; } 50% { box-shadow: 0 0 28px 0 #fff; } }
.cta-wrapper .cta-button a { color: #000; }
.cta-wrapper .cta-button a:hover { text-decoration: none !important; }
@media (prefers-reduced-motion: reduce) { .cta-wrapper .cta-button { animation: none; } }

/* Tablet */
@media (max-width: 1024px) {
	.ss-start .ss-s-intro > .ss-box, .ss-start .ss-s-warum > .ss-box, .ss-start .ss-s-ablauf > .ss-box, .ss-start .ss-s-leistungen > .ss-box, .ss-start .ss-s-studio > .ss-box, .ss-start .ss-s-referenzen > .ss-box, .ss-start .ss-s-faq > .ss-box { max-width: 640px; }
	.ss-start .ss-s-aktion, :is(.ss-start, .ss-ue) .ss-s-abschluss { background-image: radial-gradient(at center center, #242424 77%, #111010 0%); }
	.ss-start .ss-s-ueber { padding: 0; }
	.ss-start .ss-s-ueber .ss-reihe { max-width: 1000px; }
	.ss-start .ss-kachel { margin: 0; }
	:is(.ss-start, .ss-ue) .ss-logos { padding: 9% 5%; }
	:is(.ss-start, .ss-ue) .ss-logos__raster { margin-top: 35px; }
}
/* Logo-Raster: Elementor-Galerie schaltet erst unter 1024 bzw. 767 px um */
@media (max-width: 1023px) { :is(.ss-start, .ss-ue) .ss-logos__raster { grid-template-columns: repeat(4, 1fr); gap: 30px; } }
/* 1025 - 1199 px: GT3-Boxbreite 1018 px wie heute (Inhalt 998 px) */
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
	.ss-start .ss-s-intro > .ss-box, .ss-start .ss-s-warum > .ss-box, .ss-start .ss-s-ablauf > .ss-box, .ss-start .ss-s-leistungen > .ss-box, .ss-start .ss-s-studio > .ss-box, .ss-start .ss-s-referenzen > .ss-box, .ss-start .ss-s-faq > .ss-box { max-width: 1018px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.ss-start .ss-spalte--collage, .ss-start .ss-spalte--ueber { width: 50%; }
	.ss-start .ss-kachel { width: 50%; }
	.ss-start .ss-s-leiste .ss-reihe { flex-wrap: wrap; }
	.ss-start .ss-spalte--rand { width: 10%; }
	.ss-start .ss-spalte--zitat { width: 80%; }
}
/* Handy */
@media (max-width: 767px) {
	.ss-start .ss-reihe { flex-wrap: wrap; }
	.ss-start .ss-spalte { width: 100% !important; }
	.ss-start .ss-s-intro { margin: 60px 0; padding: 0 15px; }
	.ss-start .ss-s-warum, .ss-start .ss-s-ablauf, .ss-start .ss-s-leistungen, .ss-start .ss-s-studio, .ss-start .ss-s-referenzen, .ss-start .ss-s-faq { margin: 40px 0; padding: 0 15px; }
	.ss-start .ss-eyebrow { text-align: start; font-size: 16px; line-height: 24px; }
	.ss-start .ss-titel { margin-bottom: 18px; text-align: start; font-size: 19px; line-height: 26px; }
	.ss-start .ss-intro { text-align: start; font-size: 17px; }
	.ss-start .ss-s-aktion .ss-reihe { padding: 0 16px; }
	:is(.ss-start, .ss-ue) .ss-abschluss-titel { font-size: 24px; line-height: 28px; }
	.ss-start .ss-aktion-titel { font-size: 24px; line-height: 28px; }
	.ss-start .ss-s-aktion .ss-spalte--50 > p:not(.ss-aktion-titel) { margin-bottom: 22px; }
	.ss-start .ss-s-ueber { margin: 20px 0; padding: 0; }
	.ss-start .ss-s-ueber .ss-reihe { max-width: 600px; }
	.ss-start .ss-spalte--ueber { padding: 45px 30px 30px; }
	.ss-start .ss-titel-klein { font-size: 26px; }
	.ss-start .ss-s-leiste { margin: 40px 0 0; }
	.ss-start .ss-kachel { width: 50% !important; min-height: 322px; }
	:is(.ss-start, .ss-ue) .ss-logos { padding: 13.5% 5%; }
	.ss-start .ss-zitat p { font-size: 39px; line-height: 48px; }
	.ss-start .ss-ablauf-bild img { aspect-ratio: 4 / 3; }
}
/* Abschluss-Text: GT3-Boxbreiten wie heute (Handy-Stufen) */
@media only screen and (max-width: 767px) { :is(.ss-start, .ss-ue) .ss-s-abschluss .ss-text { max-width: 580px; margin-left: auto; margin-right: auto; } :is(.ss-start, .ss-ue) .ss-s-abschluss .cta-wrapper { max-width: 560px; margin-left: auto; margin-right: auto; } }
@media only screen and (max-width: 599px) { :is(.ss-start, .ss-ue) .ss-s-abschluss .ss-text { max-width: 440px; } :is(.ss-start, .ss-ue) .ss-s-abschluss .cta-wrapper { max-width: 420px; } }
@media only screen and (max-width: 479px) { :is(.ss-start, .ss-ue) .ss-s-abschluss .ss-text { max-width: 340px; } :is(.ss-start, .ss-ue) .ss-s-abschluss .cta-wrapper { max-width: 320px; } }
@media only screen and (min-width: 390px) and (max-width: 480px) { :is(.ss-start, .ss-ue) .ss-s-abschluss .ss-text { max-width: 370px; } :is(.ss-start, .ss-ue) .ss-s-abschluss .cta-wrapper { max-width: 350px; } }
@media (max-width: 766px) { :is(.ss-start, .ss-ue) .ss-logos__raster { grid-template-columns: repeat(3, 1fr); gap: 15px; } }
/* Handy-Hero: Tippzonen zum Blättern wie heute 56 px hoch (alte GT3-Grundregel für Knöpfe) */
.ss-start #ssm .ssm-tz { height: 56px; line-height: 23px; }
/* Hero-Bereich: wie heute 20 px Abstand unter dem Hero, Labels über dem Hero (ab 768 px) */
.ss-start .ss-hero-bereich { position: relative; display: flow-root; }
.ss-start .ss-hero-bereich > #ssh, .ss-start .ss-hero-bereich > #ssm { margin-bottom: 20px; }
.ss-start .ss-hero-labels-wrap { position: static; margin: 0; }
@media (min-width: 768px) { .ss-start .ss-hero-labels-wrap { position: absolute; inset: 0; pointer-events: none; } }
/* Parallax der dunklen Abschnitte (heute GT3 "gt3_parallax": fester Hintergrund, am Rechner mit 0,3 verschoben) */
:is(.ss-start, .ss-ue) .ss-parallax { background-attachment: fixed; background-size: cover; }
/* Über mich: auf Tablet und Handy Reihenfolge umgekehrt (wie heute "Spalten umkehren"): Text zuerst */
@media (max-width: 1024px) { .ss-start .ss-spalte--collage { order: 10; } }
/* Standardbreiten "boxed" wie heute im GT3-Theme (responsive.css), für Abschnitte ohne eigene Breite */
@media only screen and (max-width: 1199px) { .ss-start .ss-s-zitat > .ss-box, .ss-start .ss-s-zitat .ss-reihe, .ss-start .ss-s-aktion .ss-reihe, .ss-start .ss-s-studio .ss-reihe, .ss-start .ss-reihe--karten { max-width: 1018px; } }
@media only screen and (max-width: 1023px) { .ss-start .ss-s-zitat > .ss-box, .ss-start .ss-s-zitat .ss-reihe, .ss-start .ss-s-aktion .ss-reihe, .ss-start .ss-s-studio .ss-reihe, .ss-start .ss-reihe--karten { max-width: 760px; } }
@media only screen and (max-width: 767px) { .ss-start .ss-s-zitat > .ss-box, .ss-start .ss-s-zitat .ss-reihe, .ss-start .ss-s-aktion .ss-reihe, .ss-start .ss-s-studio .ss-reihe, .ss-start .ss-reihe--karten { max-width: 580px; } }
@media only screen and (max-width: 599px) { .ss-start .ss-s-zitat > .ss-box, .ss-start .ss-s-zitat .ss-reihe, .ss-start .ss-s-aktion .ss-reihe, .ss-start .ss-s-studio .ss-reihe, .ss-start .ss-reihe--karten { max-width: 440px; } }
@media only screen and (max-width: 479px) { .ss-start .ss-s-zitat > .ss-box, .ss-start .ss-s-zitat .ss-reihe, .ss-start .ss-s-aktion .ss-reihe, .ss-start .ss-s-studio .ss-reihe, .ss-start .ss-reihe--karten { max-width: 340px; } }
@media only screen and (min-width: 390px) and (max-width: 480px) { .ss-start .ss-s-zitat > .ss-box, .ss-start .ss-s-zitat .ss-reihe, .ss-start .ss-s-aktion .ss-reihe, .ss-start .ss-s-studio .ss-reihe, .ss-start .ss-reihe--karten { max-width: 370px; } }

/* ---------- Vorlage Portfolio-Übersicht (vorlagen/uebersicht.php): Abschnitte ohne Elementor, Maße 1:1 aus der Live-Seite (01.10.2026) ---------- */
.ss-ue { position: relative; }
.ss-ue .ss-ue-intro > p:last-child { margin-bottom: 0; }
/* Überschriften in Texten übernehmen Schrift, Stärke und Farbe des Textes (heute GT3-Klassen elementor-element-custom_*) */
.ss-ue .ss-ue-intro :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; font-weight: inherit; color: inherit; }
.ss-ue .ss-ue-karte__text :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; font-weight: inherit; color: inherit; font-size: inherit; line-height: inherit; }
/* Kopf und Textabschnitte: Dachzeile, Überschrift (740 px), Einleitung (740 px), zentriert */
.ss-ue .ss-ue-kopf { margin: 30px 0 50px; }
.ss-ue .ss-ue-text { margin: 80px 0 50px; }
.ss-ue .ss-ue-dach { padding: 0 0 10px; font-family: "Roboto Slab", sans-serif; font-size: 19px; font-weight: 400; text-align: center; }
.ss-ue p.ss-ue-dach { line-height: 19px; color: #000; }
.ss-ue .ss-box > .ss-ue-titel { width: 740px; max-width: 100%; padding: 0 0 15px; font-size: 48px; line-height: 48px; text-align: center; color: inherit; }
.ss-ue .ss-box > .ss-ue-intro { width: 740px; max-width: 100%; align-self: flex-start; text-align: center; }
/* Portfolio-Raster (heute GT3-Widget "Portfolio", Raster 3 Spalten, 20 px Abstand, Bilder 4:5) */
.ss-ue .ss-ue-raster { display: flow-root; margin: 0 0 60px; }
.ss-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px; }
.ss-raster__eintrag { position: relative; min-width: 0; }
.ss-raster__link { position: relative; display: block; overflow: hidden; text-decoration: none !important; }
.ss-raster__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.ss-raster__bild img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: all .4s; }
.ss-raster__text { position: absolute; right: 0; bottom: -1px; left: 0; z-index: 2; padding: 23px 0; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.ss-raster__text::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: #fff; opacity: 0; transition: opacity .2s .1s; }
.ss-raster__link:hover .ss-raster__text { opacity: 1; transform: translateY(0); }
.ss-raster__link:hover .ss-raster__text::before { opacity: 1; transition: opacity .3s; }
.ss-raster__titel { margin: 0; font-size: 20px; line-height: 28px; color: #181b31; }
.ss-raster__kategorien { font-size: 14px; line-height: 1.2; color: #000; }
/* Touch-Geräte: Titel dauerhaft im Bild (heute Zusätzliches CSS, "Variante A1 leise") */
@media (hover: none) {
	.ss-raster__text { opacity: 1; transform: none; top: auto; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 70px 22px 18px; text-align: left; background: linear-gradient(to top, rgba(17, 18, 20, .55) 0%, rgba(17, 18, 20, .18) 60%, rgba(17, 18, 20, 0) 100%); }
	.ss-raster__text::before, .ss-raster__kategorien { display: none; }
	.ss-raster__titel { color: rgba(255, 255, 255, .86); font-size: 19px; font-weight: 400; line-height: 1.25; letter-spacing: .4px; text-align: left; margin: 0; }
	.ss-raster__titel::before { content: ""; display: block; width: 22px; height: 1px; background: rgba(255, 255, 255, .55); margin: 0 0 9px; }
}
/* Karten (heute Elementor-Container: 30 % breit, 55 px Abstand, Box max. 1668 px) */
.ss-ue .ss-ue-karten { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 55px; margin: 0 0 4%; padding: 0 max(4%, calc((100% - 1668px) / 2)); }
.ss-ue .ss-ue-karte { width: 30%; padding: 3%; background-color: #fff; border: 1px solid #e2e2e2; border-radius: 12px; transition: background 1s, border .3s, box-shadow .3s, transform .4s; }
.ss-ue .ss-ue-karte:hover { box-shadow: 1px 4px 35px 0 rgba(0, 0, 0, .04); }
/* Karte als Spalte wie der Elementor-Container (am Handy mit Umbruch: Höhe der Überschrift wie heute) */
.ss-ue .ss-ue-karte { display: flex; flex-direction: column; flex-wrap: nowrap; }
.ss-ue .ss-ue-karte > * { flex: 0 1 auto; margin-top: 0; }
.ss-ue .ss-ue-karte__titel { height: 100%; margin: 0; padding: 0 0 6%; font-family: Roboto, sans-serif; font-size: 21px; font-weight: 600; line-height: 29px; letter-spacing: 0; color: inherit; text-align: left; }
.ss-ue .ss-ue-karte__text { margin: 0 0 8%; font-family: Roboto, sans-serif; font-size: 16px; font-weight: 300; line-height: 24px; letter-spacing: 0; text-align: left; }
.ss-ue .ss-ue-karte__text > p { line-height: inherit; }
.ss-ue .ss-ue-karte__text > p:last-child { margin-bottom: 0; }
/* Tablet */
@media (max-width: 1024px) {
	.ss-ue :is(.ss-ue-kopf, .ss-ue-text) > .ss-box { max-width: 640px; }
	.ss-ue .ss-box > .ss-ue-titel { font-size: 36px; line-height: 40px; }
	.ss-ue .ss-ue-raster { margin-bottom: 0; }
	.ss-raster { grid-template-columns: repeat(2, calc((100% + 20px) * .499 - 20px)); } /* GT3: 2 Spalten je 49,9 % */
	.ss-ue .ss-ue-karten { gap: 30px; margin-bottom: 6%; }
	.ss-ue .ss-ue-karte { width: 100%; }
	.ss-ue .ss-ue-karte__titel { padding-bottom: 2%; }
	.ss-ue .ss-ue-karte__text { margin-bottom: 0; font-size: 19px; line-height: 29px; }
}
/* Handy */
@media (max-width: 767px) {
	.ss-ue :is(.ss-ue-kopf, .ss-ue-text) { margin: 0 0 30px; padding: 0 10px; }
	.ss-ue :is(.ss-ue-dach, .ss-box > .ss-ue-titel, .ss-box > .ss-ue-intro) { text-align: left; }
	.ss-ue .ss-box > .ss-ue-titel { font-size: 19px; line-height: 26px; }
	.ss-ue .ss-box > .ss-ue-intro { font-size: 17px; }
	.ss-ue .ss-abschluss-titel { line-height: 1.25; }
	.ss-ue .ss-ue-karten { justify-content: center; margin-bottom: 14%; padding: 0 8%; }
	.ss-ue .ss-ue-karte { flex-wrap: wrap; padding: 7%; }
	.ss-ue .ss-ue-karte__titel { padding-bottom: 10%; }
	.ss-ue .ss-ue-karte__text { margin-bottom: 6%; font-size: 16px; }
}
@media (max-width: 599px) { .ss-raster { grid-template-columns: minmax(0, 1fr); } }

/* Varianten der Übersichtsabschnitte (Einstellungen je Seite wie heute in Elementor) */
.ss-ue .ss-ue-kopf--b { margin: 0 0 30px; }
.ss-ue .ss-ue-dach.ss-ue-dach--b { line-height: 19px; color: inherit; }
@media (min-width: 1025px) { .ss-ue .ss-box > .ss-ue-titel--c { font-size: 40px; line-height: 46px; } }
.ss-ue .ss-ue-raster--b .ss-raster { margin: 0 0 20px; }
/* Business Portraits: Karten mit Inter-Text (heute so eingestellt) */
.ss-ue .ss-ue-karten--b .ss-ue-karte__text { font-family: Inter, sans-serif; color: #5b5755; }
/* Mosaik der Business-Portraits-Übersicht (heute HTML-Widget, Stil unverändert übernommen) */
.ss-ue .ss-ue-ssp > .ss-box { max-width: 1180px; padding: 0 15px; }
.ss-ue .ss-ue-ssp > .ss-box > * { margin: 0; }
.ssp{font-family:Roboto,sans-serif;color:#000}
.ssp *{box-sizing:border-box}
.ssp .ssp-wrap{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
.ssp .ssp-eyebrow{font-family:"Roboto Slab",serif;font-size:19px;line-height:1.35;font-weight:400;letter-spacing:normal;text-transform:none;color:#555;margin:0 0 12px}
.ssp h1{font-size:44px;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0 0 18px;color:#fff}
.ssp h2{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.012em;margin:0 0 14px;color:#181b31}
.ssp p{font-size:17px;line-height:1.6;margin:0 0 14px}
.ssp .ssp-btn{display:inline-block;font-size:15px;letter-spacing:.6px;text-transform:uppercase;text-decoration:none!important;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:2px;padding:12px 24px;line-height:18px;transition:background-color .2s,color .2s,border-color .2s,transform .1s ease-out}
.ssp .ssp-btn:hover{background:#fff;color:#000;border-color:#fff}
.ssp .ssp-btn:active{transform:scale(.98)}
.ssp .ssp-btn.ssp-solid{background:#fff;color:#000;border-color:#fff}
.ssp .ssp-btn.ssp-solid:hover{background:#e4e4e4;border-color:#e4e4e4}
/* Hero */
.ssp .ssp-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#090909;color:#fff;overflow:hidden}
.ssp .ssp-hero-in{max-width:1180px;margin:0 auto;padding:150px 20px 80px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.ssp .ssp-hero .ssp-eyebrow{color:#aaa}
.ssp .ssp-hero p{color:#d6d6d6}
.ssp .ssp-hero .ssp-lead{font-size:18px;color:#e6e6e6}
.ssp .ssp-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ssp .ssp-trust{font-size:14px;color:#bbb;margin:18px 0 0}
.ssp .ssp-hero-cta .ssp-btn:not(.ssp-solid){background:none!important;border:0!important;box-shadow:none;padding:0 0 2px;margin-left:24px;min-height:0;text-transform:none;letter-spacing:normal;font-size:16px;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:5px!important;align-self:center}
.ssp .ssp-trust .ssp-sep{margin:0 8px;color:#666}
.ssp .ssp-hero-txt{animation:sspUp .8s .1s cubic-bezier(.2,.7,.2,1) both}
.ssp .ssp-hero-img{position:relative;height:640px}
.ssp .ssp-hero-img img{position:absolute;object-fit:cover;display:block;animation:sspUp .9s cubic-bezier(.2,.7,.2,1) both}
.ssp .ssp-hero-img .i1{left:0;top:0;width:58%;height:78%;object-position:50% 20%}
.ssp .ssp-hero-img .i2{right:0;top:12%;width:38%;height:46%;animation-delay:.15s}
.ssp .ssp-hero-img .i3{right:0;bottom:0;width:38%;height:38%;animation-delay:.3s}
.ssp .ssp-hero-img .i2,.ssp .ssp-hero-img .i3{box-shadow:0 30px 60px rgba(0,0,0,.45)}
@keyframes sspUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Mosaic */
.ssp .ssp-sec{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:80px 40px}
.ssp .ssp-sec-in{max-width:1600px;margin:0 auto}
.ssp .ssp-head{max-width:720px;margin-bottom:36px}
.ssp .ssp-head p{color:#333}
.ssp .ssp-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.ssp .ssp-tile{position:relative;display:block;overflow:hidden;border-radius:4px;background:#111;aspect-ratio:4/5;text-decoration:none!important;color:#fff;opacity:0;transform:translateY(20px)}
.ssp .ssp-tile.ssp-feat{grid-row:span 2;aspect-ratio:auto}
.ssp .ssp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ssp .ssp-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.7) 100%);transition:opacity .3s}
.ssp .ssp-tile:hover img{transform:scale(1.04)}
.ssp .ssp-tile-txt{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;z-index:2;transform:translateY(6px);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.ssp .ssp-tile:hover .ssp-tile-txt{transform:none}
.ssp .ssp-tile-k{display:block;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#cfcfcf;margin-bottom:6px}
.ssp .ssp-tile-t{display:block;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.ssp .ssp-feat .ssp-tile-t{font-size:30px}
.ssp .ssp-tile-a{position:absolute;right:20px;bottom:22px;z-index:2;width:36px;height:36px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .22s cubic-bezier(.2,.7,.2,1)}
.ssp .ssp-tile:hover .ssp-tile-a{opacity:1;transform:none}
.ssp .ssp-tile-a svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.6}
.ssp .ssp-tile.ssp-cta{background:#090909;display:flex;align-items:flex-end;padding:26px}
.ssp .ssp-tile.ssp-cta:after{display:none}
.ssp .ssp-tile.ssp-cta .ssp-eyebrow{color:#aaa}
.ssp .ssp-tile.ssp-cta h3{font-size:24px;line-height:1.2;font-weight:700;margin:0 0 12px;color:#fff;letter-spacing:-.01em}
.ssp .ssp-tile.ssp-cta p{color:#c8c8c8;font-size:15px;margin-bottom:18px}
.ssp .ssp-grid.ssp-in .ssp-tile{animation:sspUp .6s cubic-bezier(.2,.7,.2,1) forwards}
.ssp .ssp-grid.ssp-in .ssp-tile:nth-child(2){animation-delay:.06s}.ssp .ssp-grid.ssp-in .ssp-tile:nth-child(3){animation-delay:.12s}.ssp .ssp-grid.ssp-in .ssp-tile:nth-child(4){animation-delay:.18s}.ssp .ssp-grid.ssp-in .ssp-tile:nth-child(5){animation-delay:.24s}.ssp .ssp-grid.ssp-in .ssp-tile:nth-child(6){animation-delay:.3s}.ssp .ssp-grid.ssp-in .ssp-tile:nth-child(7){animation-delay:.36s}.ssp .ssp-grid.ssp-in .ssp-tile:nth-child(8){animation-delay:.42s}
@media(max-width:1024px){.ssp h1{font-size:36px}.ssp .ssp-hero-in{gap:36px;padding-top:110px}.ssp .ssp-hero-img{height:520px}.ssp .ssp-grid{grid-template-columns:repeat(2,1fr)}.ssp .ssp-tile.ssp-feat{grid-row:span 1;aspect-ratio:4/5}}
@media(max-width:767px){.ssp h1{font-size:30px}.ssp h2{font-size:26px}.ssp p{font-size:16px}.ssp .ssp-hero-in{grid-template-columns:1fr;gap:28px;padding:44px 20px 48px}.ssp .ssp-hero-img{height:400px;order:-1}.ssp .ssp-hero-cta .ssp-btn{flex:1 1 100%;text-align:center}.ssp .ssp-sec{padding:44px 20px}.ssp .ssp-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}.ssp .ssp-tile-txt{padding:14px}.ssp .ssp-tile-t{font-size:17px}.ssp .ssp-feat .ssp-tile-t{font-size:17px}.ssp .ssp-tile-k{font-size:11px}.ssp .ssp-tile.ssp-feat{grid-column:span 2;aspect-ratio:4/3}.ssp .ssp-tile.ssp-feat img{object-position:50% 25%}.ssp .ssp-tile.ssp-cta{padding:16px;grid-column:span 2;aspect-ratio:auto;min-height:0}.ssp .ssp-tile.ssp-cta h3{font-size:20px}.ssp .ssp-trust .ssp-sep{display:block;height:0;overflow:hidden;margin:0}}
@media(prefers-reduced-motion:reduce){.ssp .ssp-hero-txt,.ssp .ssp-hero-img img,.ssp .ssp-tile{animation:none!important;opacity:1!important;transform:none!important}.ssp .ssp-tile img{transition:none}}
.ssp .ssp-tile.ssp-cta{background:radial-gradient(90% 60% at 80% 8%,rgba(120,140,170,.16) 0%,rgba(9,9,9,0) 70%),#090909!important}
.ssp .ssp-cta > span:not(.ssp-stars):not(.ssp-shoot){position:relative;z-index:2}
.ssp .ssp-stars,.ssp .ssp-stars:before,.ssp .ssp-stars:after{position:absolute;inset:0;pointer-events:none}
.ssp .ssp-stars{background-image:radial-gradient(1.2px 1.2px at 33.4% 13.1%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 64.2% 7.9%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 53.4% 27.5%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 8.5% 37.0%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 6.5% 32.1%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 9.6% 9.1%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 42.9% 58.4%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 14.6% 18.0%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 62.0% 66.5%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 57.2% 29.6%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 94.8% 6.1%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 83.7% 22.4%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 16.6% 10.9%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 32.0% 57.7%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 20.0% 42.0%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 63.1% 28.0%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 54.5% 7.2%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 8.6% 16.8%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 67.0% 31.6%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 32.5% 42.2%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 45.6% 23.1%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 77.7% 49.8%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 25.9% 41.5%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 52.4% 61.6%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 71.6% 22.3%,rgba(255,255,255,0.9) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 95.1% 10.9%,rgba(255,255,255,0.9) 50%,transparent 100%);opacity:.55}
.ssp .ssp-stars:before{content:"";background-image:radial-gradient(1.8px 1.8px at 42.3% 53.7%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 17.3% 35.8%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 6.7% 47.8%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 74.9% 41.4%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 85.3% 24.0%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 68.4% 42.8%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 57.5% 33.6%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 82.0% 66.3%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 47.6% 47.5%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 8.7% 50.0%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 63.8% 69.5%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 80.3% 22.1%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 39.3% 47.8%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 5.1% 33.9%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 18.8% 10.8%,rgba(255,255,255,0.95) 50%,transparent 100%),radial-gradient(1.8px 1.8px at 8.5% 54.5%,rgba(255,255,255,0.95) 50%,transparent 100%);animation:sspTw 4.2s ease-in-out infinite alternate}
.ssp .ssp-stars:after{content:"";background-image:radial-gradient(2.4px 2.4px at 15.2% 17.1%,rgba(255,255,255,1) 50%,transparent 100%),radial-gradient(2.4px 2.4px at 39.7% 52.7%,rgba(255,255,255,1) 50%,transparent 100%),radial-gradient(2.4px 2.4px at 10.6% 28.6%,rgba(255,255,255,1) 50%,transparent 100%),radial-gradient(2.4px 2.4px at 54.6% 53.4%,rgba(255,255,255,1) 50%,transparent 100%),radial-gradient(2.4px 2.4px at 80.0% 52.2%,rgba(255,255,255,1) 50%,transparent 100%),radial-gradient(2.4px 2.4px at 29.2% 26.7%,rgba(255,255,255,1) 50%,transparent 100%),radial-gradient(2.4px 2.4px at 36.7% 53.4%,rgba(255,255,255,1) 50%,transparent 100%),radial-gradient(2.4px 2.4px at 93.0% 11.6%,rgba(255,255,255,1) 50%,transparent 100%);animation:sspTw 6.4s ease-in-out 1.3s infinite alternate}
.ssp .ssp-shoot{position:absolute;top:14%;left:62%;width:90px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85));transform:rotate(-24deg) translateX(0);opacity:0;animation:sspShoot 9s ease-out 2.5s infinite;pointer-events:none}
@keyframes sspTw{0%{opacity:.15}100%{opacity:1}}
@keyframes sspShoot{0%,86%{opacity:0;transform:rotate(-24deg) translateX(0)}88%{opacity:1}96%{opacity:0;transform:rotate(-24deg) translateX(-170px)}100%{opacity:0;transform:rotate(-24deg) translateX(-170px)}}
.ssp .ssp-tile.ssp-cta:hover .ssp-stars:before{animation-duration:2.2s}
@media(prefers-reduced-motion:reduce){.ssp .ssp-stars:before,.ssp .ssp-stars:after{animation:none;opacity:.8}.ssp .ssp-shoot{display:none}}
/* Videos (FPV): YouTube erst nach Einwilligung, Real Cookie Banner zeigt vorher das Vorschaubild */
.ss-ue .ss-ue-videos { display: flex; flex-wrap: wrap; background-color: #121516; }
.ss-ue .ss-ue-video { width: 50%; padding: 30px; }
.ss-ue .ss-ue-video__rahmen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ss-ue .ss-ue-video__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Produktfotografie: Galerie auf dunklem Grund, volle Breite */
.ss-ue .ss-ue-galerie { display: flow-root; padding: 60px 0; background-color: #121516; }
/* Portfolio: dunkler Abschluss mit Knopf */
.ss-ue .ss-ue-cta { padding: 80px 0; background-color: #2d3134; }
.ss-more { text-align: center; padding: 34px 16px 6px; font-family: Roboto, Arial, sans-serif; }
.ss-more span { display: block; font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: #8a8780; margin-bottom: 12px; }
.ss-more a { display: inline-block; font-size: 15px; letter-spacing: .6px; color: #181b31; text-decoration: none; border-bottom: 1px solid rgba(24, 27, 49, .35); padding-bottom: 3px; margin: 4px 14px; transition: border-color .2s; }
.ss-more a:hover { border-color: #181b31; }
.ss-cta-p { text-align: center; }
/* Knopf in der mittleren von drei Spalten (25 / 49,33 / 25 %, heute innerer Elementor-Abschnitt) */
.ss-ue .ss-ue-cta .ss-box > .ss-cta-p { width: 49.33%; margin: 0 25.67% 0 25%; padding: 10px; }
@media (max-width: 767px) { .ss-ue .ss-ue-cta .ss-box > .ss-cta-p { width: 100%; margin: 1px 0; } }
.ss-cta-p a { display: inline-block; padding: 16px 38px; background: #fff; color: #121516 !important; font-family: Roboto, sans-serif; font-size: 18px; border-radius: 8px; text-decoration: none !important; box-shadow: 0 0 22px 0 rgba(240, 98, 56, .35); transition: box-shadow .45s ease, transform .45s ease; }
.ss-cta-p a:hover { box-shadow: 0 0 38px 4px rgba(240, 98, 56, .7); transform: translateY(-2px); }
/* Kundenlogos (Business Portraits) */
.ss-ue .ss-ue-logos { background-color: #121516; }
.ss-ue .ss-ue-logos > .ss-box { max-width: none; padding: 20px; }
.ss-ue .ss-ue-logos__titel { margin: 0 0 20px !important; font-weight: 600; color: #fff; text-align: center; }
@media (max-width: 1024px) {
	.ss-ue .ss-ue-ssp > .ss-box { max-width: 1000px; }
	.ss-ue .ss-ue-text--c { margin: 40px 0; }
	.ss-ue .ss-ue-karten--b .ss-ue-karte { width: 30%; }
	.ss-ue .ss-ue-karten--b .ss-ue-karte__titel { padding-bottom: 10%; }
	.ss-ue .ss-ue-galerie { padding: 0; }
	.ss-ue .ss-ue-karten--b .ss-ue-karte__text { margin-bottom: 15%; font-size: 15px; line-height: 24px; }
}
@media (max-width: 767px) {
	.ss-ue .ss-ue-kopf--b { margin: 60px 0; padding: 0 15px; }
	.ss-ue .ss-ue-text--b { margin: 60px 0; padding: 0 15px; }
	.ss-ue .ss-ue-text--c { margin: 30px 0; }
	.ss-ue .ss-ue-dach.ss-ue-dach--b { font-size: 16px; line-height: 24px; }
	.ss-ue .ss-ue-dach.ss-ue-dach--c { line-height: 29px; }
	.ss-ue .ss-ue-video--leer { padding: 0; min-height: 1px; } /* leere Elementor-Spalte ist heute gestapelt 1 px hoch */
	.ss-ue .ss-ue-karte--handy17 .ss-ue-karte__text { font-size: 17px; }
	.ss-ue .ss-ue-karten--b .ss-ue-karte { width: 100%; padding: 10%; }
	.ss-ue .ss-ue-karten--b :is(.ss-ue-karte__titel, .ss-ue-karte__text) { text-align: center; }
	.ss-ue .ss-ue-karten--b .ss-ue-karte__text { font-size: 14px; }
	.ss-ue .ss-ue-ssp > .ss-box { max-width: 600px; }
	.ss-ue .ss-ue-video { width: 100%; }
}

/* ---------- Vorlage FAQ (vorlagen/faq.php): Fragen als details/summary statt GT3-Akkordeon und Ultimate FAQ ---------- */
.ss-ue .ss-ue-kopf--c { margin: 0 0 30px; }
/* Akkordeon (heute GT3-Widget, 740 px, immer eine Frage offen) */
.ss-faqs .ss-faq-akkordeon { margin: 0 0 60px; }
.ss-faqs .ss-akkordeon-liste { display: flow-root; width: 740px; max-width: 100%; margin: 0 auto; }
.ss-akkordeon { margin: 0; }
.ss-akkordeon > summary { position: relative; display: block; list-style: none; margin: 20px 0 0; padding: 11px 80px 11px 30px; border: 1px solid #dcdfe5; border-radius: 10px; font-family: Roboto, sans-serif; font-size: 21px; font-weight: 600; line-height: 29px; color: #000; cursor: pointer; outline: none; transition: color .3s; }
.ss-akkordeon > summary::-webkit-details-marker { display: none; }
.ss-akkordeon > summary::after { content: ""; position: absolute; right: 33px; top: calc(50% - 8px); display: inline-block; width: 10px; height: 10px; border-top: 2px solid #2d3134; border-left: 2px solid #2d3134; transform: rotate(225deg); }
.ss-akkordeon[open] > summary { padding-top: 25px; border-bottom: 0; border-radius: 10px 10px 0 0; color: #2d3134; cursor: default; }
.ss-akkordeon[open] > summary::after { top: 33px; transform: rotate(45deg); }
.ss-akkordeon > summary:focus-visible { outline: 2px solid #2d3134; outline-offset: 2px; }
.ss-akkordeon__inhalt { padding: 8px 30px 22px; border: 1px solid #dcdfe5; border-top: 0; border-radius: 0 0 10px 10px; font-size: 19px; font-weight: 300; line-height: 29px; }
.ss-akkordeon__inhalt > p { line-height: 1.5; }
.ss-akkordeon__inhalt > :last-child { margin-bottom: 0; }
/* Hinweis-Karten unter dem Akkordeon (heute HTML-Widget, Stil unverändert) */
.ss-faqmore{max-width:740px;margin:0 auto;padding:44px 0 10px;font-family:Roboto,Arial,sans-serif}.ss-faqmore h2{font-size:24px;letter-spacing:-.012em;line-height:1.3;margin:0 0 8px;color:#181b31}.ss-faqmore p{font-size:16px;line-height:1.6;color:#444;margin:0 0 18px}.ss-faqmore a.ss-card{position:relative;display:block;border:1px solid #dcdfe5;border-radius:10px;padding:16px 70px 16px 30px;margin:0 0 12px;text-decoration:none!important;color:#000;transition:border-color .2s,transform .1s ease-out}.ss-faqmore a.ss-card:after{content:"";position:absolute;right:30px;top:50%;width:8px;height:8px;border-top:1.5px solid #000;border-right:1.5px solid #000;transform:translateY(-50%) rotate(45deg);transition:transform .2s cubic-bezier(.2,.7,.2,1)}.ss-faqmore a.ss-card:hover:after{transform:translate(3px,-50%) rotate(45deg)}.ss-faqmore a.ss-card:active{transform:scale(.99)}.ss-faqmore a.ss-card:hover{border-color:#000}.ss-faqmore a.ss-card strong{display:block;font-size:16px;font-weight:600;line-height:1.4;margin-bottom:3px}.ss-faqmore a.ss-card span{font-size:14px;color:#6b6b6b}
/* Dunkler Kopf der ausführlichen FAQ-Seiten (heute Elementor-Container 760 px) */
.ss-faq-kopf { padding: 80px 0; background-color: #242424; }
.ss-faq-kopf__innen, .ss-faq-inhalt__innen { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin: 0 auto; }
.ss-faq-kopf__innen > *, .ss-faq-inhalt__innen > * { margin: 0; }
.ss-faq-kopf__titel { font-family: Roboto, sans-serif; font-size: 40px; font-weight: 500; line-height: 3rem; color: #fff; }
.ss-faq-kopf__unter { font-family: "Roboto Slab", sans-serif; font-size: 19px; font-weight: 300; line-height: 2rem; color: #fff; }
.ss-faq-kopf__text { font-size: 16px; color: #fff; }
.ss-faq-kopf__text p { line-height: 1.5; }
.ss-faq-kopf__text > p:last-child { margin-bottom: 0; }
.ss-faq-kopf__text a { color: #fff; }
.ss-faq-inhalt { padding: 80px 0; }
/* Bildreihe (heute WordPress-Galerie im Elementor-Widget: 4 Spalten, 6 px Abstand) */
.ss-faq-bilder .gallery { display: flex; flex-wrap: wrap; margin: 0; }
.ss-faq-bilder .gallery-item { width: 25%; margin: 10px 0 0; padding: 0 6px 6px 0; text-align: center; }
.ss-faq-bilder .gallery-icon { padding: 0; }
.ss-faq-bilder .gallery-item img { display: block; width: 100%; height: auto; margin: 0 auto; border: 0; }
.ss-faq-bilder .gallery-caption { display: none; }
/* Fragen wie heute Ultimate FAQ: Plus-Zeichen links, Frage als h4, Antwort 40 px eingerückt */
.ss-ufaq-liste { margin-bottom: 46px !important; } /* heute 48 px (Innenrand), der letzte Eintrag bringt 2 px mit */
.ss-ufaq-liste h3 { display: inline-block; margin: 0; }
.ss-ufaq-kategorie { display: flex; } /* wie heute (Ultimate FAQ): Kategorie-Überschrift als Flex-Element, Höhe genau wie die Überschrift */
.ss-ufaq { margin: 2px 0; padding: 2px 0; }
.ss-ufaq > summary { display: flow-root; list-style: none; cursor: pointer; outline: none; }
.ss-ufaq > summary::-webkit-details-marker { display: none; }
.ss-ufaq > summary:focus-visible { outline: 2px solid #181b31; outline-offset: 2px; }
.ss-ufaq__symbol { position: relative; float: left; width: 21px; height: 48px; margin-right: 15px; }
.ss-ufaq__symbol::before, .ss-ufaq__symbol::after { content: ""; position: absolute; background: #000; }
.ss-ufaq__symbol::before { left: 3.75px; top: 23.25px; width: 15.5px; height: 2.25px; }
.ss-ufaq__symbol::after { left: 10.4px; top: 16.75px; width: 2.25px; height: 15.5px; }
.ss-ufaq[open] .ss-ufaq__symbol::after { display: none; }
.ss-ufaq__frage { float: left; max-width: calc(85% - 10px); margin: 5px; font-size: 21px; } /* Frage direkt in summary (h4 in span wäre ungültig), Breite wie heute 85 % inklusive Rand */
.ss-ufaq__antwort { padding: 10px 25px 10px 40px; }
.ss-ufaq__antwort > :last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
	.ss-faqs .ss-faq-akkordeon { margin-bottom: 40px; padding: 0 30px; }
	.ss-faq-kopf__titel { font-size: 34px; }
}
@media (max-width: 767px) {
	.ss-faqs .ss-faq-akkordeon { margin-bottom: 60px; padding: 0 15px; }
	.ss-faq-kopf__titel { font-size: 34px; }
}
@media only screen and (max-width: 810px) { .ss-ufaq__frage { max-width: calc(80% - 10px); } }
@media (max-width: 767px) {
	.ss-ue .ss-ue-kopf--c { margin: 60px 0 30px; padding: 0 15px; }
	.ss-akkordeon > summary { font-size: 18px; line-height: 26px; }
	.ss-akkordeon__inhalt { font-size: 16px; line-height: 24px; }
	.ss-faq-kopf__innen, .ss-faq-inhalt__innen { max-width: none; }
	.ss-faq-kopf__innen > *, .ss-ufaq-liste { margin: 0 15px; }
	.ss-faq-kopf__titel { font-size: 26px; line-height: 1.25em; }
	.ss-faq-kopf__unter { font-size: 20px; letter-spacing: 0; }
}

/* ---------- Listen und Tabellen im Seiteninhalt wie heute (GT3-Grundregeln), für die in Schritt 10 nachgebauten Vorlagen ---------- */
:where(.ss-ue, .ss-ratgeber, .ss-standard) :is(ul, ol) li { margin: 0; padding: 0 0 5px; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) :is(ul, ol) li:last-child { padding-bottom: 0; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) li :is(ul, ol) { margin-bottom: 0; padding-left: 17px; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) ul li { list-style: none; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) ul > li::before { content: ""; display: inline-block; width: .65em; height: .65em; margin: -.25em 10px 0 0; font-size: 8px; vertical-align: middle; background: #000; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) ol { counter-reset: li; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) ol > li { list-style: none; counter-increment: li; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) ol > li::before { content: "." counter(li); display: inline-block; width: auto; margin: 0 .3em 0 0; font-size: inherit; line-height: inherit; font-weight: inherit; text-align: right; direction: rtl; color: #000; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) figcaption { margin-bottom: 18px; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) table { width: 100%; border: 0; border-spacing: 0; border-collapse: collapse; vertical-align: middle; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) :is(td, th) { padding: 5px 10px; text-align: left; }
:where(.ss-ue, .ss-ratgeber, .ss-standard) table :is(tbody, thead, tfoot) tr { border: 1px solid rgba(0, 0, 0, .1); }
:where(.ss-ue, .ss-ratgeber, .ss-standard) table :is(tbody, tfoot) th { border-right: 1px solid rgba(0, 0, 0, .1); }

/* ---------- Vorlagen Ratgeber (Übersicht und Artikel): Kopf wie die FAQ-Seiten, Inhalt 760 px ---------- */
.ss-rg-inhalt { padding: 64px 20px 96px; }
.ss-rg-inhalt__innen { max-width: 760px; margin: 0 auto; }
/* Ratgeber-Übersicht (heute HTML-Widget, Stil unverändert) */
.ssh-rg{max-width:760px;margin:0 auto;font-family:Roboto,Arial,sans-serif;color:#242424}.ssh-rg a.card{display:block;margin:0 0 24px;border:1px solid #ddd;padding:28px 30px;text-decoration:none;color:#242424;transition:border-color .2s}.ssh-rg a.card:hover{border-color:#242424}.ssh-rg .card h2{font-size:24px;font-weight:500;line-height:1.35;margin:0 0 10px}.ssh-rg .card p{font-size:16px;line-height:1.65;margin:0 0 14px;color:#444}.ssh-rg .card span{font-weight:500;text-decoration:underline;text-underline-offset:3px}@media(max-width:767px){.ssh-rg a.card{padding:22px 20px}.ssh-rg .card h2{font-size:21px}}
/* Ratgeber-Artikel (heute HTML-Widget, Stil unverändert; Bildreihen und Tipps aus dem Posing-Artikel) */
.ssr{max-width:760px;margin:0 auto;color:#242424;font-family:Roboto,Arial,sans-serif;font-size:17px;line-height:1.7}
.ssr h2{font-family:Roboto,Arial,sans-serif;font-weight:500;font-size:28px;line-height:1.3;margin:56px 0 16px;color:#242424}
.ssr h3{font-family:Roboto,Arial,sans-serif;font-weight:500;font-size:20px;line-height:1.4;margin:28px 0 8px;color:#242424}
.ssr p{margin:0 0 16px}
.ssr a{color:#242424;text-decoration:underline;text-underline-offset:3px}
.ssr-meta{display:flex;align-items:center;gap:14px;margin:0 0 36px;font-size:15px;color:#555}
.ssr-meta img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 30%;filter:grayscale(1)}
.ssr-short{background:#f4f4f2;border-left:3px solid #242424;padding:24px 28px;margin:0 0 8px}
.ssr-short h2{margin:0 0 12px;font-size:20px}
.ssr-short ul{margin:0;padding-left:20px}
.ssr-short li{margin:0 0 6px}
.ssr-steps{counter-reset:s;list-style:none;padding:0;margin:8px 0 0}
.ssr-steps li{counter-increment:s;position:relative;padding:0 0 18px 52px}
.ssr-steps li:before{content:counter(s);position:absolute;left:0;top:2px;width:34px;height:34px;border:1px solid #242424;border-radius:50%;text-align:center;line-height:32px;font-size:15px}
.ssr-steps strong{display:block;font-weight:500;font-size:18px}
.ssr table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:16px}
.ssr th,.ssr td{text-align:left;padding:12px 10px;border-bottom:1px solid #ddd;vertical-align:top}
.ssr th{font-weight:500}
.ssr-faq details{border-bottom:1px solid #ddd;padding:14px 0}
.ssr-faq summary{cursor:pointer;font-weight:500;font-size:18px;list-style:none;position:relative;padding-right:32px}
.ssr-faq summary::-webkit-details-marker{display:none}
.ssr-faq summary:after{content:"+";position:absolute;right:4px;top:-2px;font-size:24px;font-weight:300}
.ssr-faq details[open] summary:after{content:"\2212"}
.ssr-faq details p{margin:10px 0 0}
.ssr-cta{background:#242424;color:#fff;padding:36px 32px;margin:56px 0 0}
.ssr-cta h2{color:#fff;margin:0 0 10px;font-size:24px}
.ssr-cta p{color:#ddd}
.ssr-cta a.ssr-btn{display:inline-block;background:#fff;color:#242424;text-decoration:none;padding:13px 26px;margin:8px 14px 0 0;font-weight:500;letter-spacing:.3px}
.ssr-cta a.ssr-tel{color:#fff;white-space:nowrap;display:inline-block;margin-top:8px}
@media (max-width:767px){.ssr{font-size:16px}.ssr h2{font-size:23px;margin-top:44px}.ssr-short{padding:20px}.ssr-cta{padding:28px 20px}.ssr th,.ssr td{padding:10px 6px;font-size:15px}}

.ssr figure{margin:0}
.ssr-g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 28px}
.ssr-g1{margin:24px auto 28px;max-width:460px}
.ssr figure img{display:block;width:100%;height:auto}.ssr-g2 figure img{aspect-ratio:4/5;object-fit:cover;object-position:50% 15%}.ssr-g2.ssr-land figure img{aspect-ratio:3/2;object-position:50% 50%}
.ssr figcaption{font-size:14px;line-height:1.5;color:#666;margin-top:8px}
.ssr h3{margin-top:36px}
.ssr-tip{border-left:3px solid #242424;padding:2px 0 2px 18px;margin:18px 0}
@media (max-width:767px){.ssr-g2{gap:10px}.ssr figcaption{font-size:13px}}

/* ---------- Vorlage Standardseite (vorlagen/standard.php): Rechtstexte, Danke-Seite, Kontakt ---------- */
.ss-standard { position: relative; }
.ss-standard > :is(h1, h2, h3, h4, h5, h6) { margin-top: 10px; margin-bottom: 10px; } /* Cookie-Richtlinie (Inhalt direkt aus Real Cookie Banner), wie GT3 #main_content > h* */
.ss-standard > p:empty { display: none; }
.ss-standard > p:last-child { margin-bottom: 0; }
/* Cookie-Tabelle von Real Cookie Banner (gridjs): Feld- und Schaltflächenstil wie heute über die GT3-Grundregeln (niedrige Spezifität, gridjs-Regeln gehen vor) */
.ss-standard .gridjs-search-input { width: 100%; height: 50px; margin-bottom: 10px; font-family: inherit; }
:where(.ss-standard) button { display: inline-block; transition: all 300ms; border-radius: 50px; outline: none; width: auto; height: 56px; cursor: pointer; padding: 10px 30px; line-height: 23px; margin: 0 0 15px 0; font-family: inherit; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0; border: none; background: transparent; color: #181b31; }
/* Textbox (heute Elementor-Container: Innenabstand 10 px, 20 px zwischen Titel und Text, 60 px darunter) */
.ss-standard-box { display: flex; flex-direction: column; gap: 20px; margin: 0 0 60px; padding: 10px max(10px, calc((100% - 1140px) / 2)); }
.ss-standard-box--740 { padding: 10px max(10px, calc((100% - 740px) / 2)); }
.ss-standard-box--breit { margin-top: 30px; }
.ss-standard-box > * { margin: 0; }
.ss-standard__text > :last-child { margin-bottom: 0; }
.ss-standard :is(.ss-standard__text, .ss-danke__text, .ss-kontakt-info__text) :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; font-weight: inherit; color: inherit; }
.ss-standard-box--agb .ss-standard__titel { font-size: 24px; }
/* Danke-Seite: mittlere von drei Spalten (25 / 49,33 / 25 %) in der GT3-Boxbreite */
.ss-danke { margin-top: -20px; padding: 60px 0; }
.ss-danke__mitte { width: 1120px; max-width: 100%; margin: 0 auto; padding: 20px 0; box-sizing: border-box; }
.ss-danke__mitte > * { margin: 0 calc(25.67% + 10px) 0 calc(25% + 10px); } /* Prozent bezogen auf die Containerbreite wie die Elementor-Spalten 25 / 49,33 / 25,67 */
.ss-danke__titel { margin-bottom: 20px !important; color: inherit; }
.ss-danke__text > :last-child { margin-bottom: 0; }
@media (max-width: 1199px) { .ss-danke__mitte { width: 998px; } }
@media (max-width: 1024px) { .ss-danke__mitte { padding: 21px 0; } .ss-danke__mitte > * { margin-left: calc(10% + 10px); margin-right: calc(10% + 10px); } }
@media (max-width: 1023px) { .ss-danke__mitte { width: 740px; } }
@media (max-width: 767px) {
	.ss-standard-box--740, .ss-standard-box--breit { padding: 10px; }
	.ss-danke__mitte { width: 560px; }
}
@media (max-width: 599px) { .ss-danke__mitte { width: 420px; } }
@media (max-width: 480px) { .ss-danke__mitte { width: 350px; } }

/* ---------- Kontaktseite (vorlagen/standard.php, Gruppen ss-kontakt-*) ---------- */
.ss-kontakt-intro__innen { display: flex; width: 1140px; max-width: 100%; margin: 0 auto; }
.ss-kontakt-intro__bild, .ss-kontakt-intro__text { width: 50%; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; }
.ss-kontakt-intro__bild { justify-content: flex-end; }
.ss-kontakt-intro__bild figure { margin: -15px 0 0 -200px; }
.ss-kontakt-intro__bild img { display: block; width: 100%; height: auto; }
.ss-kontakt-intro__text { justify-content: center; align-items: flex-start; }
.ss-kontakt-intro__text > * { width: 680px; max-width: 100%; }
.ss-kontakt-intro__titel { margin: 0; padding-bottom: 15px; font-size: 30px; line-height: 36px; font-weight: 700; color: #181b31; }
.ss-kontakt-intro__absaetze { margin-top: 2px; }
.ss-kontakt-intro__absaetze > :last-child { margin-bottom: 0; }
.ss-kontakt-band { position: relative; margin-top: -20px; padding: 60px 0; background: #000; }
.ss-kontakt-band__innen { width: 1120px; max-width: 100%; margin: 0 auto; padding: 20px 0 21px; box-sizing: border-box; }
.ss-kontakt-band__innen > * { max-width: 680px; margin: 0 calc(25.667% + 10px) 0 calc(25% + 10px); color: #fafafa; text-align: center; }
.ss-kontakt-band__innen > .ss-kontakt-band__titel { font-size: 32px; line-height: 40px; }
.ss-kontakt-band__innen > .ss-kontakt-band__unter { font-size: 21px; line-height: 40px; }
.ss-kontakt-info { display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; width: 100%; max-width: 580px; margin: 0 auto; padding: 60px 0; text-align: center; }
.ss-kontakt-info > * { margin: 0; }
.ss-kontakt-info > .ss-kontakt-info__dach { font-size: 19px; }
.ss-kontakt-info__studio { font-weight: 900; }
.ss-kontakt-info__text > :last-child { margin-bottom: 0; }
.ss-sozial { display: flex; justify-content: center; gap: 30px; line-height: 0; }
.ss-sozial__link { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; transition: .3s; }
.ss-sozial__link svg { display: block; width: 25px; height: 25px; fill: #000; }
/* Karte und Weg (bisher Stile im HTML-Widget) */
.ss-kontakt-info > .ss-map-wrap { align-self: flex-start; } /* wie heute im 580 px breiten Widget: links beginnen, dann per left/transform zentrieren */
.ss-map-wrap { position: relative; width: min(1100px, calc(100vw - 48px)); left: 50%; transform: translateX(-50%); margin-top: 36px; text-align: center; }
.ss-route { display: inline-block; padding: 12px 28px; border: 1px solid #111; color: #111; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s; }
.ss-route:hover { background: #111; color: #fff; text-decoration: none; }
.ss-map { margin-top: 36px; position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 340px; overflow: hidden; background: #f2f2f2; }
.ss-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(100%) contrast(1.05); }
.ss-weg { max-width: 900px; margin: 60px auto 20px; display: flex; gap: 40px; align-items: center; text-align: left; }
.ss-weg figure { flex: 0 0 38%; margin: 0; }
.ss-weg img { width: 100%; height: auto; display: block; }
.ss-weg h2 { font-size: 28px; line-height: 1.25; margin: 0 0 16px; }
.ss-weg p { margin: 0 0 12px; line-height: 1.6; }
/* Kontaktformular im dunklen Band (Feldstil wie die GT3-Formulare: transparente Felder mit Unterstrich) */
.ss-kontakt-band__innen > .ss-kontakt-band__formular { margin-top: 20px; text-align: left; font-size: 18px; line-height: 27px; }
.ss-formular { margin: 0; }
.ss-formular p { margin: 0 0 18px; }
.ss-formular label { display: block; margin: 0 0 2px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.ss-formular :is(input[type="text"], input[type="email"], input[type="tel"], textarea) { display: block; width: 100%; max-width: 100%; height: 50px; margin: 0; padding: 8px 20px 8px 0; box-sizing: border-box; border: 0; border-bottom: 1px solid rgba(250, 250, 250, .6); border-radius: 0; background: transparent; color: #fafafa; font: inherit; font-size: 16px; line-height: 1.6; outline: none; transition: border-color 300ms; -webkit-appearance: none; appearance: none; }
.ss-formular textarea[name] { height: 128px; padding-top: 10px; padding-bottom: 10px; resize: vertical; }
.ss-formular :is(input, textarea):focus-visible { border-bottom-color: #fafafa; box-shadow: 0 1px 0 #fafafa; }
.ss-formular [aria-invalid="true"] { border-bottom-color: #ff8a80; }
.ss-formular__fehler { display: block; margin-top: 4px; color: #ff8a80; font-size: 14px; line-height: 20px; }
.ss-formular__hinweis { padding: 10px 14px; border: 1px solid #ff8a80; font-size: 16px; line-height: 24px; }
.ss-formular__falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ss-formular__zustimmung { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: start; }
.ss-formular__zustimmung input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: #fafafa; }
.ss-formular__zustimmung label { margin: 0; font-size: 16px; line-height: 24px; letter-spacing: 0; text-transform: none; }
.ss-formular__zustimmung .ss-formular__fehler { grid-column: 2; }
.ss-formular a { color: inherit; text-decoration: underline; }
.ss-formular__senden { margin-bottom: 0 !important; text-align: center; }
.ss-formular button { display: inline-block; height: 56px; margin: 0; padding: 10px 30px; border: 1px solid #fafafa; border-radius: 50px; background: #fafafa; color: #181b31; font: inherit; font-size: 14px; font-weight: 700; line-height: 23px; letter-spacing: 0; text-transform: uppercase; cursor: pointer; transition: all 300ms; }
.ss-formular button:hover, .ss-formular button:focus-visible { background: transparent; color: #fafafa; }
@media (max-width: 1024px) { .ss-kontakt-band__innen > .ss-kontakt-band__formular { margin-left: calc(10% + 10px); margin-right: calc(10% + 10px); max-width: none; } }
@media (max-width: 767px) { .ss-kontakt-band__innen > .ss-kontakt-band__formular { margin-left: 10px; margin-right: 10px; } }
@media (max-width: 1199px) { .ss-kontakt-intro__innen { width: 1018px; } .ss-kontakt-band__innen { width: 998px; } }
@media (max-width: 1024px) {
	.ss-kontakt-intro { padding: 0 30px; }
	.ss-kontakt-intro__innen { flex-direction: column-reverse; width: 602px; }
	.ss-kontakt-intro__bild, .ss-kontakt-intro__text { width: 100%; }
	.ss-kontakt-intro__text { padding: 0; justify-content: flex-end; }
	.ss-kontakt-intro__bild figure { margin: 0; }
	.ss-kontakt-intro__titel { font-size: 26px; }
	.ss-kontakt-band__innen { padding: 21px 0 24px; }
	.ss-kontakt-band__innen > * { margin: 0 10px; }
	.ss-kontakt-info { max-width: 640px; padding: 60px 30px; align-items: center; }
	.ss-kontakt-info > .ss-kontakt-info__titel { font-size: 24px; }
}
@media (max-width: 1023px) { .ss-kontakt-band__innen { width: 740px; } }
@media (max-width: 767px) {
	.ss-kontakt-intro { padding: 0 15px; }
	.ss-kontakt-intro__titel { font-size: 23px; line-height: 1.3em; }
	.ss-kontakt-band__innen { width: 560px; }
	.ss-kontakt-info { max-width: none; }
	.ss-kontakt-info > .ss-kontakt-info__titel { line-height: 32px; }
	.ss-map { aspect-ratio: 4 / 5; min-height: 0; }
	.ss-weg { flex-direction: column; gap: 24px; margin-top: 40px; padding: 0 4px; }
	.ss-weg figure { flex: none; width: 100%; }
	.ss-weg img { height: 360px; object-fit: cover; object-position: 40% 70%; }
	.ss-weg h2 { font-size: 24px; }
}
@media (max-width: 599px) { .ss-kontakt-band__innen { width: 420px; } }
@media (max-width: 480px) { .ss-kontakt-band__innen { width: 350px; } }

/* ---------- Gestaffelte Einblendungen (wie heute Elementor "fadeIn") ---------- */
.ss-einblenden { visibility: hidden; }
.ss-einblenden.ss-sichtbar { visibility: visible; animation: ssFadeIn 1.25s both; }
.ss-einblenden--langsam.ss-sichtbar { animation-duration: 2s; }
.ss-einblenden--200.ss-sichtbar { animation-delay: .2s; }
.ss-einblenden--400.ss-sichtbar { animation-delay: .4s; }
.ss-einblenden--hoch.ss-sichtbar { animation-name: ssFadeInUp; }
@keyframes ssFadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes ssFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ss-einblenden.ss-sichtbar { animation: none; } }

/* Lange URLs in Texten brechen um (Handy-Überlauf Datenschutz/Impressum) */
main p, main li, main a, main h1, main h2, main h3 { overflow-wrap: anywhere; }