/*
Theme Name: Plan@Home
Theme URI: https://plan-home.de/
Description: https://plan-home.de/
Version: 0.1
*/

html {
  background:#333;
  overflow-x:hidden;
}

body {
  width: calc(100% - 10rem);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 10px 10px rgba(0,0,0,0.5);
  min-height: 100vh;
}

.header {
  z-index: 59;
  position: relative;
}

.wrapper {
  width: 83.75rem;
  margin: 0 auto;
  position: relative;
}

.logobox {
  position: absolute;
  left: 0;
  top: 2rem;
  width: 12.875rem;
  height: 3.875rem;
}

.logobox img {
  display: block;
  width: 100%;
  height: auto;
}

.footer {
  background: #0A1A30;
  padding: 4rem 1rem 3rem;
}

.footer * {
  color: #fff;
  
}

.footer #custom_html-2 img {
  margin-top: 0.75rem;
}

.footer #custom_html-3 p {
  line-height: 1.75em;
}

.footer h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.footer .menu li {
  margin: 0.5rem 0;
}

#menu-footermenu a {
  text-decoration: none;
  display: inline-block;
}

#menu-footermenu a:hover {
  text-decoration: underline;
}

#menu-footermenu a:before {
  content:'›';
  display: inline-block;
  margin-right: 0.5rem;
}

.quickcontact {
  position: fixed;
  top: 0;
  right: 10rem;
  z-index: 5;
  display: flex;
  gap: 0.35rem;
}

.quickloc {
  background: #333;
  color: #fff;
  padding: 0.75rem 1rem;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  display: inline-block;
  font-weight: bold;
}

.quicktel {
  background: #333;
  color: #fff;
  padding: 0.75rem 1rem;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  display: inline-block;
  font-weight: bold;
}

.quicktel a {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
  padding-left: 2rem;
}

.quicktel a img {
  position: absolute;
  top: 11px;
}

.quickmail {
  background: var(--ciblau);
  color: #fff;
  padding: 0.75rem 1rem;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  display: inline-block;
  font-weight: bold;
}

section, .header {
  padding-left:3rem !important;
  padding-right: 3rem !important;
}

@media only screen and (max-width: 96.875rem) {
  body {
    width: calc(100% - 4rem);
  }

  .wrapper {
    width: 100%;
    max-width: 83.75rem;
  }

  .quickcontact {
    right: 4rem;
  }
}

@media only screen and (max-width: 79rem) {
  section, .header {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media only screen and (max-width: 1024px) {
  .quickloc, .quicktel {
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
  }

  .quickmail {
    padding: 0.35rem 1rem;
  }

  .quicktel a {
    padding-left: 1.5rem;
  }

  .quicktel a img {
    height: 0.9rem;
    top: 7px;
  }

  .quickmail a img  {
    height: 0.9rem;
  }
}

@media only screen and (max-width: 767px) {
  body {
    width: calc(100% - 1rem);
  }

  .quickcontact {
    right: 1rem;
  }

  .logobox {
    width: 9.875rem;
    height: auto;
  }
}

@media only screen and (max-width: 600px) {
  section, .header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .quickloc {
    display: none;
  }
}

/**** MODUL HERO ****/

/* Mod: Hero Smart Home */
.mod-hero-smart-home {
  /* Section volle Breite */
  width: 100%;
  position: relative;
  overflow: hidden;
  /* Farbe & Abstände */
  --mod-hero-primary: #2084C2;
  --mod-hero-gap: clamp(1rem, 2vw, 2rem);
  padding: 10rem 0 3rem;
}

/* dekoratives Bild rechts: echtes <picture>, keine CSS-Backgrounds */
.mod-hero-smart-home__bg {
  position: absolute;
  inset: 0 0 0 auto;     /* an rechter Seite kleben */
  width: auto;
  pointer-events: none;
  z-index: 0;
  display: flex;
  justify-content: flex-end;
}
.mod-hero-smart-home__bg picture,
.mod-hero-smart-home__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* füllt den rechten Bereich */
  object-position: bottom;
}

/* Grid */
.mod-hero-smart-home__inner {
  position: relative;
  z-index: 1; /* über dem dekorativen Bild */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--mod-hero-gap);
  align-items: center;
}

/* Spalten */
.mod-hero-smart-home__col--content { }
.mod-hero-smart-home__col--media {
  justify-self: end;
  max-width: 640px;
}

/* Typo */
.mod-hero-smart-home__title {
  font-size: clamp(1.5rem, calc(1rem + 1.493vw), 2.25rem);
  line-height: 1.15;
  margin: 0 0 0rem;
  font-weight: bold;
}
.mod-hero-smart-home__subtitle {
  font-size: clamp(1.25rem, calc(1rem + 1.493vw), 2.25rem);
  margin: 0 0 .75em;
  font-weight: normal;
}
.mod-hero-smart-home__text { margin-bottom: 1rem; }

/* Liste mit Icon aus /images/icon_tick.png */
.mod-hero-smart-home__list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 2rem;
}
.mod-hero-smart-home__list-item {
  position: relative;
  padding-left: 2rem;
  margin: 0.75rem 0;
  font-size: 1rem;
  line-height: 1.25rem;
}
.mod-hero-smart-home__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-image: var(--tick-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* CTA */
.mod-hero-smart-home__btn {
  padding: 0.75rem 4.25rem;
}

/* Hinweis */
.mod-hero-smart-home__note {
  display: block;
  opacity: .85;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  width: 26rem;
  text-align: center;
}

/* Mockup-Spalte */
.mod-hero-smart-home__mockup picture,
.mod-hero-smart-home__mockup img {
  width: 100%;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .mod-hero-smart-home__btn { transition: none; }
}
@supports (container-type: inline-size) {
  /* progressive Enhancement optional */
}

@media only screen and (max-width: 96.875rem) {
  .mod-hero-smart-home__bg {
    opacity: 0.5;
  }

}

@media only screen and (max-width: 79rem) {
  .mod-hero-smart-home__bg {
    right: -22vw;
  }

  .mod-hero-smart-home__col--media {
    max-width: 400px;
  }
  
  .mod-hero-smart-home__inner {
    grid-template-columns: 1.3fr 0.7fr;
  }
}

@media only screen and (max-width: 70rem) {
  .mod-hero-smart-home__bg {
    opacity: 0.5;
  }

}

@media (max-width: 1024px) {
  .mod-hero-smart-home__inner {
    grid-template-columns: 1fr;
  }
  .mod-hero-smart-home__bg {
    opacity: 0.25; /* mobile etwas ruhiger */
    max-height: 60vw;
  }

  .mod-hero-smart-home__col--media {
    display: none;
  }
}

@media (max-width: 767px) {
  .mod-hero-smart-home {
    padding: 8rem 0 0rem;
  }
}

@media (max-width: 600px) {
 .mod-hero-smart-home__note {
    width: auto;
    text-align: center;
  }

  .mod-hero-smart-home__btn {
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: center;
  }
}



/****** USP STRIP *****/
/* Screenreader Utility (falls noch nicht vorhanden) */
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ===== USP-Leiste – simpel & sauber ===== */
.mod-usp-strip{
  width:100%;
  padding:1.5rem 0;
  text-align:center;        /* zentriert alles */
  color:#555;
  background: var(--hellgrau);
  margin: 5rem 0 8rem;
}

.mod-usp-strip__list{
  list-style:none;
  margin:0;
  padding:0;
}

.mod-usp-strip__item{
  display:inline-block;     /* Items nebeneinander */
  white-space:nowrap;       /* keine hässlichen Umbrüche */
}

/* Trenner mit einfachem Margin links/rechts */
.mod-usp-strip__item + .mod-usp-strip__item::before{
  content:"|";
  margin:0 .75rem;          /* Abstand links & rechts */
  color:#555;
}

@media (max-width: 1024px) {
  .mod-usp-strip__list {
    display: flex;
    flex-wrap: nowrap;
  }

  .mod-usp-strip__item {
    white-space: initial;
    flex: 1 1;
    font-size: 0.9rem;
    border-left: 1px solid #aaa;
    padding: 0 1rem;
  }

  .mod-usp-strip__item:first-of-type {
    border-left: 0;
  }

  .mod-usp-strip__item + .mod-usp-strip__item::before {
    display: none;
  }

  .mod-usp-strip {
    margin: 3rem 0 5rem;
  }
}

@media (max-width: 600px) {
  .mod-usp-strip {
    padding: 0.5rem 0;
  }

  .mod-usp-strip__list {
    flex-wrap: wrap;
  }
  .mod-usp-strip__item {
    border-left: 0;
    border-top: 1px solid #aaa;
    padding: 0.75rem;
    flex: 100%;
  }

  .mod-usp-strip__item:first-of-type {
    border-top: 0;
  }
}

/******* CARDS *****/

/* Basis-Layout */
.mod-vorteile-cards {
  position: relative;
  overflow: hidden;
  background: #fff;
  margin: 4.375rem 0 8rem;
}

/* Section-BG: unten links im Container */
.mod-vorteile-cards .section-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: auto;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

/* Max-Breite der Inhalte */
.mod-vorteile-cards .wrapper {
  max-width: 83.75rem; /* von dir vorgegeben */
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.mod-vorteile-cards h3 span {
  font-size: 1.25rem;
  font-weight: normal;
}



/* Intro */
.mod-vorteile-cards .intro {
  text-align: center;
  margin: 0 auto 3rem;
  max-width: 62rem;
}
.mod-vorteile-cards .intro__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
}
.mod-vorteile-cards .intro__text {
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  color: #333;
}



/* Kachel */
.mod-vorteile-cards .kachel{
  position: relative;
  border-radius: 3px;
  padding: 1.5rem;
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box, /* eigentlicher Kartenhintergrund */
    var(--verlauf) border-box;               /* Rand füllt die Border */
}

.mod-vorteile-cards .kachel__title {
  margin: 0 0 1rem;
  line-height: 1.1em;
}
.mod-vorteile-cards .kachel__text p {
  margin: 0 0 .6rem;
}
.mod-vorteile-cards .kachel__text ul { padding-left: 1.1rem; }
.mod-vorteile-cards .kachel__text li { margin: .35rem 0; }

/* Kachel-BG-Bild: dezent, unten rechts */
.mod-vorteile-cards .kachel-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  user-select: none;
}

/* Schmuckelement oben rechts */
.mod-vorteile-cards .schmuckelement {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 1.5rem;
  height: 2px;
  background: #fff;
}

.mod-vorteile-cards .schmuckelement::after {
  content: '';
  display: block;
  position: absolute;
  right: calc(-0.5rem + 1px);
  top: calc(-0.5rem + 1px);
  background: var(--ciblau);
  border-radius: 100%;
  width: 1rem;
  height: 1rem;
}

/* Partner-Kachel */
.mod-vorteile-cards .partner {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.mod-vorteile-cards .shellpartner-kachel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border-radius: 3px;
  padding: 1rem 1rem 0.6rem;
  background: #fff;
  color: #000;
  font-weight: bold;
  border: 2px solid var(--grau);
}
.mod-vorteile-cards .shellpartner-kachel__label {
  opacity: .9;
}
.mod-vorteile-cards .shellpartner-kachel__brand {
  font-weight: 800;
  letter-spacing: .2px;
}

/*** PAKETE ***/
.mod-pakete__opener {
  text-align: center;
  margin-bottom: 3rem;
}

/* ========== Grundlayout der Pakete ========== */
.mod-pakete__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.25rem;
  align-items: end;
}

/* ========== Kartenrahmen mit Verlauf ========== */
.mod-pakete__item {
  position: relative;
  border-radius: 3px;
  padding: 1.5rem 1.5rem 6rem;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--weiss), var(--weiss)) padding-box, /* Kartenhintergrund */
    #919191 border-box;                               /* farbiger Rand */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 29rem;
}

.mod-pakete__item.highlighted {
  background:
    linear-gradient(var(--weiss), var(--weiss)) padding-box, /* Kartenhintergrund */
    var(--verlauf) border-box;                               /* farbiger Rand */
    padding-bottom: 9.25rem;
}


.mod-pakete__item:hover {
  box-shadow: 0 14px 24px rgba(0,0,0,.08);
}

/* ========== Schmuckelement oben rechts ========== */
.mod-pakete__decor {
  position: absolute;
  top: -3px;
  right: -2px;
  width: 1.5rem;
  height: 3px;
  background: var(--weiss);
}
.mod-pakete__decor::after {
  content: '';
  display: block;
  position: absolute;
  right: calc(-0.5rem + 1px);
  top: calc(-0.5rem + 1px);
  background: #919191;
  border-radius: 100%;
  width: 1rem;
  height: 1rem;
}

.mod-pakete__item.highlighted .mod-pakete__decor::after {
  background: var(--ciblau);
}

/* ========== "Meist gewählt" Badge ========== */
.mod-pakete__badge {
  background: #1E4F91;
  color: var(--weiss);
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  display: inline-block;
  margin-left: -1.5rem;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* ========== Highlight-Paket (z. B. Komfort) ========== */
.mod-pakete__item.highlighted {
  background:
    linear-gradient(var(--weiss), var(--weiss)) padding-box,
    var(--verlauf) border-box;
  border-width: 3px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

/* ========== Typografie & Preis ========== */
.mod-pakete__item-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.mod-pakete__item-title span {
  font-weight: normal;
}

.mod-pakete__price {
  font-weight: normal;
  margin: 1.5rem 0 1.5rem;
    margin-left: 0px;
  text-align: right;
  background: #fafafa;
  border-top: 1px solid #E9E9E9;
  border-bottom: 1px solid #E9E9E9;
  padding: 1rem 2rem;
  width: calc(100% + 3rem);
  margin-left: -1.5rem;
}

.mod-pakete__price p {
  display: inline-block;
  margin-bottom: 0;
}

.mod-pakete__price span {
  font-size: 1.5rem;
  font-weight: bold;
}

.mod-pakete__price .sale {
  display: inline-block;
  margin-left: 1rem;
  font-size: 0.8rem !important;
  color: #aaa;
}

.mod-pakete__price .sale span {
  font-size: 1rem;
}

.mod-pakete__features li {
  font-size: 1rem;
  line-height: 1.3em;
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.mod-pakete__features li:before {
  content:"";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(images/icon_liste.png) 0 0 no-repeat;
  background-size: 100%;
  margin-left: -1.25rem;
  margin-right: 0.25rem;
}

/* ========== Button ========== */
.mod-pakete__btn {
  margin-top: 1rem;
  text-align: center;
  background: #fff;
  color: #000;
  padding: 0.6rem 1.2rem;
  border-radius: 3px;
  text-decoration: none;
  font-weight: normal;
  transition: background 0.3s ease;
  display: block;
  position: absolute;
  width: calc(100% - 3rem);
  bottom: 2rem;
  border: 1px solid var(--ciblau);
  font-size: 1rem;
}
.mod-pakete__btn:hover,
.mod-pakete__item.highlighted .mod-pakete__btn:hover {
  background: var(--dunkelblau);
}

.mod-pakete__item.highlighted .mod-pakete__btn {
  background: var(--ciblau);
  color: #fff;
}

/* ========== Addon-Bereich ========== */
.mod-pakete__addons {
  text-align: left;
  border-radius: 3px;
  padding: 1rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  border: 1px solid #919191;
}

.mod-pakete__bg {
  position: absolute;
  top: 0;
  height: auto;
  width: auto;
  right: 0;
  opacity: 0.3;
}

.mod-pakete {
  position: relative;
  margin: 0;
  padding: 6rem 1rem;
  overflow: hidden;
}


@media (max-width: 1200px) {
  .mod-pakete__grid {
    grid-template-columns: 1fr 1fr;
  }

  .mod-pakete__item {
    min-height: 1rem;
  }

  .mod-pakete__item.highlighted {
    padding-bottom: 6rem;
  }

  .mod-pakete__bg {
    opacity: 0.1;
  }
}

@media (max-width: 920px) {
  .mod-pakete__grid {
    grid-template-columns: 1fr;
  }

  .mod-pakete {
    padding: 6rem 1rem 2rem;
  }
}




/**** FAQ ****/

.mod-faq {
  background:#1E4F91;
  padding: 6rem 1rem;
}

.mod-faq * {
  color: #fff;
  text-align: center;
}

.mod-faq__intro * {
  font-size: 1.25rem;
}

.mod-faq__title {
  font-size: 2rem;
}

.mod-faq__category-title {
  font-weight: normal;
  font-size: 1.5rem;
margin-top: 4rem;
  margin-bottom: 1.5rem;
}

.mod-faq__question-heading {
  text-align: left;
}

.mod-faq__question {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border-radius: 3px;
  border: 0;
  padding: 1rem;
  margin-top: 1rem;
  position: relative;
}

.mod-faq__question-text {
  color: #000;
  font-family: 'Roboto';
  font-size: 1rem;
}

.mod-faq__icon {
  color: #1E4F91;
  margin-left: auto;
  position: absolute;
  right: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5rem;
  top: 50%;
  transform: translateY(-0.75rem);
} 

.mod-faq__answer-inner {
  background: #fff;
  margin-top: -3px;
  border-radius: 3px;
  border-top: 1px solid #ccc;
  z-index: 5;
  position: relative;
  padding: 1rem;
}

.mod-faq__answer-inner * {
  text-align: left;
  color: #000;
  font-size: 1rem;
}

.is-open .mod-faq__question-text {
  font-weight: bold;
  color:#1E4F91;
}

.mod-faq__question:hover {
  cursor: pointer;
}

.mod-faq__question:hover .mod-faq__question-text {
  color:#1E4F91;
}

@media (max-width: 1024px) {
  .mod-faq__grid {
    flex-flow: column;
  }
}

/*** Kundenbewertung ***/
.mod-kundenstimmen {
  margin: 6rem 0 8rem;
  padding: 0 1rem;
}
.mod-kundenstimmen__opener {
  text-align: center;
}

.mod-kundenstimmen__container {
  margin-top: 2rem;
}

/*** Kontakt ***/

.mod-kontakt-formular {
  background: var(--ciblau);
  padding: 4.375rem 1rem;
  margin: 0;
}

.mod-kontakt-formular h3 {
  font-weight: normal;
  margin: 3.125rem 0 0.5rem;

}

.mod-kontakt-formular * {
  color: #fff;
}

.mod-kontakt-formular__grid {
  gap: 0;
}

.col2 .col.mod-kontakt-formular__col--left {
  width: 33.333333%;
  padding-right: 5rem;
}

.col2 .col.mod-kontakt-formular__col--right {
  width: 66.666666%;
}

.mod-kontakt-formular__form p {
  margin: 0.5rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
}

.mod-kontakt-formular__form .wpcf7-form-control-wrap {
  display: block;
}

.mod-kontakt-formular__form .wpcf7-form-control-wrap label {
  margin:0;
}

.mod-kontakt-formular__form .wpcf7-list-item {
  margin-left: 0;
}

.mod-kontakt-formular__form textarea {
  width: calc(66.6666% - 0.5rem);
}

.mod-kontakt-formular__form .wpcf7-not-valid-tip {
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.mod-kontakt-formular__form .col3 {
  margin-bottom: 2rem;
}

.mod-kontakt-formular__form .form-note {
  font-size: 0.8rem;
  font-weight: normal;
}

.mod-kontakt-formular__form input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid white;
  border-radius: 2px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  top: 3px;
  margin-right: 0.5rem;
}

.mod-kontakt-formular__form input[type="checkbox"]:checked {
  background-color: #00aaff; /* z. B. hellblaues Häkchenfeld */
  border-color: #ffffff;
}

.mod-kontakt-formular__form input[type="checkbox"]:checked::after {
  content: "✔";
  position: absolute;
  color: white;
  font-size: 14px;
  top: -2px;
  left: 2px;
}

.mod-kontakt-formular__image {
  margin-bottom: 1rem;
}

@media (max-width: 1200px) {
  .mod-kontakt-formular__form .col3 {
    justify-content: flex-start;
  }
}



@media (max-width: 1024px) {
  .col2 .col.mod-kontakt-formular__col--left {
    width: 100%;
    padding-right: 0;
    margin-top: 3rem;
  }

  .col2 .col.mod-kontakt-formular__col--left img {
    max-width: 18rem;
  }

  .col2 .col.mod-kontakt-formular__col--right {
    width: 100%;
  }

  .mod-kontakt-formular__grid {
    flex-flow: column-reverse;
  }

  .mod-kontakt-formular__grid input, .mod-kontakt-formular__grid textarea, .mod-kontakt-formular__grid select {
    width: 100%;
  }
}


/*** Gebiet ***/

.mod-servicegebiet-cta {
  margin: 0;
  padding: 6rem 1rem;
  background: #f8f8f8;
}


.mod-servicegebiet-cta__opener {
  text-align: center;
  margin-bottom: 3rem;
}

.mod-servicegebiet-cta__btn {
  margin-top: 2rem;
  font-size: 1rem;
}

@media (max-width: 1024px) {
  .mod-servicegebiet-cta__col--media img {
    margin: 0 auto;
  }  
}


/** TRUST CTA **/

/* Section als Bühne für das Vollbild-Foto */
.mod-trust-cta-card{
  position: relative;
  overflow: hidden;
  background: #000;
}

/* Bild füllt die Section, bleibt hinter dem Panel */
.mod-trust-cta-card__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.mod-trust-cta-card__btn {
  background: #1E4F91;
  margin-top: 2rem;
}

/* Weißes Panel: zentriert + vertikaler Abstand */
.mod-trust-cta-card__panel{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.9);
  color: var(--schwarz);
  border-radius: 3px;
  box-shadow: 0 20px 40px rgba(0,0,0,.18), 0 2px 10px rgba(0,0,0,.08);
  padding: 1.75rem 2rem;
  max-width: 34rem;        /* bei Bedarf anpassen */
  margin: 6rem 0 6rem auto;
}

.mod-trust-cta-card__list-item {
  position: relative;
  padding-left: 2rem;
  margin: 0.75rem 0;
  font-size: 1rem;
  line-height: 1.25rem;

}

.mod-trust-cta-card__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-image: var(--darktick-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Typo/Abstände im Panel (optional) */
.mod-trust-cta-card__title{ margin: 0 0 .5rem; font-size: 1.5rem;}
.mod-trust-cta-card__intro{ margin: 0 0 1rem; }
.mod-trust-cta-card__list{ margin: 0 0 1rem; }
.mod-trust-cta-card__btn {
  display: block;
  text-align: center;
}

/* Responsive Feinschliff */
@media (max-width: 720px){
  .mod-trust-cta-card__panel{
    max-width: 94vw;
    margin: 36px auto;      /* kleinerer vertikaler Abstand auf Mobile */
    padding: 1.25rem 1rem;
  }
}




/** Ablauf **/
.mod-projekt-ablauf {
  margin: 4.375rem 0;
  padding: 0rem 1rem;
  position: relative;

}

.mod-projekt-ablauf__opener {
  text-align: center;
  margin-bottom: 4rem;
}

.mod-projekt-ablauf__bg--left {
  position: absolute;
  left: -5rem;
  top: 0rem;
}

.mod-projekt-ablauf__bg--right {
  position: absolute;
  right: -5rem;
  bottom: 12rem;
}

/* ===== Grid: 3 oben, 2 versetzt unten, CTA mittig ===== */
.mod-projekt-ablauf__steps{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:20px;                      /* fixer Abstand */
  list-style:none;
  margin:0;
  padding:0;
  justify-items:stretch;         /* Items füllen die Spaltenbreite */
  align-items:start;
}

/* 5 Schritte platzieren (jeweils über 2 Spalten) */
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(1){ grid-column:1 / span 2; grid-row:1; }
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(2){ grid-column:3 / span 2; grid-row:1; }
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(3){ grid-column:5 / span 2; grid-row:1; }
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(4){ grid-column:2 / span 2; grid-row:2; }
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(5){ grid-column:4 / span 2; grid-row:2; }

/* CTA mittig unten (auch 2 Spalten breit) */
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta{
  grid-column:3 / span 2;
  grid-row:3;
}

/* ===== Hex-Waben: 1:1-Ratio + umlaufender Verlauf-Rahmen ===== */
.mod-projekt-ablauf__step,
.mod-projekt-ablauf__cta{
  position:relative;
  width:100%;                    /* füllt die zugewiesene Grid-Spaltenbreite */
  aspect-ratio:1 / 1.1;            /* 1:1 */
  padding:4rem 2rem;                /* bei Bedarf anpassen */
  text-align:center;
  box-sizing:border-box;
  overflow:visible;
  
  -webkit-filter: drop-shadow(0 0px 5px rgba(0,0,0,.12)) drop-shadow(0 0px 5px rgba(0,0,0,.08));
          filter: drop-shadow(0 0px 5px rgba(0,0,0,.12)) drop-shadow(0 0px 5px rgba(0,0,0,.08));
}

/* äußerer Layer = Verlauf (Rahmen) */
.mod-projekt-ablauf__step::before,
.mod-projekt-ablauf__cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--verlauf);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  z-index:0;
}

/* innerer Layer = Fläche; Scale erzeugt gleichmäßige Rahmenbreite */
.mod-projekt-ablauf__step::after,
.mod-projekt-ablauf__cta::after{
  content:"";
  position:absolute;
  top:3px; right:3px; bottom:3px; left:3px;  /* => 3px Rahmen */
  background: var(--weiss);                   /* CTA ggf. unten überschreiben */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index:1;
}

/* Inhalt über den Layern */
.mod-projekt-ablauf__step > *,
.mod-projekt-ablauf__cta > *{
  position:relative;
  z-index:2;
  color:var(--schwarz);
}

/* Typo-Feinschliff (optional) */
.mod-projekt-ablauf__counter {
  font-weight: 700;
  font-size: 3rem;
  margin: 0rem 0 2rem;
}
.mod-projekt-ablauf__step-title {
  margin: 0rem 0 0.25rem;
  font-size: 1.75rem;
}
.mod-projekt-ablauf__step-subtitle {
  margin: .25rem 0 1.25rem;
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 1.3em;
}
.mod-projekt-ablauf__step-text{ font-size:.95rem; line-height:1.45; }

/* CTA-Innenfläche (blau), Rahmen bleibt Verlauf */
.mod-projekt-ablauf__cta::after{
  background:linear-gradient(135deg, var(--dunkelblau), var(--ciblau));
}
.mod-projekt-ablauf__cta > *{ color:var(--weiss); }
.mod-projekt-ablauf__cta .btn{
  display:inline-block;
  margin-top:1rem;
  background:var(--weiss);
  color:var(--ciblau);
  padding:.6rem 1.2rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
}

/* Spalten-/Zeilenabstand getrennt steuern */
.mod-projekt-ablauf__steps{
  column-gap: 20px;   /* wie gewünscht */
  row-gap: 32px;      /* kleiner als vorher, Basisabstand */
}

/* Zweite Reihe optisch anheben (Items 4 und 5) */
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(4),
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(5){
  transform: translateY(-27%);   /* ~12 % der Wabenhöhe */
}

/* CTA etwas näher an die zweite Reihe ziehen */
.mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta{
  margin-top: -60%;
  padding-top: 40%;
}

@media (max-width: 1400px){
  .mod-projekt-ablauf__counter {
    font-size: 2rem;
    margin: 0rem 0 1rem;
  }

  .mod-projekt-ablauf__step-title {
    font-size: 1.5rem;
  }

  .mod-projekt-ablauf__step-subtitle {
    font-size: 1.25rem;
  }
}

@media (max-width: 1330px){
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta {
    padding-top: 30%;
  }
  
}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .mod-projekt-ablauf__steps{ grid-template-columns:repeat(4, 1fr); width: 50rem; margin: 0 auto;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(1){ grid-column:1 / span 2; grid-row:1; }
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(2){ grid-column:3 / span 2; grid-row:1; }
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(3){ grid-column:2 / span 2; grid-row:2; transform: translateY(-27%);}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(4){ grid-column:1 / span 2; grid-row:3; transform: translateY(-54%);}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(5){ grid-column:3 / span 2; grid-row:3; transform: translateY(-54%);}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta{ grid-column:2 / span 2; grid-row:4; margin-top: -90%;}

  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta {
    padding-top: 30%;
  }
}



@media (max-width: 980px){
  .mod-projekt-ablauf__steps {
    width: 100%;
  }
}

@media (max-width: 860px){
  .mod-projekt-ablauf__step, .mod-projekt-ablauf__cta {
    padding: 3rem 2rem;  
  }

  .mod-projekt-ablauf__step-subtitle {
    font-size: 1.1rem;
  }

  .mod-projekt-ablauf__step-title {
    font-size: 1.25rem;
  }

  .mod-projekt-ablauf__counter {
    font-size: 1.5rem;
  }
}

@media (max-width: 767px){
  /*
   .mod-projekt-ablauf__steps {
   width: 100%;
    grid-template-columns: auto;
   }
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step {
    width: auto;
  }
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(1){ grid-column:1 / span 2; grid-row:1; transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(2){ grid-column:2 / span 2; grid-row:2; margin-top:-32%; transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(3){ grid-column:1 / span 2; grid-row:3; margin-top:-32%; transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(4){ grid-column:2 / span 2; grid-row:4; margin-top:-32%; transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(5){ grid-column:1 / span 2; grid-row:5; margin-top:-32%; transform:none;}

  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta {
      grid-row: 6;
      margin-top: 0;
      margin-top:-32%;
       transform:none;
    }
*/

  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(1){ transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(2){ transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(3){ transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(4){ transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(5){ transform:none;}
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta {
       transform:none;
    }

  .mod-projekt-ablauf__step::before, .mod-projekt-ablauf__cta::before,
  .mod-projekt-ablauf__step::after {
    display: none;
  }

  .mod-projekt-ablauf__steps, .mod-projekt-ablauf__cta {
    display: block;
  }

  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step, .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta {
    width: auto;
    aspect-ratio: auto;
    padding: 1rem;
    margin-top: 1rem !important;
    background: linear-gradient(#fff, #fff) padding-box, var(--verlauf) border-box;
    border: 2px solid transparent;
  }

  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta {
    padding: 3rem 1rem;
  }

  .mod-projekt-ablauf__cta::after {
    background: linear-gradient(135deg, var(--dunkelblau), var(--ciblau));
    clip-path: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
}






/* Responsive Feinkorrektur: bei 4-Spalten-Layout Offsets etwas reduzieren 
@media (max-width: 820px){
  .mod-projekt-ablauf__steps{ row-gap: 28px; }
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(3),
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(4),
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step:nth-of-type(5){
    transform: translateY(-9%);
  }
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta{ margin-top: -4%; }
}

/* 1-Spalten-Stack: Offsets neutralisieren 
@media (max-width: 560px){
  .mod-projekt-ablauf__steps{ row-gap: 20px; }
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__step,
  .mod-projekt-ablauf__steps > .mod-projekt-ablauf__cta{
    transform: none !important;
    margin-top: 0 !important;
  }
}
*/


/** ACC **/

.mod-usecases-accordion {
  margin: 6rem 0 8rem;
  padding: 0 1rem;
  position: relative;
  overflow: hidden;
}


.mod-usecases-accordion__opener {
  text-align: center;
  margin-bottom: 3rem;
}

.mod-usecases-accordion__cta {
  text-align: center;
  margin: 2rem;
}

.mod-usecases-accordion__bg {
  position: absolute;
  height: auto;
  width: auto;
  left: 0rem;
  top: 0;
  opacity: 0.3;
}

/* Root-Container: KEIN Scroll, fester Rahmen */
.sideaccordion.mod-usecases-accordion__accordion {
  --acc-gap: 0px;
  --acc-collapsed: 112px;           /* Breite je inaktives Panel */
  --acc-transition: 400ms;

  display: flex;
  gap: var(--acc-gap);
  overflow: hidden;                 /* kein Scroll sichtbar */
  width: 100%;
  position: relative;
}

/* Panel-Grundform: standardmäßig Lamelle */
.mod-usecases-accordion__panel {
  position: relative;
  flex: 0 0 var(--acc-collapsed);   /* Lamellenbreite */
  min-height: 32rem;
  background: #0e0e0e;
  transition: flex-basis var(--acc-transition) ease, transform var(--acc-transition) ease;
  box-shadow:0px 0 10px #000;
}

/* Geöffnet: nimmt den gesamten verbleibenden Platz ein */
.mod-usecases-accordion__panel.is-open {
  flex: 1 1 auto;                   /* füllt Restfläche */
  display: flex;
}

/* Panelbild */
.mod-usecases-accordion__panel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
}

/* Vertikaler Trigger (Lamellentitel) */
.mod-usecases-accordion__trigger {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--acc-collapsed);
  display: flex;
  align-items: center;
  padding: 1.5rem.75rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55));
  cursor: pointer;
  z-index: 2;
  font-size: 1.5rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  user-select: none;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Aktives Panel: vertikaler Titel ausblenden (du wolltest "weg") */
.mod-usecases-accordion__panel.is-open .mod-usecases-accordion__trigger {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--acc-transition) ease;
}

/* Inhalt (Titel + Text) im offenen Bereich rechts der Lamellenbreite */
.mod-usecases-accordion__panel-content {
  position: relative;
  z-index: 3;
  margin-left: var(--acc-collapsed);
  padding: 1.25rem 1.25rem 1.5rem;
  color: #fff;
  max-width: 70ch;
  background: rgba(255,255,255,0.9);
  border-radius: 3px;
  align-self: end;
  margin-left: 5rem;
  margin-bottom: 3rem;
}

/* Geschlossen: Panelcontent wird per hidden entfernt */
.mod-usecases-accordion__panel-content[hidden] { display: none !important; }

/* Beispiel-Card im Content (optional) */
.mod-usecases-accordion__caption-title { margin: 0 0 .25rem; font-size: clamp(1.1rem, 1.2vw + .8rem, 1.6rem); }
.mod-usecases-accordion__caption-text p:last-child { margin-bottom: 0; }

/* Mobile: stacked untereinander */
.sideaccordion.mod-usecases-accordion__accordion.is-stacked {
  display: block;
}
.sideaccordion.mod-usecases-accordion__accordion.is-stacked .mod-usecases-accordion__panel {
  flex: initial;
  width: 100%;
  margin-bottom: var(--acc-gap);
  min-height: 0;
}
.sideaccordion.mod-usecases-accordion__accordion.is-stacked .mod-usecases-accordion__trigger {
  position: relative;
  inset: auto;
  width: 100%;
  writing-mode: initial;
  transform: none;
  opacity: 1 !important;
  pointer-events: auto !important;
  text-align: left;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.sideaccordion.mod-usecases-accordion__accordion.is-stacked .mod-usecases-accordion__panel-content {
  margin-left: 0;
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce) {
  .mod-usecases-accordion__panel { transition: none; }
}

.mod-usecases-accordion__panel-content ul {
  margin-top: 1rem;
}

.mod-usecases-accordion__panel-content li {
  font-size: 1rem;
  line-height: 1.3em;
  margin: 0.25rem 0;
  padding-left: 1.25rem;
  color: #000;
}

.mod-usecases-accordion__panel-content li:before {
  content:"";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(images/icon_liste.png) 0 0 no-repeat;
  background-size: 100%;
  margin-left: -1.25rem;
  margin-right: 0.25rem;
}

@media (max-width: 1400px){
  .mod-usecases-accordion__panel-content {
    max-width: 100%;
    margin-left: 2rem;
    margin-bottom: 2rem;
    width: calc(100% - 4rem);
}


}

/* ===== Stacked-Version (<=1024px): Bild als BG in Tabs, aktiv 16:9 + Overlay-Card ===== */
@media (max-width: 1024px) {
  .sideaccordion.mod-usecases-accordion__accordion {
    display: block;
  }

  /* Basiswerte für die „Tab“-Höhe */
  .mod-usecases-accordion__panel {
    --tab-h: 70px;                 /* Höhe des geschlossenen Tabs */
    position: relative;
    width: 100% !important;
    margin: 0 0 12px;
    overflow: hidden;
    background: transparent;       /* kein schwarzer Block */
    transition: height 280ms ease; /* nur optisch; nicht kritisch */
  }

  /* Bild immer als Hintergrund vorhanden */
  .mod-usecases-accordion__panel-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* dunkler Film für Lesbarkeit im Tab-Zustand */
  .mod-usecases-accordion__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45));
    pointer-events: none;
  }

  /* Geschlossen: nur „Tab“-Höhe sichtbar – Bild liegt schon drunter */
  .mod-usecases-accordion__panel:not(.is-open) {
    height: var(--tab-h);
  }

  /* Trigger wird zur horizontalen Tab-Leiste und füllt den sichtbaren Bereich */
  .mod-usecases-accordion__trigger {
    position: absolute;
    inset: 0 0 auto 0;             /* oben auflegen */
    height: var(--tab-h);
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    writing-mode: initial;         /* nicht mehr vertikal */
    transform: none;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: transparent;       /* Film kommt von ::after */
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Offen: Panel zeigt Bild im 16:9-Frame, Trigger verschwindet */
  .mod-usecases-accordion__panel.is-open {
    height: auto;                  /* natürliche Höhe */
    margin-bottom: 16px;
  }
  .mod-usecases-accordion__panel.is-open .mod-usecases-accordion__trigger {
    display: none;
  }
  .mod-usecases-accordion__panel.is-open .mod-usecases-accordion__panel-media {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 9;          /* Bildhöhe definieren */
  }
  .mod-usecases-accordion__panel.is-open::after {
    background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  }

  /* Content-Card als Overlay über dem Bild (unten links) */
  .mod-usecases-accordion__panel-content {
    position: absolute;
    left: clamp(16px, 4vw, 56px);
    bottom: clamp(16px, 4vw, 56px);
    right: auto;
    margin: 0;                     /* Lamellen-Offset entfernen */
    max-width: min(720px, 88%);
    background: rgba(255,255,255,.92);
    color: #111;
    padding: 16px 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    z-index: 3;
  }
  /* Im geschlossenen Zustand keine Card zeigen */
  .mod-usecases-accordion__panel:not(.is-open) .mod-usecases-accordion__panel-content {
    display: none !important;
  }

  /* Bullet-List im Overlay */
  .mod-usecases-accordion__panel-content ul { margin-top: .75rem; }
  .mod-usecases-accordion__panel-content li { color: #000; }

  /* Sicherheit: keine alten Desktop-Werte vererben */
  .mod-usecases-accordion__panel-content { margin-left: 0 !important; }
}