/* ========================================================================
   style.css – Hauptstylesheet
   ======================================================================== */

/* --------------------------
      Icon-Basis
   -------------------------- */
.icon {
  display: inline-block;
  inline-size: 1.1em;
  block-size: 1.1em;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon--arrow { inline-size: 1.15em; block-size: 1.15em; }
.icon--contact { inline-size: 1.4rem; block-size: 1.4rem; }
.icon--database { inline-size: 2.1rem; block-size: 2.1rem; }
.icon--social { inline-size: 1.25rem; block-size: 1.25rem; }
.icon--check { inline-size: 1.2rem; block-size: 1.2rem; color: var(--color-primary); }

/* --------------------------
   Hero – nur non-layout Styles
   -------------------------- */

/* Keine Breite/Padding/Position animieren */
.hero .hero__aside{
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

/* Eyebrow, Highlights, Titel – unkritisch für Layout */
.hero__eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-active);
}

.hero__highlights {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 52ch;
}
.hero__highlights li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-white);
}
.hero__highlights .icon { flex-shrink: 0; inline-size: 1.2rem; block-size: 1.2rem; }
.hero__highlights span { display: block; }

/* Einmalig konsolidierter Titel-Block */
.hero .hero__title{
  font-weight: var(--font-heading-weight);
  font-size: clamp(2rem, 4vw + 1rem, 4.2rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size-adjust: .52;
  text-transform: capitalize;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------
   Buttons & Hero-Actions
   -------------------------- */
.hero__actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.5rem;
}
.hero__btn-quote {
    border: none;
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size-adjust: .52;
  background-color: var(--color-active);
  color: var(--color-dark);
  border-radius: 0;
  text-transform: uppercase;
  text-decoration: none;
  gap: 0.3em;
  transition: transform 0.2s, opacity 0.2s;
  cursor: pointer;
}
.hero__btn-quote:hover {
  transform: scale(0.95);
  opacity: 0.9;
  background-color: var(--color-active);
  color: var(--color-dark);
}
.hero__contact--inline { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.hero__contact-title { margin: 0; font-size: 1.2rem; color: var(--color-active); font-weight: 600; text-align: center; }
.hero__contact-phone { margin: 0; font-size: 1.1rem; color: var(--color-white); font-weight: 600; text-align: center; }

/* -------------------------------
   Drei-Schritte-Plan Sektion
   ------------------------------- */
.plan-section { padding: 4rem 0; }
.plan-header { text-align: left; margin-bottom: 2rem; }
.plan-header__label {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-active);
  border-bottom: 2px solid var(--color-active);
  margin-bottom: 0.5rem;
}
.plan-section .plan-header__label,
.faq-section .plan-header__label,
.blog-section .plan-header__label {
  color: var(--color-dark);
  border-bottom-color: var(--color-dark);
}
.plan-header__title, .blog__title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size-adjust: .52;
  margin: 0.5rem 0 1rem;
  color: var(--color-dark);
}
.plan-header__intro { margin-bottom: 1rem; line-height: 1.6; color: var(--color-dark); }
.plan-header__list { list-style: disc inside; margin: 0; padding-left: 1rem; line-height: 1.6; }
.plan-header__list li { margin-bottom: 0.5rem; color: var(--color-dark); }

/* Grid für die drei Boxes */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 767px) { .plan-cards { grid-template-columns: 1fr; } }

/* Einzelne Schritt-Boxen */
.plan-box {
  background: var(--color-overlay);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.plan-box__title { color: var(--color-white); margin-bottom: 0.75rem; }
.plan-box p { line-height: 1.6; color: var(--color-white); }

/* Abschluss-Text unter den Boxen */
.plan-section__conclusion {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--color-dark);
}
/* Links im hellen Textbereich der Plan-Sektion */
.plan-section .container > p a,
.plan-section .container > p a:hover {
  color: var(--color-dark);
}

/* Links in dunklen Plan-Boxen behalten die Akzentfarbe */
.plan-section .plan-box p a,
.plan-section .plan-box p a:hover {
  color: var(--color-active);
}

/* ==============================
   style.css – Ergänzungen für Plan-Grid
   ============================== */
.plan-header-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}
/* .plan-header nutzt die bestehenden Styles */

.plan-intro__text { margin-bottom: 1rem; color: var(--color-dark); line-height: 1.6; }
.plan-intro__list { padding-left: 1rem; margin: 0; line-height: 1.6; }
.plan-intro__list li { margin-bottom: 0.5rem; color: var(--color-dark); }

/* Bild unter dem Text in der Plan-Box */
.plan-box__img-wrap {
  margin: -1.5rem -1.5rem 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.plan-box__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.plan-box__img-wrap:hover img { transform: scale(1.05); }

/* Plan-Box Footer */
.plan-box__footer {
  text-align: center;
  padding: 2px 0;
  display: grid;
  row-gap: 0.5rem;
  margin-top: auto; /* Footer unten andocken */
}
.plan-box__divider { width: 100%; height: 1px; background-color: var(--color-border); }
.plan-box__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}
.plan-box__link .icon { inline-size: 1.1rem; block-size: 1.1rem; }
.plan-box__link:hover { color: var(--color-active); }

/* -------------------------------
   About-Section
   ------------------------------- */
.about-section {
  position: relative;
  background-color: var(--color-dark);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* CSS3-konform: nur url() */
  background-image: url("/image.php?src=assets/images/pattern.jpg&w=1600&fm=jpg&q=82");
  padding: 4rem 0;
  color: var(--color-white);
}

.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  opacity: 0.8;
}
.about-section__inner {
  position: relative;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: 2rem;
}
.about-section__label {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: 0.5rem;
  padding-bottom: 20px;
}
.about-section__title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 3rem;
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
  color: var(--color-white);
}
.about-section__intro { margin-bottom: 1.5rem; line-height: 1.6; }

/* Liste */
.about-section__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.about-section__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
}
.about-section__list li span { flex: 1; display: block; }
.about-section__list .icon--check { margin-top: 0.1em; }

/* Bilder-Layout */
.about-section__images {
  display: grid;
  grid-template-areas:
    "large"
    "small";
  gap: 1rem;
}
.about-section__img--large { grid-area: large; }
.about-section__img--small { grid-area: small; max-width: 60%; margin-left: auto; }
.about-section__img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 4px solid var(--color-white);
}

/* Button zentrieren */
.button--center { display: block; width: max-content; margin: 3rem auto; }
.button--center .icon { margin-right: 0.5rem; }

/* Zahlen & Fakten – Variante */
.about-section__inner--widefacts{
  display: grid;
  grid-template-columns: 0.55fr 0.45fr;
  gap: 12px;
  align-items: start;
}
.about-section__content,
.about-section__images{ padding: 0; }
.about-section__images{ justify-self: start; margin: 0; }

/* Karte */
.facts-card{
  --card-bg: rgba(0,0,0,.18);
  --card-line: var(--e-global-color-298291f, #FFB700);
  --card-text: var(--e-global-color-05ff4c1, #fff);
  --card-muted: var(--e-global-color-16b54ce, #DEDEDE);
  --card-shadow: 0 10px 30px rgba(0,0,0,.25);

  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem clamp(1rem, 2vw, 1.75rem);
  background: linear-gradient(180deg, var(--card-bg), rgba(0,0,0,.08));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  color: var(--card-text);
  margin-left: 0;
}
.facts-card__header{ display: flex; align-items: center; gap: 14px; }
.facts-card__icon{
  width: 60px; height: 60px; display: grid; place-items: center;
  border: 2px solid var(--card-line); border-radius: 12px;
  outline: 5px solid rgba(255,183,0,.12); flex: 0 0 60px; color: var(--card-line);
}
.facts-card__icon .icon{ inline-size: 34px; block-size: 34px; }
.facts-card__title{
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1vw + .9rem, 1.35rem);
  font-weight: var(--font-heading-weight);
  margin: 0; color: var(--card-text);
}

/* Liste */
.facts-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}
.facts-list li{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .7rem .75rem;
  background: none;
  border: none;
  border-radius: 10px;
}
.facts-list__label{ font-weight: 500; color: var(--card-muted); }
.facts-list__value{
  padding: .3rem .6rem; border-radius: 8px;
  border: none; background: none; color: var(--card-text); white-space: nowrap;
}
.facts-card::before{ content: none; }

/* Responsive für Facts */
@media (max-width: 768px){
  .about-section__inner--widefacts{ grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 767px){
  .facts-card{ margin: 1.25rem auto 0; max-width: 100%; }
}

/* ===== Gründe/Preise – Sektion (2-Spalten) ===== */
.reasons-section { padding: 4rem 0; background: var(--color-white); }
.reasons__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.reasons__content p { line-height: 1.6; color: var(--color-text); }

/* Video-Platzhalter (2-Klick) */
.reasons__video { width: 100%; }
.video-consent {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--color-dark);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.video-consent--sh8F1pjeSrI {
  background-color: #000;
  /* CSS3-konform: nur url() */
  background-image: url("/image.php?src=assets/images/yt-sh8F1pjeSrI.jpg&w=960&fm=jpg&q=80");
  background-size: cover;
  background-position: center;
}

.video-consent[data-poster] { background-image: attr(data-poster url); background-size: cover; background-position: center; }

/* Button im Platzhalter */
.video-consent__button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0.9rem 2rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  border: none; cursor: pointer;
  background: var(--color-button); color: var(--color-white);
}
.video-consent__button:hover { background: var(--color-btn-hover); }
.video-consent__icon { font-size: 1.2rem; line-height: 1; }
.video-consent__hint {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: .5rem .75rem;
  font-size: .9rem; line-height: 1.3; color: var(--color-white);
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
  text-align: center;
}
.video-consent__hint a { color: var(--color-primary); text-decoration: underline; }

/* ===== FAQ Section ===== */
.faq-section {
  padding: 2rem 0;
  --faq-closed-bg: #E6E8EA;
  --faq-open-bg:   var(--color-primary);
  --faq-text:      var(--color-dark);
}
.faq__title { margin: 0 0 1rem 0; }

.faq__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.faq-accordion { margin-top: 1rem; }

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
  overflow: hidden;
}
.faq-item + .faq-item { margin-top: 12px; }
.faq-item__summary {
  list-style: none; cursor: pointer; margin: 0;
  padding: 1rem 3rem 1rem 1.25rem;
  font-weight: 700; line-height: 1.3; color: var(--faq-text);
  background: var(--faq-closed-bg);
  position: relative;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.faq-item__summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.faq-item__summary::after {
  content: "▾";
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem; line-height: 1; opacity: .9;
  transition: transform .2s ease;
}
.faq-item[open] { border-color: var(--faq-open-bg); }
.faq-item[open] .faq-item__summary { background: var(--faq-open-bg); color: var(--faq-text); }
.faq-item[open] .faq-item__summary::after { transform: translateY(-50%) rotate(180deg); }
.faq-item__content { padding: 0 1.25rem 1.25rem; line-height: 1.6; color: var(--color-text); }

/* ===== Brand-Grid (rechte FAQ-Spalte) ===== */
.brand-showcase__title { margin: 0 0 .5rem 0; font-size: 1.25rem; }
.brand-showcase__intro { margin: 0 0 1rem 0; color: var(--color-text); }

/* Slider-Grundstruktur */
.brand-grid { position: relative; }
.brand-grid::after,
.brand-grid__all::after {
  content: "";
  display: block;
  block-size: calc(44px + 10px);
}
.brand-grid .brand-grid__all::after { display: none; }
.brand-grid--hydrated::after {
  content: none;
  display: none;
}
.brand-grid__viewport { overflow: hidden; }
.brand-grid__track { display: flex; transition: transform .45s ease; will-change: transform; }
.brand-grid__page {
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--brand-cols, 4), minmax(0,1fr));
  gap: 18px 22px;
  padding: 4px 0;
  list-style: none;
  margin: 0;
}
/* Logo-Item */
.brand-grid__page li > img {
  display: block;
  margin: 0 auto;
  max-height: 160px;
  width: auto;
  filter: grayscale(100%) opacity(.8);
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand-grid__page li > img:hover { filter: none; opacity: 1; transform: translateY(-1px); }

/* Controls & Dots */
.brand-grid__controls {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 10px;
}
.brand-grid__btn {
  appearance: none; border: 1px solid var(--color-border);
  background: var(--color-white); color: var(--color-dark);
  border-radius: 999px; padding: 6px 10px; cursor: pointer;
}
.brand-grid__btn:hover { background: #f5f6f7; }
.brand-grid__btn[disabled] { opacity: .5; cursor: default; }
.brand-grid__dots { display: flex; gap: 6px; }
.brand-grid__dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.brand-grid__dot::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: #c8ccd0;
  transition: background .2s ease;
}
.brand-grid__dot[aria-current="true"]::after { background: var(--color-primary); }
.brand-grid__dot:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Pause bei Hover: nur das Auto-Play, nicht die Buttons */
.brand-grid:hover { --brand-paused: 1; }

/* Responsive Brand-Grid */
@media (max-width: 1024px) {
  .brand-grid__page { gap: 16px 18px; }
  .brand-grid__page li > img { max-height: 54px; }
}
@media (max-width: 768px) {
  .brand-grid__page li > img { max-height: 44px; }
}

/* Fallback-Layout, falls JS nicht greift */
.brand-grid__all{
  list-style:none;
  margin:0; padding:4px 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px 22px;
}
.brand-grid__all img{
  display:block; margin:0 auto;
  max-height:60px; width:auto;
  filter:grayscale(100%) opacity(.8);
  transition:filter .2s ease,opacity .2s ease,transform .2s ease;
}
.brand-grid__all img:hover{ filter:none; opacity:1; transform:translateY(-1px); }

/* ==== Blog Section ==== */
.blog__intro { margin: 0 0 .25rem 0; color: var(--color-text); }
.blog__more { margin: 0 0 1.25rem 0; }
.blog__more-link {
  text-decoration: underline;
  font-weight: 600;
  color: var(--color-dark);
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2rem;
}

/* Card */
.blog-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.blog-card__media { display: block; position: relative; overflow: hidden; aspect-ratio: 16/9; }
.blog-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1) rotate(0deg);
  transition: transform .35s ease;
  will-change: transform;
}
.blog-card:hover .blog-card__media img {
  transform: scale(1.06) rotate(1.25deg);
}
.blog-card__content { padding: 1.1rem 1.1rem 1.25rem; }
.blog-card__title { margin: 0 0 .5rem 0; line-height: 1.25; }
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { text-decoration: underline; }.blog-card__title a:hover { text-decoration: underline; }
.blog-card__meta {
  margin: 0 0 .75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font-size: .9rem;
  color: rgba(38, 70, 83, 0.75);
}
.blog-card__meta-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.blog-card__meta-item + .blog-card__meta-item::before {
  content: "•";
  margin-right: .5rem;
  color: rgba(38, 70, 83, 0.5);
}
.blog-card__excerpt { margin: 0; color: var(--color-text); line-height: 1.6; }
.blog-card__cta { margin: .75rem 0 0; }
.blog-card__cta a {
  font-weight: 600;
  text-decoration: underline;
  color: var(--color-dark);
}
.blog-card__cta a:hover { color: var(--color-primary); }

/* Defer für Offscreen-Sektionen */
.defer-section {
  content-visibility: auto;
  contain: layout paint style;
  /* CSS3-Fallback statt contain-intrinsic-size */
}

/* Universeller Trenner */
.divider{
  display:block;
  height:0;
  border:0;
  border-top:2px solid var(--color-border);
  width: calc(100% - var(--divider-inset, 40px) * 2);
  margin: 2.5rem auto;
}
@media (max-width: 768px){ .divider{ --divider-inset: 20px; } }

/* Facts-Box rechts ausrichten */
.about-section__images{
  justify-self: end;         /* wenn Parent GRID ist */
  margin-left: auto;         /* wenn Parent FLEX ist */
  display: flex;             /* zusätzlich Inhalte rechts ausrichten */
  justify-content: flex-end;
  align-items: flex-start;
}
.about-section__images .facts-card{ max-width: 420px; }

/* Facts-Card breiter + Icon/Titel in einer Zeile */
.about-section__images .facts-card{
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "list list";
  column-gap: 12px;
  row-gap: 12px;
  align-items: center;
}
.facts-card__icon{ grid-area: icon; display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); }
.facts-card__title{ grid-area: title; margin: 0; }
.facts-card__icon .icon{ inline-size: 22px; block-size: 22px; }
.facts-list{ grid-area: list; margin: 0; padding: 0; list-style: none; }

/* optional: Zeilenlook in der Facts-Liste */
.facts-list li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: none;
}
.facts-list li:last-child{ border-bottom: 0; }
@media (max-width: 768px){ .about-section__images .facts-card{ width: 100%; } }

/* Größere Logos im Marken-Grid */
.brand-grid { --brand-logo-h: 100px; }
.brand-grid__page li{ display:flex; align-items:center; justify-content:center; padding: 6px; }
.brand-grid__page li > img{ height: var(--brand-logo-h); max-height: none; width: auto; }
/* Fallback, falls JS aus ist */
.brand-grid__all img{ height: var(--brand-logo-h); max-height: none; width: auto; }
@media (max-width: 1024px){ .brand-grid{ --brand-logo-h: 80px; } }
@media (max-width: 768px){  .brand-grid{ --brand-logo-h: 64px; } }

html { scroll-behavior: smooth; }

/* Platz oberhalb des Ziels, falls Top-Bar/Sticky-Header vorhanden sind */
#angebot-form { scroll-margin-top: 120px; }

/* Schlagwörter */
.keywords-section{ padding: 2.5rem 0; }
.keywords__title{
  margin: 0 0 1rem 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.8rem, 2.2vw + 1rem, 2.6rem);
  color: #1B667A;
}
.keywords-list{
  list-style: none;
  margin: 0; padding: 0;
  column-count: 4; column-gap: 3rem;
}
.keywords-list li{
  break-inside: avoid;
  margin: 0 0 .5rem 0;
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.keywords-list .icon--check { inline-size: 1rem; block-size: 1rem; margin-top: 0.1em; }
/* Links */
.keywords-list a{ color: #0C324F; text-decoration: none; }
.keywords-list a:hover{ color: var(--color-primary); text-decoration: underline; }
/* Responsiv */
@media (max-width: 1200px){ .keywords-list{ column-count: 3; } }
@media (max-width: 900px){  .keywords-list{ column-count: 2; } }
@media (max-width: 600px){  .keywords-list{ column-count: 1; } }

.loadmore-wrap { text-align: center; margin-top: 1.5rem; }
#loadMoreBtn.button { min-width: 12rem; justify-content: center; display: inline-flex; align-items: center; gap: .5rem; }
#loadMoreBtn.button.is-loading { cursor: wait; opacity: .7; }
.loadmore-wrap{ text-align:center; margin-top:1.5rem; }
.loadmore-btn{ display:inline-flex; justify-content:center; align-items:center; min-width:12rem; gap:.5rem; }

/* Abstand der Blogliste nach unten (vor Footer/Band) */
.blog-section { margin-bottom: 4rem; }
@media (min-width: 992px){ .blog-section { margin-bottom: 6rem; } }

/* (kleiner Zusatz, falls Button noch sichtbar ist) */
.loadmore-wrap { margin-bottom: 2rem; }

/* Beitragsdetail: Hero-Bild & H1 dunkel */
.hero__media img{ width:100%; height:auto; display:block; border-radius:12px; }
.post .hero__title,
.post__title{ color:var(--color-dark); }
.post .post__meta{ margin:.25rem 0 1rem; opacity:.8; font-size:.95rem; }
.post{ margin-top:2rem; }

/* Post content headings and paragraphs */
.post__content h2,
.post__content-h2 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2.2rem);
  color: var(--color-dark);
  margin: 1.5rem 0 .75rem;
}
.post__content h3,
.post__content-h3 {
  font-size: clamp(1.25rem, 1vw + .8rem, 1.8rem);
  color: var(--color-dark);
  margin: 1.25rem 0 .5rem;
}
.post__content p,
.post__content-p {
  color: var(--color-dark);
  line-height: 1.6;
}

.post__content figure {
  margin: 1.5rem 0;
}

.post__content img,
.post__content figure img {
  display: block;
     width: 100%;
  max-width: min(100%, 2000px);
  height: auto;
  margin: 1.5rem auto;
}

.post__content figure img {
  margin: 0 auto;
}


.blog-cta {
  padding: 3rem 0 2rem;
}
.blog-cta__card {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem;
  background: var(--color-overlay);
  color: var(--color-white);
}
.blog-cta__title {
  margin: .5rem 0 1rem;
  font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
  color: var(--color-white);
}
.blog-cta__content p { margin: 0; max-width: 52ch; color: rgba(255,255,255,.85); }
.blog-cta__actions { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.blog-cta__actions .button { background: var(--color-primary); color: var(--color-dark); }
.blog-cta__actions .button:hover { background: var(--color-primary); opacity: .85; }
.blog-cta__hint { margin: 0; color: rgba(255,255,255,.8); font-size: .95rem; }
.blog-cta__hint a { color: var(--color-white); font-weight: 600; text-decoration: none; }
.blog-cta__hint a:hover { text-decoration: underline; }

.blog-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination__item { margin: 0; }
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.5rem;
  padding: .6rem 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
}
.pagination__link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination__link--current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark);
  cursor: default;
}
.pagination__link--disabled {
  color: rgba(38,70,83,.4);
  border-color: rgba(38,70,83,.15);
  cursor: not-allowed;
}

.editorial-box {
  background: var(--color-overlay);
  color: var(--color-white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.15);
}
.editorial-box__title { margin: 0 0 1rem 0; color: var(--color-white); }
.editorial-box p { margin: 0 0 1rem 0; color: rgba(255,255,255,.85); }
.editorial-box__list {
  margin: 0;
  padding-left: 1.2rem;
  color: rgba(255,255,255,.85);
}
.editorial-box__list li { margin-bottom: .4rem; }


/* Button-Icon-Size */
.button .icon{ inline-size:1.25rem; block-size:1.25rem; margin-inline-end:.5rem; vertical-align:middle; }

/* ===== Blogpost – Breadcrumb + Byline + Abstände ===== */
.plan-section--post { padding-top: clamp(12px, 1.8vw, 24px); }

/* Container der Artikel-Seite direkt hochziehen */
.plan-section--post .post { margin-top: 0 !important; }

/* Breadcrumb ohne Nummerierung und kompakt */
.breadcrumb { padding: 0; margin: 0 0 .25rem; }
.breadcrumb__list{
  list-style: none;               /* nimmt 1./2. weg */
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: .95rem; align-items: baseline;
  margin: 0; padding: 0;
}
.breadcrumb__item { color: var(--color-text); }
.breadcrumb__item::after{ content: "›"; margin: 0 .5rem; color: #9aa7b1; }
.breadcrumb__item.is-current::after{ content: ""; }
.breadcrumb__item a{ color: var(--color-dark); text-decoration: none; }
.breadcrumb__item a:hover{ color: var(--color-primary); text-decoration: underline; }
/* --- Blog Post Layout Tweaks --- */
.container.post { margin-top: 0; }                 /* "container post mal margin-top 0" */

/* Byline kursiv + dezente Farbe */
.post__byline { 
  font-style: italic;
  color: #6b7b85;
  margin: .25rem 0 1rem;
}
.post__byline strong { font-weight: 600; font-style: italic; }

/* Breadcrumb: keine Nummern, kompakt & ohne Marker */
.breadcrumb { padding: .25rem 0 0; margin: 0 0 .25rem; }
ol.breadcrumb__list { 
  list-style: none !important; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  gap: .5rem; 
  flex-wrap: wrap; 
  font-size: .95rem;
}
.breadcrumb__item::marker { content: ""; }         /* falls Browser Marker rendert */
.breadcrumb__item::after { 
  content: "›"; 
  margin: 0 .5rem; 
  color: #9aa7b1;
}
.breadcrumb__item.is-current::after { content: ""; }

/* --- Blog: Tabellen allgemein --- */
.post__content .table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:.5rem 0 1rem;
}

/* Breite & Kanten */
.post__content table{
  border-collapse:collapse;   /* saubere Kanten */
  width:max-content;          /* wächst nur so breit wie nötig */
  min-width:100%;             /* füllt den Container, wenn klein */
}

/* Zellabstände (je 3px „Luft“) */
.post__content th,
.post__content td{
  padding:3px 6px;
  vertical-align:top;
  text-align:left;
}

/* Kopf & Caption sauber */
.post__content thead th{
  font-weight:600;
}
.post__content caption{
  caption-side:top;
  text-align:center;
  margin:0 0 .5rem;
  font-weight:600;
}
/* ==== Blogpost: 2-Spalten-Layout + Sidebar ==== */
.post-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 2rem;
  align-items: start;
  margin-top: 1rem;
}
.post-layout__main { min-width: 0; } /* für sauberes Zeilenumbruchverhalten */
.post-layout__aside { position: sticky; top: 90px; align-self: start; }

/* Breadcrumb mit Label */
.breadcrumb__inner { display: flex; align-items: baseline; gap: 12px; }
.breadcrumb__label{
  margin: 0;
  font-weight: 700;
  color: var(--color-dark);
  opacity: .9;
}

/* Sidebar-Karten */
.sidebar-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1rem;
}
.sidebar-card + .sidebar-card{ margin-top: 1rem; }
.sidebar-card__title{
  margin: 0 0 .75rem 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 1vw + .8rem, 1.35rem);
  color: var(--color-dark);
}

/* TOC */
.toc__list{
  margin: 0; padding-left: 1.25rem;
  line-height: 1.45;
}
.toc__list li{ margin: .25rem 0; }
.toc__list a{
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 1px dotted rgba(38,70,83,.35);
}
.toc__list a:hover{
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Neue Beiträge (Liste) */
.sidebar-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
}
.sidebar-list__item{ display: grid; gap: 2px; }
.sidebar-list__link{
  color: var(--color-dark); text-decoration: none; font-weight: 600;
}
.sidebar-list__link:hover{ text-decoration: underline; }
.sidebar-list__meta{
  font-size: .9rem; color: rgba(38,70,83,.7);
}

/* Ähnliche Beiträge (Schlagwort-Look) */
.sidebar-tags{
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem;
}
.sidebar-tags a{
  display: inline-block;
  padding: .35rem .6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-dark);
  font-size: .95rem;
}
.sidebar-tags a:hover{
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* CTA in Sidebar */
.sidebar-cta{
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
  background: var(--color-overlay);
}
.sidebar-cta .button{
  width: 100%;
  justify-content: center;
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-dark);
}
.sidebar-cta .button:hover{ opacity: .9; }
.sidebar-cta__hint{
  margin: .6rem 0 0; font-size: .95rem; color: rgba(255,255,255,.85);
}

/* Anker-Ziele: H2 nicht vom Sticky-Header verdecken */
.post__content h2{ scroll-margin-top: 120px; } /* analog #angebot-form vorhanden */
/* Hero/Title dunkler ist schon vorhanden: .post .hero__title/.post__title */ 

/* Responsive: Sidebar unter den Content */
@media (max-width: 1024px){
  .post-layout{ grid-template-columns: 1fr; }
  .post-layout__aside{ position: static; }
}
/* --- Sidebar Titel kleiner anstatt globales H2 --- */
.post-layout__aside .sidebar-card h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.25rem, .6vw + 1rem, 1.6rem);
  line-height: 1.25;
  margin: 0 0 .75rem;
  color: var(--color-dark);
}

/* TOC/Link-Optik an Theme anlehnen (keine Browser-Blaufarbe) */
.post-layout__aside a {
  color: var(--color-dark);
  text-decoration: none;
}
.post-layout__aside a:hover { color: var(--color-primary); }

/* CTA-Box neutral halten (nur Rahmen & Abstand) */
.sidebar-cta {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
  background: var(--color-overlay);
}
.sidebar-cta__hint {
  margin: .6rem 0 0;
  font-size: .95rem;
  color: rgba(255,255,255,.85);
}