.tab.clearfix {
  padding-left: 15px !important;
}

.h2 {
  font-size: 15 px !important;
}

/* Die Zelle mit Label + Checkbox + Beschreibung */
/* Zelle mit den Zustimmungs-Checkboxen */
.crmEntityFormView td.checkbox-cell {
    position: relative;
}

/* Checkbox LINKS oben ausrichten */
.crmEntityFormView td.checkbox-cell .control {
    position: absolute !important;
    top: 0 !important;          /* auf Höhe der ersten Textzeile */
    left: 0 !important;         /* an den linken Rand der Zelle */
    margin: 0;
    transform: none !important; /* falls das Portal etwas verschiebt */
}

/* Textblock (Label + Sternchen) neben der Checkbox anzeigen */
.crmEntityFormView td.checkbox-cell .table-info {
    padding-left: 32px !important;  /* Platz für Checkbox + Abstand */
    padding-right: 0 !important;
}

/* Beschreibung unter dem Text, aber mit gleichem linken Einzug wie das Label */
.crmEntityFormView td.checkbox-cell .description {
    padding-left: 32px !important;  /* gleiche Einrückung wie .table-info */
}
    
/* Standard-Abstand der Checkbox selbst entfernen */
.crmEntityFormView td.checkbox-cell .control .checkbox input[type="checkbox"] {
    margin: 0;
}

/* Checkbox cell icon in the portal grid */
.entity-grid span.fa[role="checkbox"] {
    display: inline-flex;          /* make the box a flex container   */
    align-items: center;           /* vertical center                  */
    justify-content: center;       /* horizontal center                */
    width: 16px;                   /* size of the checkbox box         */
    height: 16px;
    border: 1px solid #000;        /* the square outline               */
    box-sizing: border-box;
    font-size: 11px;               /* adjust so the check fits nicely  */
    padding: 0;
}



/* Grundlayout */
.pp-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #ffffff;
  position: relative;
}

/* Begrüßung */
.pp-welcome {
  background-color: #D7324F !important;
  color: white !important;
  padding: 2rem 1.5rem !important;
  text-align: left !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  margin: 0 !important;
  position: relative;
  left: -20px;
  width: calc(100% + 20px);
  border-radius: 0 !important;
  z-index: 0;
  line-height: 1.3em;
}

/* Hero-Bereich */
.pp-hero {
  flex: 0 0 40%;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: 300px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  margin-top: -40px !important;
  padding: 2rem !important;
  z-index: 1;
}

/* Contact Creation Form */
/* neutralize the nested .row that the webform brings in */
#mainContent #WebFormControl_2769d1a798b7f011bbd27c1e5276c7d8 > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* optional: make the form align to page edges like the hero */
#mainContent #WebFormControl_2769d1a798b7f011bbd27c1e5276c7d8 .crmEntityFormView {
  padding-left: 0;
  padding-right: 0;
}

/* Service beauftragen Form */
#mainContent #WebFormControl_2fe384eda3a4f011bbd36045bddef16c > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#mainContent #WebFormControl_2fe384eda3a4f011bbd36045bddef16c .crmEntityFormView {
  padding-left: 0;
  padding-right: 0;
}

/* Device Registration Form */
#mainContent #WebFormControl_4b3b40cfecaef011bbd27ced8d4124d9 > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#mainContent #WebFormControl_4b3b40cfecaef011bbd27ced8d4124d9 .crmEntityFormView {
  padding-left: 0;
  padding-right: 0;
}

/* Servicepackage Form */
#mainContent #WebFormControl_a11a2b4d3891f011b4cc6045bdde7236 > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#mainContent #WebFormControl_a11a2b4d3891f011b4cc6045bdde7236 .crmEntityFormView {
  padding-left: 0;
  padding-right: 0;
}

/* Cashback Form */
#mainContent #WebFormControl_f03bafccedacf011bbd27c1e5276c9ce > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#mainContent #WebFormControl_f03bafccedacf011bbd27c1e5276c9ce .crmEntityFormView {
  padding-left: 0;
  padding-right: 0;
}

/* if the “page-copy” adds spacing, kill it on this page */
.page-copy { margin: 0; padding: 0; }


.pp-hero h4 {
  margin: 0 0 0.5rem 0 !important;
  font-size: 1.2rem !important;
  font-weight: normal !important;
  color: white !important;
}

.pp-hero h2 {
  margin: 0 !important;
  font-size: 2rem !important;
  font-weight: bold !important;
  color: white !important;
}

/* Abschnittstitel */
.pp-section-title {
  background-color: #D7324F !important;
  color: white !important;
  padding: 1rem !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  margin: 2rem 0 1rem 0 !important;
  position: relative;
  left: 0px;
  width: calc(100%px);
  border-radius: 0 !important;
  z-index: 2;
}

/* Grid-System */
.pp-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  padding: 1rem 0 !important;
}

@media (min-width: 768px) {
  .pp-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Geräte-Karten */
.pp-card {
  background: white !important;
  padding: 1rem !important;
  border: 3px solid #ddd !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
  overflow: hidden; /* optional but nice to have for the badge corner */
}

.pp-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
}

.pp-card img {
  max-width: 50px !important;
  flex-shrink: 0 !important;
}

.pp-card-plus {
  font-size: 3rem;
  color: #D7324F;
  font-weight: bold;
  flex-shrink: 0;
}

.pp-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pp-card-content-text p {
  margin: 0.2rem 0 0 0 !important;
  font-size: 0.85rem !important;
  color: #555;
}

.pp-status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #2e7d32;
  font-weight: bold;
}

.pp-status-icon {
  width: 16px;
  height: 16px;
  background-color: #2e7d32;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-status-icon::before {
  content: '✔';
  color: white;
  font-size: 0.7rem;
}

.pp-info {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #D7324F;
  font-weight: bold;
}

/* Bereich sauber kapseln: Listen mit Spiegelstrichen, angenehmer Zeilenabstand */
.svc ul{
  list-style: disc !important;
  margin: .5rem 0 0 1.5rem !important;
  padding-left: 0 !important;
}
.svc li{ margin: .28rem 0 !important; line-height: 1.5 !important; }

/* Headline-Links (rote Leiste bleibt klickbar) */
.pp-section-title a{
  color:#fff !important;
  text-decoration:none !important;
  display:block !important;
}

/* Textbreite an den .pp-hero angleichen (wie zuvor besprochen) */
.pp-content-hero{ max-width:40%; margin-left:0; }
@media (max-width:980px){ .pp-content-hero{ max-width:100%; } }



.pp-info-icon {
  width: 16px;
  height: 16px;
  background-color: #D7324F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-info-icon::before {
  content: '!';
  color: white;
  font-size: 0.7rem;
}

.pp-warn{
  display:flex; align-items:center; gap:0.3rem;
  margin-top:0.5rem; font-size:0.85rem; color:#e65100; font-weight:bold;
}
.pp-warn-icon{
  width:16px; height:16px; background-color:#ff9800; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.pp-warn-icon::before{ content:'!'; color:#fff; font-size:0.7rem; }

/* --- NEU: Hinweis (blau) --- */
.pp-blue{
  display:flex; align-items:center; gap:0.3rem;
  margin-top:0.5rem; font-size:0.85rem; color:#1565c0; font-weight:bold;
}
.pp-blue-icon{
  width:16px; height:16px; background-color:#1976d2; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
/* optional Symbol:
.pp-blue-icon::before{ content:'i'; color:#fff; font-size:0.7rem; } */

/* --- NEU: Neutral (grau) --- */
.pp-grey{
  display:flex; align-items:center; gap:0.3rem;
  margin-top:0.5rem; font-size:0.85rem; color:#616161; font-weight:bold;
}
.pp-grey-icon{
  width:16px; height:16px; background-color:#9e9e9e; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Services */
.pp-service-card {
  background: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.5rem 0 !important;
}

/* Upgrade-Badge */
.pp-upgrade-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #FF671F;
  color: white;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.3rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border-bottom-left-radius: 4px;
  z-index: 5; /* ensures it stays visible even with transforms */
}

.pp-upgrade-badge i {
  font-size: 1rem;
}

.pp-upgrade-button {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  padding: 0.5rem 1.0rem; /* vorher 0.4rem 0.8rem → +25% */
  border: 1px solid #333;
  background-color: transparent;
  color: #000;
  font-size: 1.000rem; /* vorher 0.85rem → +50% */
  text-decoration: none;
  border-radius: 0; /* keine abgerundeten Ecken */
  transition: all 0.2s ease;
  cursor: pointer;
}

.pp-upgrade-button:hover {
  background-color: #333;
  color: #fff;
}

.pp-service-card img {
  width: 100px !important;
  height: 100px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease;
}

.pp-service-card:hover img {
  transform: scale(1.1);
}

.pp-service-card-text h4 {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: bold !important;
}

.pp-service-card-text p {
  margin: 0.2rem 0 0 0 !important;
  font-size: 0.85rem !important;
  color: #555;
}

/* Linkliste */
.pp-link-list {
  padding: 1rem !important;
  background: white !important;
  border: 1px solid #ddd !important;
}

.pp-link-list a {
  display: block !important;
  padding: 0.5rem 0 !important;
  color: #D7324F !important;
  text-decoration: none !important;
  border-bottom: 1px solid #eee !important;
}

.pp-link-list a:last-child {
  border-bottom: none !important;
}


/* Mein Bereich Titel */
.pp-section-title-banner {
  background-color: #D7324F;
  color: white;
  padding: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 2rem 0 0 0 !important;
  position: relative !important;
  left: -20px;
  width: calc(100% + 20px);
  z-index: 1 !important;              /* banner sits below the photo we’ll lift above it */
}

/* Wrapper für Links + Banner */
.pp-mein-bereich-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 1rem 0;
}

.pp-mein-bereich-links {
  flex: 1;
  padding-right: 1rem;
}

.pp-mein-bereich-links p {
  margin: 0.5rem 0;
}

.pp-mein-bereich-links a {
  color: #D7324F;
  text-decoration: none;
}

.pp-mein-bereich-links a:hover {
  text-decoration: underline;
}

.pp-family-banner {
  flex: 0 0 40%;
  height: 180px;
  background: url('~/Dimplex-New-Banner-Family.png') center/cover no-repeat;
  margin-bottom: 80px; /* lässt Bild etwas überlappen */
}

.pp-button {
  padding: 0.4rem 0.8rem;
  background-color: #D7324F;
  color: white;
  border: none;
  border-radius: 1px; /* optional: adds a soft corner */
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

/* Hover effect */
.pp-button:hover {
  background-color: #FF671F; /* darker red on hover */
}

/* Hover effect */
.device-actions {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 1px; /* optional: adds a soft corner */
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
.device-actions:hover {
  background-color: darkgray; /* darker red on hover */
}

/* --- Carousel Styles --- */
.pp-carousel-container {
  position: relative;
  margin-top: 2rem;
}

.pp-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.pp-carousel-header h3 {
  font-size: 1.2rem;
  margin: 0;
}

.pp-guarantee-carousel {
  display: flex;
  gap: 1.3rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

.pp-guarantee-carousel::-webkit-scrollbar {
  display: none;
}

.pp-guarantee-card {
  flex: 0 0 280px;
  height: 450px;
  display: inline-block;
}

.pp-guarantee-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.pp-guarantee-image {
  position: relative;
  width: 100%;
  height: 350px;
  background-size: cover;
  background-position: center;
}

.pp-guarantee-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
}

.pp-guarantee-text {
  padding: 0.8rem;
}

.pp-guarantee-text h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}

.pp-guarantee-text p {
  margin: 0.3rem 0 0 0;
  font-size: 0.85rem;
  color: #555;
}

/* Navigation Buttons */
.pp-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  z-index: 2;
}

.pp-carousel-nav.prev {
  left: -16px;
}

.pp-carousel-nav.next {
  right: -16px;
}

/* === Redesigned Services section (mockup style) === */
.pp-services {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  padding: 1rem 0 !important;
}
@media (min-width: 768px) {
  .pp-services {
    grid-template-columns: 1fr 1fr !important;
  }
}
.pp-service-tile {
  display: grid !important;
  grid-template-columns: 220px 1fr auto !important;
  align-items: center !important;
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.pp-service-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
}
.pp-service-thumb {
  width: 214px !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.pp-service-body {
  padding: 0.9rem 1rem !important;
}
.pp-service-body h4 {
  margin: 0 0 .25rem 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}
.pp-service-body p {
  margin: 0 !important;
  font-size: .9rem !important;
  color: #555 !important;
}
.pp-service-cta {
  align-self: end !important;
  padding: 0 1rem 1rem 0 !important;
}
.pp-btn-red {
  display: inline-block !important;
  background: #D7324F !important;
  color: #fff !important;
  border: none !important;
  padding: .55rem 1.0rem !important;
  font-size: .95rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  width: 170px;
  text-align: center !important;
}
.pp-btn-red:hover { filter: brightness(.92) !important; }

/* === “Mein Bereich” (mockup style) === */
.pp-section-title-banner { /* keep your existing styles; ensures tight spacing to list */
  margin: 2rem 0 0 0 !important;
}

.pp-myarea {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin: 0 0 2.5rem 0;      
}
.pp-area-list{
  flex: 1;
  background: #fff;
  border: none;                            /* keine äußeren Linien */
  padding: .25rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);   /* leichte Tiefe */
}

.pp-area-item{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid #eee;           /* nur unten */
}
.pp-area-item:first-child{
  border-top: none;
}
.pp-area-item:last-child{
  border-bottom: none;
}
.pp-area-icon {
  width: 22px; height: 22px;
  border: 2px solid #bdbdbd;
  border-radius: 4px;
  flex-shrink: 0;
}

.pp-area-icon-img{
  width: 22px; height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  filter: none;                       /* keep original icon colors */
}
/* links */
.pp-area-link{
  color: #2f2f2f;
  text-decoration: none;
  font-weight: 600;
}
.pp-area-link:hover { text-decoration: underline; }

/* Family photo: overlap red banner (same technique as .pp-hero) */
.pp-family-banner{
  flex: 0 0 507px !important;              /* breiter */
  height: 290px !important;                /* leicht höher */
  background: url('~/Dimplex-New-Banner-Family.png') center/cover no-repeat !important;
  position: relative !important;
  margin-top: -40px !important;            /* stärkerer Überlapp */
  z-index: 3 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20) !important;
}

.device-table-container {
  /* max-width: 1200px;  */
  margin: 0 auto;
  background-color: #ffffff;
  padding: 1rem 0rem;
}

/* Titelbox wie im Beispielcode */
.device-title {
  background-color: #D7324F;
  color: white;
  padding: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Tabellenlayout */
.device-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.device-table th {
  background-color: #f5f5f5;
  text-align: left;
  padding: 0.6rem;
}

.device-table td {
  padding: 0.6rem;
  border-bottom: 1px solid #ddd;
}
/* Status-Icons */
.status-online {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #2e7d32;
}

.status-online::before {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #2e7d32;
  border-radius: 50%;
  display: inline-block;
}

.status-offline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #D7324F;
}

.status-offline::before {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #D7324F;
  border-radius: 50%;
  display: inline-block;
}

@media (max-width: 980px) {
  .pp-service-tile { grid-template-columns: 180px 1fr auto !important; }
  .pp-service-thumb { width: 180px !important; }
  .pp-myarea { flex-direction: column; }
  .pp-family-banner{ width:100% !important; flex:0 0 auto !important; margin-top: 0 !important; }
}

/* Pagination */
.pp-pagination {
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: flex-end;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.pp-page-btn{
  padding: .35rem .6rem;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-size: .9rem;
}
.pp-page-btn[disabled]{
  opacity: .5;
  cursor: not-allowed;
}
.pp-page-btn.active{
  background: #D7324F;
  color: #fff;
  border-color: #D7324F;
}
.pp-page-info{
  margin-right: auto; /* pushes buttons to the right */
  font-size: .9rem; color: #555;
}
.device-empty {
  text-align: center;
  padding: 1rem;
  color: #666;
  font-size: .95rem;
}

:root{
  --pp-red:#D7324F;
  --pp-text:#222;
  --pp-muted:#555;
  --pp-line:#e9e9e9;
  --pp-bg:#fff;
  --pp-chip:#111;
  --pp-chip-bg:#f3f3f3;
  --pp-new:#e65100;
  --pp-yes:#2e7d32;

  /* Neue Variablen für Spaltenbreiten */
  --feature-col: 260px;   /* erste Spalte (Merkmal) fix */
  --pkg-min: 280px;       /* Mindestbreite je Servicepaket-Spalte */
}

/* Vergleichstabelle */
.table-compare{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:0px solid #ddd;
  background:var(--pp-bg);
  color:var(--pp-text);
  font-size:16px;
  line-height:1.35;
  overflow:hidden;
  table-layout: fixed; /* gleiche Spaltenbreiten */
  /* Wenn es eng wird, soll die Tabelle horizontal größer werden dürfen */
  min-width: calc(var(--feature-col) + (var(--pkg-min) * var(--pkg-count, 1)));
}
.table-compare thead th{position:sticky;top:0;z-index:5;background:#fff;border-bottom:2px solid var(--pp-line);padding:14px 12px;vertical-align:bottom}
.table-compare thead th:first-child{background:#fafafa}
.table-compare tbody th{position:sticky;left:0;z-index:4;background:#fafafa;border-right:1px solid var(--pp-line);font-weight:600;text-align:left}
.table-compare th,.table-compare td{border-top:1px solid var(--pp-line);padding:12px 12px;vertical-align:top}
.table-compare tbody tr:nth-child(odd) td{background:#fff}
.table-compare tbody tr:nth-child(odd) th{background:#f6f6f6}
.table-compare tbody tr:nth-child(even) td{background:#fff}
.table-compare tbody tr:nth-child(even) th{background:#fafafa}

/* Spaltenhover + Auswahlzustand */
.table-compare [data-col].col-hover{background:#fff7f7!important}
.table-compare th[data-col].col-hover{box-shadow:inset 0 -2px 0 var(--pp-red)}
.table-compare [data-col].col-selected{background:#fff7f7!important}
.table-compare th[data-col].col-selected{box-shadow:inset 0 -2px 0 var(--pp-red)}
.table-compare [data-col="0"]{pointer-events:none}

/* Kopfzelle Paket */
.pkg-head{display:flex;flex-direction:column;gap:.45rem;min-width:var(--pkg-min)}
.pkg-topline{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pkg-new{display:inline-flex;align-items:center;gap:.4rem;background:var(--pp-new);color:#fff;font-weight:700;padding:.2rem .5rem;border-radius:999px;font-size:.78rem;letter-spacing:.02em}
.pkg-name{font-weight:800;font-size:1.05rem}
.pkg-desc{color:var(--pp-muted);font-size:.92rem}

/* Auswählen (Radio) */
.pkg-select{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #bbb;padding:.35rem .6rem;border-radius:6px;cursor:pointer;user-select:none;font-weight:600;background:#fff}
.pkg-select input{accent-color:var(--pp-red);transform:scale(1.05)}

/* Preise */
.price-chip{display:inline-block;background:var(--pp-chip-bg);color:var(--pp-chip);padding:.25rem .5rem;border-radius:6px;font-weight:700;white-space:nowrap}

/* Ja/Nein */
.yes{color:var(--pp-yes);font-weight:700}
.no{color:#999}

/* Totals unten rechts */
.totals-wrap{display:flex;justify-content:flex-end;margin-top:12px}
.totals-card{min-width:340px;border:2px solid #ddd;background:#fff;padding:12px 14px;box-shadow:0 6px 16px rgba(0,0,0,.08);border-radius:6px}
.totals-title{font-weight:800;margin:0 0 .5rem 0}
.totals-row{display:flex;justify-content:space-between;gap:12px;margin:6px 0}
.totals-row.total{font-weight:800;border-top:1px solid #e0e0e0;padding-top:8px}
.totals-muted{color:#666}

/* Viewport + Slider-Buttons */
.sp-viewport{position:relative}
.sp-scroll{overflow-x:auto; overflow-y:hidden; padding:0 44px} /* Platz für Buttons */
.sp-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px;
  background:#fff; border:1px solid #ccc; box-shadow:0 4px 10px rgba(0,0,0,.08);
  display:none; align-items:center; justify-content:center;
  font-size:20px; cursor:pointer; z-index:6;
}
.sp-viewport.is-sliding .sp-nav{display:flex}
.sp-nav.prev{left:4px}
.sp-nav.next{right:4px}

/* Global Loader */
.pp-loading-backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.75);backdrop-filter:saturate(.9) blur(2px);z-index:9999}
.pp-loading-backdrop.is-visible{display:flex}
.pp-loading-dialog{background:#fff;border:1px solid #e5e5e5;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:18px 20px;min-width:280px;display:flex;align-items:center;gap:12px}
.pp-loading-spinner{width:28px;height:28px;border-radius:50%;border:3px solid #eee;border-top-color:#D7324F;animation:pp-spin 1s linear infinite}
.pp-loading-text{font-weight:600;color:#222}
@keyframes pp-spin{to{transform:rotate(360deg)}}
body.pp-no-scroll{overflow:hidden}
@media (prefers-reduced-motion:reduce){.pp-loading-spinner{animation-duration:2.5s}}

/* Text am Hero ausrichten & nicht breiter als der Hero */
.pp-content-hero{
  max-width: 40%;          /* entspricht der Breite von .pp-hero (flex-basis:40%) */
  margin-left: 0;          /* bündig links */
}
@media (max-width: 980px){
  .pp-content-hero{ max-width: 100%; }  /* mobil vollbreit */
}

/* bessere Lesbarkeit: immer Spiegelstriche + einheitlicher Einzug */
.ul{
  list-style: disc;
  padding-left: 1.4rem;
  margin: .5rem 0 0;
}
.li{ margin: .25rem 0; }

/* in schmaler Spalte die Karten untereinander statt 2-spaltig */
.pp-content-hero .pp-grid.pp-grid-2{
  grid-template-columns: 1fr !important;
}

.gd-address-disabled {
    background-color: #f3f3f3 !important;
    cursor: not-allowed;
}

.gd-address-error,
.gd-error-input {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
}

.gd-required-label::after {
    content: " *";
    color: #dc3545;
}

.ul-custom-btn-message {
    margin: 7px 28px;
    font-size: 0.9rem;
}

.ul-custom-btn-message.ul-error {
    color: #dc3545;
}

.text-muted {
    display: none !important;
}

/* Left-align "Benutzername" and "Kennwort" labels */
label[for="Username"],
label[for="PasswordValue"] {
  text-align: left !important;
}

/* Remove margin-left from offset-md-4 col-md-8 in the login form */
.portal-form .offset-md-4.col-md-8 {
  margin-left: 0 !important;
}

.offset-md-4.col-md-8 {
  margin-left: 0 !important;
}

.offset-md-2.col-md-10 {
  margin-left: 0 !important;
}

.col-md-2.col-form-label.fw-bold {
  text-align: left !important;
}

.col-md-4.col-form-label.required.fw-bold {
  text-align: left !important;
}

/* Hoverable variant of the red section title bar */
.pp-section-title.pp-section-title--hoverable {
  /* reuse existing look from .pp-section-title, only add animation + cursor */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

/* Hover effect similar to .pp-card */
.pp-section-title.pp-section-title--hoverable:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.skip-to-content,
.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.skip-to-content:focus,
.sr-only:focus {
    left:0;
    top:0;
    width:auto;
    height:auto;
    padding:8px 12px;
    z-index:10000;
}