:root {
  --color-black: #000000;
  --color-beige: #d8ba9a;
  --color-gray-dark: #727070;
  --color-background-dark: #545454;
  --color-border: #d8ba9a;
  --color-weiss: #fff;
}
/* josefin-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/josefin-sans-v32-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* josefin-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Josefin Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../Fonts/josefin-sans-v32-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* josefin-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Josefin Sans";
  font-style: bold;
  font-weight: 600;
  src: url("../Fonts/josefin-sans-v32-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* josefin-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Josefin Sans";
  font-style: italic;
  font-weight: 600;
  src: url("..Fonts/josefin-sans-v32-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* josefin-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Josefin Sans";
  font-style: italic;
  font-weight: 700;
  src: url("../Fonts/josefin-sans-v32-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/josefin-sans-v33-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* allura-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Allura";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/allura-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  font-size: 15px;
}

body {
  margin: 0;
  font-family: "Josefin Sans";
}

strong {
  font-weight: bold;
}

.site-header {
  width: 100%;
  background-color: var(--color-background-dark);
  color: var(--color-beige);
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 2rem 1rem 2rem;
}

.site-header .header-slogan {
  position: absolute;
  top: 0.7rem;
  left: 24rem;
  color: var(--color-beige); /* #d8ba9a */
  font-size: 3rem;
  font-family: "Allura";
  font-weight: bold;
  font-style: italic;
  /* background-color: rgba(0, 0, 0, 0.4); optionaler halbtransparenter Hintergrund */
  padding: 1rem 1rem;
  border-radius: 4px;
}

.site-header .header-slogan .indent {
  display: inline-block;
  margin-left: 2.2rem;
}

.logo{
  position: relative;
}

.logo img {
  height: 150px;
}

.right-side .contact {
  position: relative;
}

.right-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.phone-icon {
  width: 50px;
  height: 50px;
  fill: var(--color-beige);
}

.phone-number {
  font-weight: bold;
  color: var(--color-beige);
  font-size: 2rem;
}

.main-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 68px 0 0 0;
  padding: 0;
}

.main-nav li.home {
  display: none;
}

.main-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.4rem;
  margin-left: 1rem;
  white-space: nowrap;
}

.main-nav ul li.active a {
  color: var(--color-beige);
}

.main-nav a:hover {
  color: var(--color-beige);
}

.header-video {
  position: relative;
  height: 700px; /* oder max-height: 400px */
  overflow: hidden;
}

.header-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-overlay-text {
  position: absolute;
  top: 3.5rem;
  right: 5rem;
  color: var(--color-beige); /* #d8ba9a */
  font-size: 5rem;
  font-family: "Allura";
  font-weight: bold;
  font-style: italic;
  /* background-color: rgba(0, 0, 0, 0.4); optionaler halbtransparenter Hintergrund */
  padding: 1rem 1rem;
  border-radius: 4px;
}

.video-overlay-text .indent {
  display: inline-block;
  margin-left: 4rem; /* oder z. B. 40px */
}

.headerimage {
  width: 100%;
  height: 700px;
  overflow: hidden;
  position: relative;
}

.headerimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  transform: scale(1);
  animation: zoomSlow 20s ease-in-out infinite alternate;
}

@keyframes zoomSlow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

.image-overlay-text {
  position: absolute;
  top: 3.5rem;
  right: 5rem;
  font-family: "Allura";
  color: var(--color-beige);
  font-size: 5rem;
  font-weight: bold;
  padding: 1rem 1rem;
  border-radius: 4px;
}

.image-overlay-text .indent {
  display: inline-block;
  margin-left: 4rem;
}

.content-section {
  width: 100%;
  background-color: #ffffff;
  color: var(--color-gray-dark);
  padding: 4rem 0 0 0;
  font-size: 1.2rem;
}

.content-container {
  /*max-width: 1180px;*/
  width: 100%;
  margin: 0 auto;
}

.content-container h1.center {
  text-align: center;
}

.content-container h1,
.content-container h1 + h2 {
  font-size: 3rem;
  font-weight: 600;
  color: var(--color-beige);
  line-height: 1.2;
  hyphens: auto;

  overflow-wrap: anywhere;
  word-break: break-word; /* Fallback für ältere Browser */
}

.content-container h1 {
  margin-bottom: 2rem;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: break-word; /* Fallback für ältere Browser */
}

.content-container h2 {
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--color-beige);
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: break-word; /* Fallback für ältere Browser */
}

.content-container h1 + h2 {
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: break-word; /* Fallback für ältere Browser */
  margin-left: 4rem;
  margin-top: 0;
}

.content-container header .ce-headline-center {
  text-align: center;
}

.content-container p.text-center {
  text-align: center;
}

.site-footer {
  background-color: var(--color-background-dark); /* #545454 */
  color: #ffffff;
  width: 100%;
  font-family: "Josefin Sans";
}

.footer-container {
  display: flex;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 2rem;
  font-size: 1.1rem;
  line-height: 1.7;
}

.footer-col {
  /*flex: 1;*/
}

.footer-mitte a {
  color: var(--color-weiss);
  text-decoration: underline;
}

.footer-links {
  text-align: right;
}

.footer-links ul {
  list-style: none;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.footer-links a:hover {
  color: var(--color-beige); /* optionaler Hover */
}

.footer-strip {
  height: 2rem;
  background-color: var(--color-beige); /* #d8ba9a */
}

/* Social-Icons: inline unter der Webadresse in der mittleren Spalte */
.footer-mitte .social-icons-inline {
  display: flex;
  align-items: center;
  gap: 30px; /* Abstand Icon zu Icon */
  margin-top: 0.8rem; /* kleiner Abstand zur Webadresse */
}

.footer-mitte .social-icons-inline .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Unterstreichung für reine Icon-Links aus */
  line-height: 1;
  transition: transform 0.2s ease;
}

.footer-mitte .social-icons-inline .social-link:hover {
  transform: translateY(-2px);
}

.footer-mitte .social-icons-inline .social-link:focus-visible {
  outline: 2px solid var(--color-beige);
  outline-offset: 4px;
  border-radius: 4px;
}

.footer-mitte .social-icons-inline .social-link svg {
  display: block;
  width: 24px; /* exakt wie angefordert/geliefert */
  height: 24px;
}

/* ────────────────────────────────────────────────
   Logos im runden, weißen Kreis (frame-layout-4)
   ──────────────────────────────────────────────── */
.frame.frame-layout-4 {
  /* Größe des Kreises responsiv steuerbar */
  --logo-circle: clamp(90px, 10vw, 140px);
  --logo-gap: 2rem;
  --logo-bg: #fff;
  --logo-border: 0px solid rgba(0,0,0,0.08);
  --logo-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Eine Reihe, zentriert; auf kleinen Screens darf umbrochen werden */
.frame.frame-layout-4 .ce-gallery .ce-row {
  display: flex;
  flex-wrap: wrap;                /* darf umbrechen */
  justify-content: center;        /* horizontal zentriert */
  align-items: center;            /* vertikal zentriert */
  gap: var(--logo-gap);
  min-height: calc(var(--logo-circle) + 1rem);
}

/* Floats & feste Spaltenbreiten der FSC-Galerie neutralisieren */
.frame.frame-layout-4 .ce-gallery .ce-row .ce-column {
  float: none !important;
  width: auto !important;         /* schrumpft auf Kreisbreite */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Der runde, weiße Kreis als Container */
.frame.frame-layout-4 .ce-gallery figure.image {
  margin: 0;
  width: var(--logo-circle);
  aspect-ratio: 1 / 1;            /* garantiert Quadrat */
  border-radius: 50%;             /* macht den Kreis */
  background: var(--logo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;                  /* Rand zwischen Logo und Kreis */
  border: var(--logo-border);
  box-shadow: var(--logo-shadow);
  overflow: hidden;               /* falls Logos größer sind */
}

/* Logos selbst niemals strecken, nur einpassen */
.frame.frame-layout-4 .ce-gallery img.image-embed-item {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;            /* vollständig sichtbar */
}


/* Burger Icon */
.burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
}

.burger span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: #ffffff;
}

/* Besondere Inhaltselemente */
/* Startseite Dienstleistungen Kästchen  */
.content-container .frame-layout-0 {
  max-width: 1180px;
  margin: 0 auto;
}

.content-container .frame-type-shortcut.frame-layout-2 {
  width: calc(100% - 20rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Zentriert letzte Zeile bei weniger als 5 */
  gap: 4rem; /* Abstand zwischen den Boxen */
  align-items: stretch; /* optional: für Stretch-Höhe */
  margin-right: 10rem;
  margin-left: 10rem;
}

.content-container .frame-layout-2 .frame-layout-3 {
  width: calc((100% - 4 * 4rem) / 5); /* 5 Spalten: 100% / 5 - gap-Ausgleich */
  box-sizing: border-box;
  border: 2px solid #ccc;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Startzustand: kein Schatten */
  transform: translateY(0); /* Ausgangslage */
}

.content-container .frame-layout-2 .frame-layout-3:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* weicher Schatten */
  transform: translateY(-5px); /* leicht hoch */
}

.content-container .frame-layout-2 .frame-layout-3 header {
  min-height: 4rem;
  margin-top: 2rem;
}

.content-container .frame-layout-2 .frame-layout-3 header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-beige);
  line-height: 1.2;
  margin: 0;
  padding: 0;
  word-wrap: break-word; /* Für ältere Browser */
  overflow-wrap: break-word; /* Moderner Standard */
  white-space: normal; /* WICHTIG: erlaubt Umbrüche */
}

/* Rahmen/Background wie gehabt */
.content-container .frame-layout-4 {
  width: 100%;
  margin-top: 2rem;
  padding: 2rem 0;
  background: var(--color-beige);
}

/* WICHTIG: Zeile als Flex, Spalten werden vertikal mittig ausgerichtet */
.frame.frame-layout-4 .ce-gallery .ce-row {
  display: flex;
  flex-wrap: wrap; /* mehrere Reihen zulassen */
  align-items: center; /* vertikal mittig relativ zur Zeilenhöhe */
  gap: 2rem; /* optional Abstand zwischen Logos */
}

/* Spalten dürfen nicht mehr floaten – und brauchen Breite */
.frame.frame-layout-4 .ce-gallery .ce-row .ce-column {
  float: none; /* float von FSC überschreiben */
  width: 25%; /* 4 Spalten (Desktop) */
  display: flex;
  justify-content: center; /* horizontal mittig */
}

/* Figure neutralisieren */
.frame.frame-layout-4 .ce-gallery figure.image {
  margin: 0;
}

/* Bilder nicht strecken */
.frame.frame-layout-4 .ce-gallery img.image-embed-item {
  height: auto;
  max-width: 100%;
}

/* Optional: einheitliche Leistenhöhe (z.B. 140px) und max-Höhe der Logos */
.frame.frame-layout-4 {
  --logo-row-h: 140px;
}
.frame.frame-layout-4 .ce-gallery .ce-row .ce-column {
  min-height: var(--logo-row-h);
}
.frame.frame-layout-4 .ce-gallery img.image-embed-item {
  max-height: var(--logo-row-h);
}
/* Band-Optik (optional) */
.content-container .frame-layout-4 {
  --logo-band-h: 150px; /* Bandhöhe nach Wunsch */
  --logo-gap: 2rem; /* Abstand zwischen Logos */
  background: var(--color-beige);
  padding: 2rem 0;
}

/* Eine Reihe, vertikal mittig im Band */
.frame.frame-layout-4 .ce-gallery .ce-row {
  display: flex;
  flex-wrap: nowrap; /* alles in einer Zeile */
  justify-content: center; /* mittig im Band */
  align-items: center; /* VERTIKAL mittig im Band */
  gap: var(--logo-gap);
  min-height: var(--logo-band-h); /* definiert die Bandhöhe */
}

/* Float & Spaltenbreiten der FSC-Gallery neutralisieren */
.frame.frame-layout-4 .ce-gallery .ce-row .ce-column {
  float: none !important;
  width: auto !important; /* schrumpft auf Bildbreite */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figure reset */
.frame.frame-layout-4 .ce-gallery figure.image {
  margin: 0;
}

/* Bilder: nie strecken, Höhe an Band koppeln */
.frame.frame-layout-4 .ce-gallery img.image-embed-item {
  display: block;
  height: auto !important; /* HTML-Attribute übersteuern */
  max-height: var(--logo-band-h); /* bleibt innerhalb der Bandhöhe */
  width: auto; /* Seitenverhältnis wahren */
}

.frame.frame-layout-4 h2 {
  color: var(--color-black);
  text-align: center;
}

/* Optional: auf sehr schmalen Screens umbrechen */
@media (max-width: 700px) {
  .frame.frame-layout-4 .ce-gallery .ce-row {
    flex-wrap: wrap;
  }
}

.content-container .frame-powermailstartseite {
  background-color: var(--color-background-dark);
  max-width: initial;
  width: 100%;
}

.content-container .frame-powermailstartseite > * {
  max-width: 1180px;
  margin: 0 auto;
}

.content-container .frame-space-after-small {
  margin-bottom: 30px;
}

.content-container .frame-space-after-medium {
  margin-bottom: 60px;
}

.content-container .frame-space-after-large {
  margin-bottom: 90px;
}

.content-container .frame-space-after-xlarge {
  margin-bottom: 150px;
}

/* Besondere Inhaltselemente */

.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /*background-color: rgba(216, 186, 154, 0.9);*/
  background: linear-gradient(
    to right,
    rgba(84, 84, 84, 1) 0%,
    rgba(84, 84, 84, 1) 200px,
    rgba(84, 84, 84, 0.7) 100%
  );
  z-index: 3000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: none; /* initial versteckt */
}

.sticky-nav.show {
  display: flex;
}

.sticky-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 1rem 2rem;
  list-style: none;
  width: 100%;
}

.sticky-nav a {
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.sticky-nav li.active a,
.sticky-nav a:hover {
  color: var(--color-beige);
}

.sticky-logo-item img {
  height: 70px;
  max-height: 70px;
  display: block;
}

.sticky-logo {
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}

.ce-intext.ce-right .ce-gallery {
  margin-left: 40px;
}

.ce-bodytext > p:first-of-type {
  margin-top: 0;
}

.ce-bodytext a,
.powermail_field a,
.content-section a {
  color: var(--color-background-dark);
}

.contact a {
  text-decoration: none;
}

img.siegeltop {
  position: absolute;
  right: -170px;
  top: 100px;
  width: 160px;
  height: auto;
  z-index: 200;
}

hr {
  color: var(--color-black);
  margin: 50px 0;
}

/* 🧱 Feld-Wrapper mit flex für Desktop */
.powermail_fieldwrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1rem;
  gap: 1rem;
  width: 100%;
}

/* 📌 Label links, feste Breite */
.powermail_label {
  flex: 0 0 180px;
  margin: 0;
  text-align: left;
  font-weight: bold;
  color: var(--color-gray-dark);
}

/* 🧩 Eingabefeld rechts */
.powermail_field {
  flex: 1;
  min-width: 200px;
}

/* ✏️ Input und Textarea */
.powermail_input,
.powermail_textarea,
.powermail_captcha {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1rem;
  background-color: #fff;
  box-sizing: border-box;
  resize: none;
}
.powermail_captcha {
  max-width: 120px;
}

.powermail_captchaimage {
  margin-top: 20px;
}

.powermail_input:focus,
.powermail_textarea:focus {
  border-color: var(--color-beige);
  outline: none;
  box-shadow: 0 0 0 2px rgba(216, 186, 154, 0.3);
}

/* 📱 Responsive: Label über Input */
@media (max-width: 600px) {
  .powermail_fieldwrap {
    flex-direction: column;
    align-items: stretch;
  }

  .powermail_label {
    width: 100%;
  }

  .powermail_field {
    width: 100%;
  }
}

/* 🟢 Submit-Button: linksbündig unter dem Formular */
.powermail_fieldwrap_type_submit {
  display: flex;
  justify-content: flex-start;
  margin-top: 2rem;
}

.powermail_submit {
  background-color: var(--color-beige);
  color: #fff;
  padding: 0.8rem 1.8rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  font-family: "Josefin Sans", sans-serif;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.powermail_submit:hover {
  background-color: #b99a78;
  transform: translateY(-2px);
}

/* 🧱 Gesamtformular: 100% Breite */
.powermail_fieldset {
  width: 100%;
  margin: 0 auto;
  padding: 2rem 0;
  border: none;
}

.powermail_legend {
  font-size: 1.8rem;
  color: var(--color-beige);
  margin-bottom: 2rem;
  font-weight: bold;
  text-align: left;
}

.powermail_captchaimage {
  margin-top: 20px;
  display: block;
  width: auto;
}

fieldset legend {
  display: none;
}

.powermail_create {
  margin: 50px 0;
  padding: 20px 0;
  background: var(--color-beige);
}

.powermail_create table tr td:first-child {
  margin-right: 20px;
}

.bildnachweis {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.5;
  margin-top: 2rem;
  max-width: 600px;
}

.bildnachweis a {
  color: #666;
  text-decoration: underline dotted;
  transition: color 0.2s ease;
}

.bildnachweis a:hover {
  color: #0078d4;
  text-decoration: underline solid;
}

@media (max-width: 600px) {
  .bildnachweis {
    font-size: 0.8rem;
    line-height: 1.6;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

#scrollToTopBtn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-beige); /* Blau passend zur CI */
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  z-index: 999;
}

#scrollToTopBtn:hover {
  background-color: var(--color-background-dark);
}

#scrollToTopBtn.show {
  opacity: 1;
}

/* ────────────────────────────────────────────────
   Frame Layout 6 – MAX 1180px, zentriert, dark box, rounded
   Alles mittig + Button/Text responsive umbrechend
   ──────────────────────────────────────────────── */

.frame.frame-layout-6 {
  max-width: 1180px;
  width: 100%;
  margin: 3rem auto;
  padding: 3rem 2.5rem;
  background-color: var(--color-background-dark);
  color: var(--color-weiss);
  border-radius: 14px;
  box-sizing: border-box;

  /* NEU: Inhalt generell mittig */
  text-align: center;
}

/* TYPO3-Inner-Wrapper neutralisieren */
.frame.frame-layout-6 > .frame-container,
.frame.frame-layout-6 > .frame-inner,
.frame.frame-layout-6 > .frame-group-container,
.frame.frame-layout-6 > .frame-group-inner,
.frame.frame-layout-6 > .frame-content,
.frame.frame-layout-6 > .frame-content-container,
.frame.frame-layout-6 > .ce-container,
.frame.frame-layout-6 > .container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
}

/* Text weiß */
.frame.frame-layout-6,
.frame.frame-layout-6 p,
.frame.frame-layout-6 li,
.frame.frame-layout-6 span,
.frame.frame-layout-6 div {
  color: var(--color-weiss);
}

/* Überschriften weiß + mittig */
.frame.frame-layout-6 h1,
.frame.frame-layout-6 h2,
.frame.frame-layout-6 h3,
.frame.frame-layout-6 h4,
.frame.frame-layout-6 h5,
.frame.frame-layout-6 h6 {
  color: var(--color-weiss);
  text-align: center;
}

/* Link als Button: mittig + Text darf umbrechen */
.frame.frame-layout-6 a {
  display: inline-block;
  background-color: var(--color-beige);
  color: var(--color-weiss);
  text-decoration: none;
  font-weight: 600;
  padding: 0.9rem 1.6rem;
  border-radius: 14px;
  box-sizing: border-box;

  /* NEU: Umbruch erlauben */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  /* mittig */
  margin-left: auto;
  margin-right: auto;

  transition: transform 0.2s ease, filter 0.2s ease;
}

.frame.frame-layout-6 a:hover {
  transform: translateY(-2px);
  filter: brightness(0.95);
}

.frame.frame-layout-6 a:focus-visible {
  outline: 2px solid var(--color-weiss);
  outline-offset: 4px;
}

/* Optional: Abstand, wenn Button nach Text kommt */
.frame.frame-layout-6 p + a,
.frame.frame-layout-6 .ce-bodytext + a {
  margin-top: 1rem;
  display: inline-block;
}

/* Responsive */
@media (max-width: 700px) {
  .frame.frame-layout-6 {
    margin: 2rem 1rem;
    width: calc(100% - 2rem);
    padding: 1.5rem 1.2rem;
    border-radius: 12px;
  }

  /* Button darf größer werden, Text umbricht */
  .frame.frame-layout-6 a {
    width: 100%;
    border-radius: 12px;
    text-align: center;
  }
}