/* Two layouts. JavaScript selects desktop at the configured element width.
   Without JavaScript the mobile layout keeps all content visible. */
.kskd-principles {
  --kp-red: #c91515;
  container-type: inline-size;
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  min-width: 0;
  color: #252525;
  font-family: Arial, Helvetica, sans-serif;
}
.kskd-principles, .kskd-principles * { box-sizing: border-box; }
.kskd-principles [hidden] { display: none !important; }
.kskd-principles .kp-shell {
  overflow: hidden;
}
.kskd-principles .kp-item { color: inherit; text-decoration: none; }
.kskd-principles a.kp-item:hover .kp-label { text-decoration: underline; }
.kskd-principles a.kp-item:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.kskd-principles .kp-heading { margin: 0; font: inherit; }
.kskd-principles .kp-headline, .kskd-principles .kp-and { display: block; }

/* Mobile: one continuous scale from phone to tablet and wider containers. */
.kskd-principles .kp-hero {
  --kp-icon-size: clamp(24px, 4.8cqw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 4cqw, 36px) clamp(12px, calc(4cqw - 1px), 40px);
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 3.2cqw, 32px) clamp(12px, 3cqw, 28px) clamp(32px, 4cqw, 40px);
}
.kskd-principles .kp-center {
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kskd-principles .kp-circle {
  container-type: inline-size;
  width: 100%;
  max-width: clamp(320px, 60cqw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ece9e7 0%, #d8d4d1 75%, #d2cecb 100%);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.kskd-principles .kp-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(18px, 3cqw, 24px);
  min-width: 0;
  width: 100%;
}
.kskd-principles .kp-right { color: #101d30; }
.kskd-principles .kp-group {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5cqw, 12px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: clamp(10px, 1.8cqw, 14px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: uppercase;
  cursor: default;
  z-index: 3;
}
.kskd-principles .kp-left .kp-group { color: var(--kp-red); }
.kskd-principles .kp-right .kp-group { flex-direction: row-reverse; color: #101d30; }
.kskd-principles button.kp-group { cursor: pointer; }
.kskd-principles .kp-group:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 6px; }
.kskd-principles .kp-group-badge {
  width: clamp(24px, 4.4cqw, 36px);
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.kskd-principles .kp-left .kp-group-badge { background: var(--kp-red); }
.kskd-principles .kp-right .kp-group-badge { background: #101d30; }
.kskd-principles .kp-group-badge img { display: block; width: 65%; height: 65%; filter: brightness(0) invert(1); }
.kskd-principles .kp-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 2cqw, 16px);
  width: 100%;
  position: relative;
  z-index: 2;
}
.kskd-principles .kp-principles li { list-style: none; margin: 0; padding: 0; }
.kskd-principles .kp-item {
  display: grid;
  grid-template-columns: var(--kp-icon-size) minmax(0, 1fr);
  gap: clamp(6px, 1.5cqw, 12px);
  align-items: center;
  min-height: clamp(48px, 7.5cqw, 60px);
}
.kskd-principles .kp-right .kp-item { grid-template-columns: minmax(0, 1fr) var(--kp-icon-size); }
.kskd-principles .kp-icon {
  width: var(--kp-icon-size);
  height: var(--kp-icon-size);
  border-radius: 50%;
  background: white;
  border: 1px solid #dedede;
  box-shadow: 0 1px 3px rgba(16,29,48,.12);
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1;
}
.kskd-principles .kp-icon img { display: block; width: 60%; height: 60%; }
.kskd-principles .kp-label {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  font-size: clamp(10px, 1.8cqw, 14px);
  line-height: 1.5;
  font-weight: 700;
  white-space: normal;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.kskd-principles .kp-right .kp-icon { grid-column: 2; }
.kskd-principles .kp-right .kp-label { grid-column: 1; text-align: right; }
.kskd-principles .kp-brace { display: none; }

/* Desktop: all dimensions vary continuously with element width.
   Both side columns share the remaining space equally. */
.kskd-principles[data-layout="desktop"] .kp-hero {
  --kp-icon-size: clamp(40px, calc(2.333333cqw + 19px), 54px);
  --kp-side-min: clamp(220px, calc(15cqw + 85px), 310px);
  --kp-inset: clamp(42px, calc(3.333333cqw + 12px), 62px);
  --kp-inset-middle: clamp(62px, calc(6.666667cqw + 2px), 102px);
  --kp-inset-center: clamp(74px, calc(7cqw + 11px), 116px);
  grid-template-columns: minmax(var(--kp-side-min), 1fr) minmax(0, 620px) minmax(var(--kp-side-min), 1fr);
  align-items: center;
  gap: clamp(12px, calc(2cqw - 6px), 24px);
  max-width: none;
  padding: clamp(24px, 3cqw, 42px) clamp(16px, calc(5cqw - 29px), 46px) clamp(32px, 3.1cqw, 46px);
}
.kskd-principles[data-layout="desktop"] .kp-center { grid-column: 2; grid-row: 1; }
.kskd-principles[data-layout="desktop"] .kp-circle { max-width: 610px; }
.kskd-principles[data-layout="desktop"] .kp-side {
  height: clamp(400px, calc(10.666667cqw + 304px), 464px);
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.kskd-principles[data-layout="desktop"] .kp-left { justify-content: flex-end; }
.kskd-principles[data-layout="desktop"] .kp-right { justify-content: flex-start; }
.kskd-principles[data-layout="desktop"] .kp-principles { max-width: 340px; gap: clamp(24px, calc(2.333333cqw + 3px), 38px); }
.kskd-principles[data-layout="desktop"] .kp-item {
  gap: clamp(8px, calc(1.333333cqw - 4px), 16px);
  min-height: var(--kp-icon-size);
}
.kskd-principles[data-layout="desktop"] .kp-left .kp-item { grid-template-columns: minmax(0, 1fr) var(--kp-icon-size); margin-right: var(--kp-inset); }
.kskd-principles[data-layout="desktop"] .kp-right .kp-item { grid-template-columns: var(--kp-icon-size) minmax(0, 1fr); margin-left: var(--kp-inset); }
.kskd-principles[data-layout="desktop"] .kp-left li:nth-child(2) .kp-item,
.kskd-principles[data-layout="desktop"] .kp-left li:nth-child(4) .kp-item { margin-right: var(--kp-inset-middle); }
.kskd-principles[data-layout="desktop"] .kp-left li:nth-child(3) .kp-item { margin-right: var(--kp-inset-center); }
.kskd-principles[data-layout="desktop"] .kp-right li:nth-child(2) .kp-item,
.kskd-principles[data-layout="desktop"] .kp-right li:nth-child(4) .kp-item { margin-left: var(--kp-inset-middle); }
.kskd-principles[data-layout="desktop"] .kp-right li:nth-child(3) .kp-item { margin-left: var(--kp-inset-center); }
.kskd-principles[data-layout="desktop"] .kp-label { font-size: clamp(10px, calc(.333333cqw + 7px), 12px); line-height: 1.65; white-space: pre-line; }
.kskd-principles[data-layout="desktop"] .kp-left .kp-label { grid-column: 1; text-align: right; }
.kskd-principles[data-layout="desktop"] .kp-right .kp-label { grid-column: 2; text-align: left; }
.kskd-principles[data-layout="desktop"] .kp-left .kp-icon { grid-column: 2; }
.kskd-principles[data-layout="desktop"] .kp-right .kp-icon { grid-column: 1; }
.kskd-principles[data-layout="desktop"] .kp-group {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  width: clamp(64px, calc(2.666667cqw + 40px), 80px);
  gap: 10px;
  font-size: clamp(10px, calc(.333333cqw + 7px), 12px);
}
.kskd-principles[data-layout="desktop"] .kp-left .kp-group { right: 0; }
.kskd-principles[data-layout="desktop"] .kp-right .kp-group { left: 0; }
.kskd-principles[data-layout="desktop"] .kp-group-badge { width: clamp(32px, calc(1.333333cqw + 20px), 40px); }
.kskd-principles[data-layout="desktop"] button.kp-group:hover .kp-group-badge { box-shadow: 0 0 0 4px rgba(0,0,0,.08); }
.kskd-principles[data-layout="desktop"] .kp-brace {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: clamp(312px, calc(9.333333cqw + 228px), 368px);
  overflow: visible;
}
.kskd-principles[data-layout="desktop"] .kp-left .kp-brace { right: 0; color: var(--kp-red); transform: translateY(-50%) scaleX(-1); }
.kskd-principles[data-layout="desktop"] .kp-right .kp-brace { left: 0; }
.kskd-principles[data-layout="desktop"] .kp-side:has(.kp-principles[hidden]) .kp-brace { display: none; }

.kskd-principles .kp-emblem{
  position:absolute;
  display:block;
  width:92%;
  height:auto;
  /* Hauptmotiv zentrieren: Der Schatten erweitert die SVG rechts/unten. */
  left:50.85%;
  top:51.04%;
  transform:translate(-50%,-50%);
  opacity:.16;
  filter:saturate(1.4);
  pointer-events:none;
  object-fit:contain;
}

.kskd-principles .kp-center-content{
  text-align:center;
  position:relative;
  z-index:2;
  /* Größen beziehen sich auf die tatsächliche Breite des Kreises. */
  padding:6.23cqw;
}

.kskd-principles .kp-eyebrow{
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#5f5b58;
  font-size:2.46cqw;
  margin-bottom:2.62cqw;
}

.kskd-principles .kp-headline{
  margin:0;
  font-weight:700;
  color:var(--kp-red);
  font-size:9.51cqw;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.kskd-principles .kp-and{
  margin:1.97cqw 0;
  color:#56524f;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:2.79cqw;
}

.kskd-principles .kp-subline{
  white-space:pre-line;
  margin-top:2.95cqw;
  color:#4f4b48;
  font-size:2.62cqw;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.03em;
}

@media print {
  .kskd-principles .kp-toggle { display: none !important; }
  .kskd-principles .kp-static[hidden] { display: flex !important; }
  .kskd-principles .kp-principles[hidden] { display: grid !important; }
}