/* Vorschau: nur #profi auf /optionen/gegenstrom/. Nicht live. */

#profi .label::before{background:#F6F1E8;opacity:.45}
#profi .gp-media picture,
#profi .gp-media img,
#profi .gp-foto img,
#profi .bs-bild{opacity:1!important}

#profi.gp .einstieg-text{margin-bottom:0}

#profi .gp-chips{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
#profi .gp-chips li{
  display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:8px 14px 8px 12px;
  border-radius:999px;
  background:rgba(246,241,232,.1);
  border:1px solid rgba(246,241,232,.18);
  color:#F6F1E8;
  font:600 14px/1.25 Figtree,sans-serif;
}
#profi .gp-chips svg{
  width:16px;height:16px;flex:none;
  stroke:#E27D50;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

#profi .gp-split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:22px;
  align-items:stretch;
  margin-top:28px;
}
#profi .gp-media{
  position:relative;margin:0;
  border-radius:16px;overflow:hidden;
  min-height:100%;
  background:#0c2238;
}
#profi .gp-media::before{
  content:"";display:block;aspect-ratio:800/466;
}
#profi .gp-media picture,
#profi .gp-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  border-radius:0;
}
#profi .gp-typen{
  background:#F6F1E8;color:#122E4D;
  border-radius:16px;
  padding:22px 24px;
  display:flex;flex-direction:column;
  min-height:100%;
}
#profi .gp-typen h3{
  margin:0 0 6px;
  font-family:"Satoshi",sans-serif;
  font-weight:700;font-size:1.25rem;line-height:1.2;
  letter-spacing:-.015em;color:#122E4D;
}
#profi .gp-typen .klein{color:#55606E;margin:0}
#profi .gp-skala{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  margin:10px 0;
  gap:2px;
}
#profi .gp-kopf,
#profi .gp-zeile{
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 44px;
  gap:10px;align-items:center;
}
#profi .gp-kopf{
  font:600 11px/1 Figtree,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
  color:#55606E;margin:0 0 6px;
}
#profi .gp-kopf span:last-child,
#profi .gp-zeile span:last-child{text-align:right}
#profi .gp-zeile{
  margin:0;padding:7px 0;
  font:600 14px/1.2 Figtree,sans-serif;
  color:#122E4D;
}
#profi .gp-zeile > span:first-child{white-space:nowrap}
#profi .gp-zeile > span:last-child{
  font-variant-numeric:tabular-nums;
  font-weight:700;
}
#profi .gp-meta{
  display:block;font-weight:500;font-size:11px;letter-spacing:0;
  text-transform:none;color:#55606E;margin-top:2px;
}
#profi .gp-track{
  background:rgba(18,46,77,.12);
  border-radius:99px;height:10px;display:block;
}
#profi .gp-fill{
  background:#A3421D;height:10px;border-radius:99px;display:block;
  width:var(--w);
}

#profi .gp-zwei{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  margin-top:22px;
}
#profi .gp-zwei article{
  margin:0;
  background:#F6F1E8;color:#122E4D;
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
  min-width:0;
}
#profi .gp-zwei h3{
  margin:0 0 8px;
  font-family:"Satoshi",sans-serif;
  font-weight:700;font-size:1.2rem;line-height:1.2;
  letter-spacing:-.015em;color:#122E4D;
}
#profi .gp-zwei p{margin:0;color:#2B3642;font-size:16px;line-height:1.5}
#profi .gp-kicker{
  font:600 12px/1 Figtree,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  color:#A3421D;margin:0 0 8px;
}
#profi .gp-body{padding:20px 22px 22px}
#profi .gp-foto{margin:0;aspect-ratio:16/10;overflow:hidden;background:#0c2238}
#profi .gp-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Variante B: eine gemeinsame Fläche, Chips auf dem Foto, typografische Karten */
#profi.gp-b .gp-pane{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:stretch;
  margin-top:28px;
  border-radius:16px;overflow:hidden;
  background:#F6F1E8;
}
#profi.gp-b .gp-media{border-radius:0}
#profi.gp-b .gp-typen{border-radius:0;box-shadow:none}
#profi.gp-b .gp-chips{
  position:absolute;left:12px;right:12px;bottom:12px;
  margin:0;z-index:1;
}
#profi.gp-b .gp-chips li{
  background:rgba(246,241,232,.92);
  border:0;
  color:#122E4D;
  padding:6px 11px 6px 9px;
  font-size:12.5px;
  backdrop-filter:blur(6px);
}
#profi.gp-b .gp-chips svg{stroke:#A3421D}
#profi.gp-b .gp-zwei article{
  background:rgba(246,241,232,.08);
  border:1px solid rgba(246,241,232,.18);
  color:#F6F1E8;
}
#profi.gp-b .gp-zwei h3{color:#fff}
#profi.gp-b .gp-zwei p{color:#F6F1E8}
#profi.gp-b .gp-kicker{color:#E27D50}
#profi.gp-b .gp-zwei .gp-foto{display:none}

/* Variante C: Merkmalskacheln, Optionen als Querformat */
#profi.gp-c .gp-ikonen{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
#profi.gp-c .gp-ikonen li{
  margin:0;padding:14px 16px;
  border-radius:14px;
  background:rgba(246,241,232,.08);
  border:1px solid rgba(246,241,232,.14);
  color:#F6F1E8;
  display:flex;align-items:flex-start;gap:12px;
  font:600 14px/1.35 Figtree,sans-serif;
}
#profi.gp-c .gp-ikonen svg{
  width:18px;height:18px;flex:none;margin-top:1px;
  stroke:#E27D50;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
#profi.gp-c .gp-zwei{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
}
#profi.gp-c .gp-zwei article{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:stretch;
}
#profi.gp-c .gp-foto{
  aspect-ratio:auto;height:100%;min-height:200px;
}
#profi.gp-c .gp-zwei article:last-child .gp-foto img{object-position:22% 50%}
#profi.gp-c .gp-body{
  padding:22px 22px;
  display:flex;flex-direction:column;justify-content:center;
}

@media (max-width:767px){
  #profi .gp-chips{margin-top:18px;gap:7px}
  #profi .gp-chips li{padding:7px 12px 7px 10px;font-size:13px}
  #profi .gp-split,
  #profi.gp-b .gp-pane,
  #profi .gp-zwei,
  #profi.gp-c .gp-zwei,
  #profi.gp-c .gp-zwei article,
  #profi.gp-c .gp-ikonen{grid-template-columns:1fr}
  #profi .gp-split,
  #profi.gp-b .gp-pane{margin-top:22px;gap:14px}
  #profi.gp-b .gp-pane{gap:0}
  #profi .gp-media::before{aspect-ratio:16/10}
  #profi .gp-typen{padding:18px 18px}
  #profi .gp-kopf,
  #profi .gp-zeile{grid-template-columns:76px minmax(0,1fr) 40px;gap:8px}
  #profi .gp-zeile{padding:6px 0;font-size:13px}
  #profi .gp-zwei{margin-top:14px;gap:12px}
  #profi .gp-body{padding:18px 18px 20px}
  #profi.gp-c .gp-foto{min-height:0;aspect-ratio:16/10;height:auto}
  #profi.gp-c .gp-ikonen{grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
  #profi.gp-c .gp-ikonen li{padding:12px 12px;font-size:13px;gap:8px}
  #profi.gp-b .gp-chips{left:10px;right:10px;bottom:10px}
  #profi.gp-b .gp-chips li{font-size:12px;padding:6px 10px 6px 8px}
}

/* LittleStarlet-Sektion (ersetzt EasyStar). Gleiche Sprache wie Variante C. */
#littlestarlet .ls-split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:22px;
  align-items:stretch;
  margin-top:28px;
}
#littlestarlet .ls-media{
  position:relative;margin:0;
  border-radius:16px;overflow:hidden;
  min-height:100%;
  background:#0c2238;
}
#littlestarlet .ls-media::before{
  content:"";display:block;aspect-ratio:16/10;
}
#littlestarlet .ls-media picture,
#littlestarlet .ls-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:40% 50%;
  display:block;border-radius:0;
}
#littlestarlet .ls-media picture,
#littlestarlet .ls-media img,
#littlestarlet .bs-bild{opacity:1!important}
#littlestarlet .ls-info{
  background:#F6F1E8;color:#122E4D;
  border-radius:16px;
  padding:22px 24px;
  display:flex;flex-direction:column;justify-content:center;
  min-height:100%;
  min-width:0;
}
#littlestarlet .ls-info h3{
  margin:12px 0 8px;
  font-family:"Satoshi",sans-serif;
  font-weight:700;font-size:1.25rem;line-height:1.2;
  letter-spacing:-.015em;color:#122E4D;
}
#littlestarlet .ls-info > p{margin:0 0 12px;color:#2B3642;font-size:16px;line-height:1.5}
#littlestarlet .ls-info .gs-chip{
  background:#fff;
  border:1px solid rgba(18,46,77,.14);
  color:#122E4D;
  margin:0 8px 8px 0;
  padding:5px 10px;
}
#littlestarlet .ls-info .gs-dl{margin:4px 0 0}
#littlestarlet .ls-fuss{margin-top:16px}

@media (max-width:767px){
  #littlestarlet .ls-split{grid-template-columns:1fr;gap:14px;margin-top:22px}
  #littlestarlet .ls-info{padding:18px 18px}
  #littlestarlet .ls-info .gs-dl div{grid-template-columns:88px minmax(0,1fr);gap:8px}
}