/* ===========================
   Grundlayout Karten
   =========================== */
.amex-card {

  /* Kein Hintergrund / Rahmen -> transparent */
  border: none;
  background: transparent;
  padding: 0;
  margin: 10px;
  font-family: system-ui, sans-serif;
  box-shadow: none;
  flex-grow: 1; /* Wichtig, damit Karten in einer Flexbox/Grid die gleiche Höhe annehmen */

}
.amex-card-inner {

  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* Stellt sicher, dass der innere Bereich die volle Höhe nutzt */

}
.amex-ribbon {

  position: absolute;
  top: 15px;
  right: -25px;
  background: #f1c40f;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 5px 25px;
  transform: rotate(45deg);
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);

}
.amex-card-image {

  text-align: center;
  margin-bottom: 12px;

}
.amex-card-image img {

  max-width: 100%;
  height: auto;
  border-radius: 6px;

}
.amex-card-title {

  font-weight: 600;
  margin: 0 0 10px;
  text-align: left;
  line-height: 1.2;
  /* Stellt sicher, dass der Titelbereich immer gleich hoch ist */
  min-height: calc(1.2 * 2 * 1em + 10px); /* 2 Zeilenhöhe + margin */

}
/* Titel in zwei Zeilen stylen */
.amex-title-line-1,
.amex-title-line-2 {

    display: block;
    line-height:3px;

}
/* ===========================
   Bewertung
   =========================== */
.amex-rating-row {

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;

}
.amex-rating-row .label {

  font-size: 14px;
  color: #333;

}
.amex-rating-row .value {

  background: #f8f2fb;
  color: #6b2ca1;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 16px;

}
/* ===========================
   Trenner
   =========================== */
.amex-card-divider {

  border: 0.5px solid #ccc;
  margin: 25px 0 25px 0;

}
/* ===========================
   Vorteile
   =========================== */
.amex-benefits {

  font-size: 14px;
  margin-bottom: 12px;
  flex: 1; /* Erlaubt diesem Block, den restlichen vertikalen Platz einzunehmen */

}
.amex-benefits .amex-toggle-benefits {

  font-size: 14px;
  color: #6b2ca1;
  text-decoration: none;
  font-weight: bold;

}
.amex-benefits .amex-toggle-benefits:hover {

  text-decoration: underline;

}
.amex-toggle-benefits {

    text-decoration: none;

}
/* ===========================
   Details
   =========================== */
.amex-details {

  margin-bottom: 12px;
  flex: 1; /* Erlaubt diesem Block, den restlichen vertikalen Platz einzunehmen */

}
.amex-details .row {

  display: flex;
  justify-content: space-between;
  margin: 6px 0;

}
.amex-details .row span:first-child {

  color: #333;

}
.amex-details .row span:last-child {

  font-weight: 600;

}
/* ===========================
   Aktionen (Links)
   =========================== */
.amex-actions {

  margin-top: 12px;
  display: flex;
  justify-content: flex-end; /* cta-button nach rechts schieben */
  align-items: center;
  position: relative; /* Wichtig für die Positionierung der Unterelemente */
  margin-bottom:25px;

}
.amex-actions .cta {

  order: 2; /* Macht den CTA-Button zum zweiten Element */
  background: linear-gradient(90deg, #a67cf7, #c48cf7);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;

}
.amex-actions .cta:hover {

  background: linear-gradient(90deg, #8a5ce2, #a36ee5);

}
.amex-actions .sec-link {

  order: 1; /* Macht den sekundären Link zum ersten Element */
  font-size: 14px;
  color: #333;
  text-decoration: underline;
  margin-right: auto; /* Schiebt das Element ganz nach links */

}
/* Neue Klassen für den Vergleichslink */
.amex-toggle-compare {

  text-decoration: none;
  color: #0073aa;
  font-weight: normal;
  transition: all 0.2s;

}
.amex-toggle-compare:hover {

    text-decoration: underline;

}
/* Positionierung der Vergleichsbuttons/Links */
.amex-card .amex-bottom-left-link {

    position: absolute;
    bottom: 15px;
    left: 15px;

}
.amex-card .amex-bottom-right-link {

    position: absolute;
    bottom: 15px;
    right: 15px;

}
.amex-card .amex-bottom-left-button {

    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 4px;

}
.amex-card .amex-bottom-right-button {

    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 4px;

}
/* ===========================
   Slider Layout
   =========================== */
.amex-slider-wrapper {

  position: relative;
  overflow: hidden;
  margin: 0 -10px;
  padding: 0 10px;

}
.amex-slider-track {

  display: flex;
  transition: transform 0.3s ease-in-out;

}
.amex-slider-nav {

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;

}
.amex-slider-nav button {

  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;

}
/* NEU: Anpassung der Kartenbreite für Slider */
.amex-slider-track .amex-card {

  flex-shrink: 0;
  width: calc(25% - 20px); /* 4 Karten auf Desktop */

}
@media (max-width: 1200px) {

  .amex-slider-track .amex-card {
    width: calc(33.333% - 20px); /* 3 Karten auf Tablet */
  
}
}
@media (max-width: 768px) {

  .amex-slider-track .amex-card {
    width: calc(50% - 20px); /* 2 Karten auf kleineren Tablets */
  
}
}
@media (max-width: 480px) {

  .amex-slider-track .amex-card {
    /* Mobile Ansicht: Eine Karte + kleiner Einblick */
    width: calc(100% - 70px);
  
}
}
/* NEU: Positionierung der Slider-Pfeile unter dem Slider */
.amex-slider-nav {

  position: static;
  transform: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  padding: 0 10px;

}
/* ===========================
   Vergleichsmodus
   =========================== */
.amex-compare-button {

  position: fixed;
  bottom: 20px;
  z-index: 1000;
  transition: all 0.3s ease;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;

}
.amex-compare-button.bottom-left-link {

  left: 20px;
  background: none;
  color: #0073aa;
  border: none;

}
.amex-compare-button.bottom-left-button {

  left: 20px;
  background: #0073aa;
  color: #fff;
  border: none;

}
.amex-compare-button.bottom-right-link {

  right: 20px;
  background: none;
  color: #0073aa;
  border: none;

}
.amex-compare-button.bottom-right-button {

  right: 20px;
  background: #0073aa;
  color: #fff;
  border: none;

}
.amex-compare-button.hidden {

  opacity: 0;
  visibility: hidden;

}
.amex-compare-button span {

  display: inline-block;
  vertical-align: middle;

}
.amex-compare-button .amex-compare-count {

  background: #fff;
  color: #0073aa;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 50%;
  margin-left: 5px;
  line-height: 1;

}
.amex-compare-button.bottom-left-button .amex-compare-count,
.amex-compare-button.bottom-right-button .amex-compare-count {

  background: #fff;
  color: #0073aa;

}
/* ===========================
   Vergleichs-Grid
   =========================== */
.amex-compare-grid {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;

}
.amex-compare-grid .amex-card {

    flex: 1 1 250px;
    max-width: 300px;

}
/* ===========================
   Filter Links
   =========================== */
.amex-filter-links {

    margin-bottom: 20px;
    text-align: center;

}
.amex-filter-links .amex-filter-link {

    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    color: #333;
    font-size: 14px;
    text-decoration: none;

}
.amex-filter-links .amex-filter-link:hover {

    color: #FF7D61;
    border-color: #0073aa;

}
.amex-filter-links .amex-filter-link.active {

    border: 1px solid #ddd;
    border-radius: 20px;
    color: #FF7D61;
    font-weight:bold;
    border-color: #ddd;

}
/* ===========================
   Modal für Kreditkarten-Details
   =========================== */
.amex-modal {

    display: none; /* Standardmäßig ausgeblendet */
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 64vw;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    font-size:0.75em;

}
.amex-modal.is-open {

    display: flex;
    transform: translateX(0);

}
.amex-modal-overlay {

    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 9998;

}
.amex-modal-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

}
.amex-content-block {

    margin-top: 30px;

}
.amex-content-block h3 {

    font-size: 1.25em;
    margin-bottom: 10px;
    color: #333;

}
/* NEU: Buttons und Links am Modal-Ende */
.amex-modal-footer {

  text-align: center;
  padding: 15px 20px;
  border-top: 1px solid #eee;

}
.amex-modal-cta-btn {

  font-size: 16px;
  padding: 12px 25px;
  color: #fff;
  background: linear-gradient(90deg, #a67cf7, #c48cf7);
  text-decoration: none;
  font-weight: bold;
  border-radius: 20px;
  white-space: nowrap;

}
.amex-modal-cta-btn:hover {

  background: linear-gradient(90deg, #8a5ce2, #a36ee5);

}
/* Modal Layout optimieren */
.amex-modal {

  display: flex;
  flex-direction: column; /* Header, Body, Footer vertikal stapeln */
  height: 100vh;          /* volle Höhe */

}
.amex-modal-header,
.amex-modal-footer {

  flex-shrink: 0; /* Fixierte Höhe, kein Scrollen */

}
.amex-modal-body {

  flex: 1 1 auto;          /* nimmt restlichen Platz ein */
  overflow-y: auto;        /* eigener Scrollbereich */
  padding-right: 10px;     /* optional: verhindert Scrollbar-Überdeckung */
  -webkit-overflow-scrolling: touch; /* smooth scroll auf iOS */

}
.amex-widget-content {

    font-size: 0.75em;
    line-height: 1.6;

}
.amex-widget-content p:last-child {

    margin-bottom: 0;

}
/* Button Styling innerhalb der Widgets */
.amex-widget-button {

    display: inline-block;
    padding: 10px 20px;
    margin-top: auto;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border-radius: 20px;
    transition: all 0.3s ease;

}
.amex-widget-button.default {

    background-color: #a67cf7;
    color: #fff;
    border: 2px solid #a67cf7;

}
.amex-widget-button.transparent-border {

    background-color: transparent;
    color: #a67cf7;
    border: 2px solid #a67cf7;

}
.amex-widget-button.default:hover {

    background-color: #8a5ce2;
    border-color: #8a5ce2;

}
.amex-widget-button.transparent-border:hover {

    background-color: #a67cf7;
    color: #fff;

}
.amex-widgets-container {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Optional: Passt den Abstand zwischen den Blöcken an */

}
@media (max-width: 768px) {

    .amex-widgets-container {
        grid-template-columns: 1fr; /* Eine Spalte auf kleineren Bildschirmen */
    
}
}
.amex-modal-body {

    font-size: 0.75em;
    font-family: system-ui, sans-serif;

}
.amex-modal-body h3,
.amex-modal-body h4 {

    font-size: 1em; /* Macht Überschriften relativ zur Schriftgröße des Body */
    font-family: system-ui, sans-serif;

}
.amex-modal-body p {

    font-size: 1em; /* Stellt sicher, dass Absätze die Basis-Schriftgröße verwenden */
    font-family: system-ui, sans-serif;

}
.amex-modal-body .amex-widget-content {

    font-size: 1em; /* Korrigiert die Schriftgröße in den Widgets */
    font-family: system-ui, sans-serif;

}
.amex-modal-body .amex-content-block-text {

    font-size: 1em; /* Korrigiert die Schriftgröße in den Textblöcken */
    font-family: system-ui, sans-serif;

}

.amex-card-detail { background:#fff; padding:40px 0 60px; }
.amex-card-header-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:30px; }
.amex-card-image img { max-width:320px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.amex-card-header-text { max-width:600px; }
.amex-card-cta-btn { display:inline-block; background:#DAA520; color:#fff; padding:12px 24px; border-radius:30px; text-decoration:none; font-weight:600; margin-top:15px; }
.amex-content-block { margin-bottom:60px; padding:25px; background:#f8f9fa; border-radius:12px; }
.amex-widgets-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:25px; }
.amex-widget-block { background:#fff; border:1px solid #e0e0e0; border-radius:10px; padding:20px; }
.amex-widget-button { display:inline-block; background:#14213D; color:#fff; padding:10px 18px; border-radius:25px; text-decoration:none; margin-top:10px; }
.amex-back-link { display:inline-block; color:#14213D; font-weight:500; text-decoration:none; margin-top:40px; }


/* Allgemein */
body {
    background: #FCFCFB;
}
.home h1.wp-block-post-title {
    display: none !important;
}

/*Typo*/
body.single-post h1,
body.single-post h2 {
  margin-top: 50px;
}

body.single-post {
    h3, h4, h5, h6 {
  margin-top: 30px;
    }
}

/* Header */

@media screen and (max-width: 767px) {
    
    /* Headerbar */
    .top-info {
        display: none !important;
    }
    .wp-block-columns.alignfull.headerbar.has-background.is-layout-flex.wp-container-core-columns-is-layout-0dd1be74.wp-block-columns-is-layout-flex {
        padding: 20px 20px !important;
    }
    .headerbar .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
        p {
            font-size: 12px !important;
        }
    }
    .headerbar .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:has(.wide) {
        flex-basis: 35% !important;
    }
    .headerbar .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:has(.small) {
        flex-basis: 15% !important;
    }
    /* Navigation */
    .wp-block-group.alignfull.navigation {
        padding: 20px 20px !important;
        .wp-block-search.wp-block-search__button-only .wp-block-search__button {
            padding: 10px;
        }
    }
    
}



/* Navigation */
.primary-mark mark {
    background-color: #ffffff00 !important;
}

/* Suche Navi*/
.wp-block-search.wp-block-search__button-only .wp-block-search__button {
    background: none !important;
    color: #000;
    img {
        height: 20px !important;
        margin: auto;
        margin-right: 5px;
    }
}

/* Modal */
.amex-modal {
    padding: 35px;
}
button.amex-modal-close-btn {
    background: none;
    border-radius: 100px;
    border: 1.5px solid #88898C;
    padding: 0px 10px;
    color: #88898C;
    font-size: 30px;
    font-weight: 300;
    margin-top: 30px;
}

.amex-modal-body {
    h3 {
            font-size: 32px;
        margin-bottom: 30px;
    }
    .amex-content-block-text {
        font-size: 14px;
        font-weight: 400;
    }
}
.amex-modal-content {
    .amex-widget-block {
        padding: 0px 20px 20px 20px;
        h4 {
            font-weight: 600;
            font-size: 16px;
        }
    }
    .amex-widget-block.headline-text {
        border: 1px solid #E9E9E9;
        border-radius: 10px;
    }
    .amex-widget-content {
        font-size: 12px;
        font-weight: 400;
    }
}

.amex-content-blocks {
    .amex-content-block:not(:last-child) {
        border-bottom: 1px solid #E9E9E9;
        margin-bottom: 30px;
        padding-bottom: 40px;
    }
    .amex-content-block:first-child .amex-content-block-text {
        display: inline-block;
        margin-bottom: 30px;
    }
    .amex-content-block:nth-last-child {
        .amex-widget-block:nth-last-child(2), .amex-widget-block:nth-last-child {
            
        }
    }

}
.modal-cta-box, .modal-help-box {
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .wp-element-button, .wp-block-button__link {
        border-radius: 100px;
        padding: 10px 20px;
        height: auto;
        font-size: 12px !important;
        align-content: flex-end;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
}
.modal-cta-box {
    background: #F8ECFF;
    border: 1px solid #F8ECFF;
    .wp-element-button, .wp-block-button__link {
        background: linear-gradient(90deg, #a67cf7, #c48cf7);
    }
}
.modal-help-box {
    border: 1px solid #BC78F6 !important;
    .wp-element-button, .wp-block-button__link {
        background: #fff;
            border: 1px solid #BC78F6;
        color: #000;
    }
}
.amex-content-block-text{
  display:flex;
  gap:1rem;
  align-items:flex-start; /* Bild & Text oben bündig */
}
.amex-content-block-text img{
    flex:0 0 auto;          /* Bild nicht schrumpfen */
    width:400px;
    max-width: 100%;
    height:auto;
    margin-left: 100px;
}
@media (max-width:700px){
  .amex-content-block-text{flex-direction:column}
}

.amex-modal-footer {
    padding: 15px 0;
    .amex-modal-cta-btn {
        display: block;
        padding: 25px 35px;
        margin: 20px 0;
        border-radius: 100px;
    }
}
/* Newsletter Anmeldung Footer */

.wpcf7 input.wpcf7-email {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #000;
    padding: 10px 0;
    font-size: 20px;
}


.wpcf7 input.wpcf7-submit{
    background: linear-gradient(105deg, rgb(207, 136, 251) 0%, rgb(210, 183, 243) 100%);
    padding-top: 1rem;
    padding-right: 2.25rem;
    padding-bottom: 1rem;
    padding-left: 2.25rem;
    border-radius: 9999px;
    border: none;   
    color: #fff;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--medium) !important;
}

.wpcf7-submit {
float: left;
}

div.acceptance-check {
float: right;
}


/* Autor Seite */
.single-autor .blog-shortinfo-intro, .written-by-author {
    h4 {
        font-weight: 700;
        margin: 0 3px;
    }
    gap: 0;
}

.single-autor .about-teaser {
    margin: 0;
    display: inline;
    .entry-content {
        display: inline;
    }
}
.single-autor .about-teaser .entry-content p {
    line-height: 26px;
}

.bubble-element.wp-block-image {
    padding: 0 14px;
    img {
        vertical-align: middle;
    }
}

.single-autor {
    .newsletter-section-footer {
        display: none !important;
    }
}

/* Blogbeitrag */
.blog-shortinfo-intro {
    float: left;
    margin-right: 5px;
    color: #BC78F6;
    font-weight: 700;
}
.wp-block-post-author-name:after {
    content: ','
}

.author-info-details {
    background: #fff; 
    border-radius: 50px;
    border: 1px solid #E9E9E9;
    padding: 5px 10px 5px 5px;

}
.click-count, .helpful-count, .bubble-element {
    background: #fff; 
    border-radius: 50px;
    border: 1px solid #E9E9E9;
    padding: 5px 10px;
    font-family: var(--wp--preset--font-family--manrope);
    strong {
        font-weight: 700;
    }
}
p:has(> .helpful-count.has-small-font-size) {
    line-height: 0;
}

.table-of-contents {
    position: fixed;
    right: 0;
    background: #fff;
    border-radius: 20px 0 0 20px;
    border: 1px solid #E9E9E9;
    padding: 0;
    max-width: 13vw;
    top: 40vh;
    li, .post-toc__title {
        font-size: 14px;
    }
    .post-toc__title, .post-toc__list {
        padding: 15px 25px;
    }
    .post-toc__title {
           border-bottom: 1px solid #E9E9E9;
        font-weight: 700;
    }
    .post-toc__list {
        list-style: none !important;
    }
    .post-toc__list li {
        margin-bottom: 20px;
    }
    .post-toc__list li a{
        text-decoration: none !important;
    }
    .post-toc__list li a:hover, .post-toc__list li a.is-active {
        text-decoration: underline !important;
        text-decoration-color: #BD97D4 !important;
        text-underline-offset: 5px;
        font-weight: 700;
    }
}
.toc-mobile .post-toc {
    display: none;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #E9E9E9;
    padding: 0;
    li, .post-toc__title {
        font-size: 14px;
    }
    .post-toc__title, .post-toc__list {
        padding: 15px 25px;
    }
    .post-toc__title {
           border-bottom: 1px solid #E9E9E9;
        font-weight: 700;
    }
    .post-toc__list {
        list-style: none !important;
    }
    .post-toc__list li {
        margin-bottom: 20px;
    }
    .post-toc__list li a{
        text-decoration: none !important;
    }
    .post-toc__list li a:hover, .post-toc__list li a.is-active {
        text-decoration: underline !important;
        text-decoration-color: #BD97D4 !important;
        text-underline-offset: 5px;
        font-weight: 700;
    }
}
    
    
    
@media (max-width: 767px) {
    .table-of-contents { display: none !important; }
    .toc-mobile .post-toc { 
        display: block !important; 
    }
    }
}

/* Aktiver Link in der ToC */
.post-toc a.is-active { font-weight: 600; text-decoration: underline; }

/* Falls ein fester Header existiert: Abstand oben beim Anspringen von Ankern */
:target, #shortinfo, h2[id] { scroll-margin-top: var(--anchor-offset, 80px); }
html { scroll-behavior: smooth; } /* optional, ansonsten übernimmt JS */


/* CTAs */

.cta-mail input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    font-size: 16px;
}


/* Kreditkarten Sections */

/*Filter*/
.kk-filters {
    justify-content: space-between; /* verteilt Buttons über die volle Breite */
}
.kk-filters button {
    padding-top: 0.2rem;
    padding-right: 0.5rem;
    padding-bottom: 0.2rem;
    padding-left: 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--small) !important;
    background: none;
    flex: 0 0 auto;
    border: 1px solid #e9e9e900;    
}
.kk-filters button.active, .kk-filters button:hover {
    padding-top: 0.2rem;
    padding-right: 0.5rem;
    padding-bottom: 0.2rem;
    padding-left: 0.5rem;
    border-radius: 9999px;
    border: 1px solid #E9E9E9;  
    font-weight: 500;
    background: #fff;
    color: #FF7D61;
}

.kk-card .kk-card-top {
    display: block !important;
}
.kk-card-title {
    font-size: 16px;
}
.kk-card-short {
    font-size: 11px;
}
.kk-card-rating {
    padding-top: 0.2rem;
    padding-right: 0.5rem;
    padding-bottom: 0.2rem;
    padding-left: 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 16px;
    background: #F8ECFF;
    display: inline;
    float: right;
}




/* PDP */
/* ====== Reset & Variablen ====== */
:root{
  --bg: #f7f7f8;
  --panel: #ffffff;
  --text: #1f2328;
  --muted: #6b7280;
  --brand: #7c5a67;          /* Rosé-Gold Anmutung */
  --brand-2: #3a3f45;        /* dunkler Akzent */
  --ok: #10b981;
  --warn: #f59e0b;

  --radius: 14px;
  --shadow: 0 6px 24px rgba(20,23,28,.08);
  --gap: 28px;
  --max: 1200px;
  --sp: 14px;
  --sp2: 22px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--text);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* ====== Layout-Rahmen ====== */
.card-page{
  max-width: var(--max);
  margin: 32px auto 80px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px; /* links Content | rechts Sidebar */
  gap: var(--gap);
}

.card-header,
.subnav{
  grid-column: 1 / -1; /* beide Spalten */
}

.main-content{ 
  grid-column: 1;
  display: grid;
  gap: var(--gap);
}

aside.sidebar{ 
  grid-column: 2; 
}

/* ====== Header (zweispaltig im Kopf) ====== */
.card-header{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--gap);
  align-items: start;
}

/* ====== Card Summary ====== */
.card-summary{ position: relative; }

.card-summary-main{
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
}

.rating{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 12px;
}
.rating-label{ font-size: 13px; color: var(--muted); }
.rating-score{
  background: #f1eef0;
  color: var(--brand);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
.card-image{
  width: 100%;
  aspect-ratio: 16/11;
  border-radius: 12px;
  overflow: hidden;
  background: #eee;
  display:grid; place-items:center;
  margin: 10px 0 14px;
}
.card-image img{ width:100%; height:100%; object-fit:cover; }

.card-facts{
  list-style:none; padding:0; margin: 0 0 14px;
}
.card-facts li{
  display:flex; justify-content:space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #e7e7ea;
  font-size: 14px;
}
.btn-primary{
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:hover{ filter: brightness(1.05); }

.why-liked{ margin-top: 16px; }
.why-liked h4{ margin: 0 0 6px; font-size: 14px; color:var(--brand-2); }
.why-liked p{ margin: 0 0 12px; color:var(--muted); font-size: 14px; }
.expert{ display:flex; gap:10px; align-items:center; }
.expert img{
  width:36px; height:36px; border-radius:50%; background:#ddd; display:block;
}

/* ====== Rechte Kopfseite (Details) ====== */
.card-details h1{
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
}
.details-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.details-table th,
.details-table td{
  padding: 12px 14px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.details-table th{
  text-align: left;
  color: var(--muted);
  width: 48%;
  font-weight: 600;
}
.details-table tr:last-child th,
.details-table tr:last-child td{ border-bottom: 0; }

.keywords{
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}
.keywords a{ color: var(--brand); text-decoration: none; }
.keywords a:hover{ text-decoration: underline; }

/* ====== Subnavigation ====== */
.subnav{
  position: sticky;
  top: 0;
  background: linear-gradient(#fff,#fff) padding-box;
  padding: 10px 0;
  z-index: 5;
}
.subnav ul{
  display: flex;
  gap: 16px;
  list-style: none; margin: 0; padding: 0;
  overflow:auto;
}
.subnav a{
  display:block;
  padding: 8px 12px;
  border-radius: 999px;
  background:#fff;
  border:1px solid #ececf1;
  color: var(--brand-2);
  text-decoration:none;
  white-space: nowrap;
  font-size: 14px;
}
.subnav a:hover{ border-color:#d9d9df; }

/* ====== Überblick (2 Spalten) ====== */
.overview .columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.overview .col{
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp2);
}
.overview h3{ margin: 0 0 8px; }
.overview ul{ margin: 0; padding-left: 18px; }

/* ====== Fazit ====== */
.fazit{
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp2);
}
.fazit p{ margin: 0 0 14px; color: var(--muted); }

/* ====== Leistungen ====== */
.leistungen .icon-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-bottom: var(--sp2);
}
.icon-item{
  background: #fff;
  border: 1px solid #ececf1;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  font-weight: 600;
}
.text-blocks p{ color: var(--muted); }

.promo-box{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: center;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp2);
  margin-top: var(--sp2);
}
.promo-box img{
  width:100%; height:auto; background:#eee; border-radius: 10px;
}

/* ====== Tabellen: Gebühren ====== */
.gebuehren .fees-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gebuehren th,
.gebuehren td{
  padding: 14px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.gebuehren th{
  text-align:left; width:55%; color:var(--muted); font-weight:600;
}
.gebuehren tr:last-child th,
.gebuehren tr:last-child td{ border-bottom:0; }

/* ====== Versicherungsliste ====== */
.versicherung ul{
  display:grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  margin: 0;
}
.versicherung li{
  background: var(--panel);
  border: 1px solid #ececf1;
  border-radius: 10px;
  padding: 10px 12px;
}

/* ====== Sidebar ====== */
.sidebar{
  position: sticky;
  top: 18px;
  display: grid;
  gap: var(--gap);
  height: fit-content;
}
.sidebar > *{
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp2);
}
.card-details-sidebar h3,
.support-box h3{ margin-top:0; }
.card-details-sidebar ul{ margin:0; padding-left: 18px; }
.support-box p{ margin: 0 0 10px; }

/* ====== Typografie für Sektionen ====== */
section > h2{
  margin: 18px 0 10px;
  font-size: 22px;
}

/* ====== Responsive ====== */
@media (max-width: 1080px){
  .card-page{
    grid-template-columns: 1fr 320px;
  }
  .card-header{
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 900px){
  .card-page{
    grid-template-columns: 1fr;   /* einspaltig */
  }
  .card-header,
  .subnav,
  .main-content,
  .sidebar{ grid-column: 1; }
  .sidebar{ position: static; }
  .card-header{ grid-template-columns: 1fr; }
  .overview .columns{ grid-template-columns: 1fr; }
  .leistungen .icon-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .promo-box{ grid-template-columns: 1fr; text-align: center; }
}