/* kneissl|media Startseite & Sanaponte – nutzt die Farben/Schriften des Themes (mit Rückfall-Werten) */
.kmh{
  --kmh-ink:var(--c-ink,#211F1B); --kmh-dim:var(--c-ink-dim,#6E6A61); --kmh-accent:var(--c-accent,#C41E3A);
  --kmh-line:var(--c-line,#E3DFD3); --kmh-bg:var(--c-bg-alt,#F1EEE6); --kmh-surface:var(--c-surface,#fff);
  --kmh-mono:var(--f-mono,'IBM Plex Mono','Courier New',monospace);
  max-width:760px; margin:0 auto; text-align:center;
}
.km-vc-page .vc_row.kmh-row{
  background:linear-gradient(180deg,var(--c-accent-soft,#F6E3E1) 0%,var(--c-bg,#FBFAF6) 100%);
  padding-top:clamp(1.1rem,3.5vw,2.8rem); padding-bottom:clamp(1.4rem,4vw,3rem); border-bottom:1px solid var(--c-line,#E3DFD3);
}
.kmh-ad{
  display:inline-flex; align-items:center; gap:.5em; margin:0 0 .8rem; padding:.3em .8em; border-radius:20px;
  font-family:var(--kmh-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--kmh-dim); background:var(--kmh-surface); border:1px solid var(--kmh-line);
}
.kmh-ad span{ color:var(--kmh-accent); font-size:.7em; }
.kmh-title{ font-size:clamp(1.55rem,4.6vw,2.6rem); line-height:1.1; margin:0 0 .6rem; color:var(--kmh-ink); }
.kmh-sub{ margin:0 auto 1.2rem; max-width:52ch; font-size:clamp(.92rem,2.6vw,1.05rem); }
.kmh-code-row{ display:flex; gap:.6rem; justify-content:center; align-items:stretch; flex-wrap:wrap; margin:0 auto; }
.kmh-code{
  flex:1 1 220px; max-width:360px; display:flex; align-items:center; justify-content:center;
  font-family:var(--kmh-mono); font-weight:500; letter-spacing:.04em; font-size:clamp(1.5rem,6.4vw,2.4rem); color:var(--kmh-ink);
  background:var(--kmh-surface); border:2px dashed var(--kmh-accent); border-radius:8px; padding:.45em .6em;
  -webkit-user-select:all; user-select:all; word-break:keep-all;
}
.kmh-copy{
  flex:0 0 auto; min-height:48px; cursor:pointer; border:none; border-radius:8px; padding:0 1.5em;
  background:var(--kmh-ink); color:#fff; font:600 1rem/1.1 var(--f-head,Inter,system-ui,sans-serif);
  transition:background .2s ease, transform .15s ease;
}
.kmh-copy:hover{ background:#3a3630; transform:translateY(-2px); }
.kmh-copy.is-copied{ background:var(--c-accent-2,#21665A); }
.kmh-live{ margin:.4rem 0 0; min-height:1.2em; font-size:.85rem; color:var(--c-accent-2,#21665A); font-weight:600; }
.kmh-actions{ display:flex; gap:.6rem 1.4rem; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:.4rem; }
.kmh-shop{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.6em; border-radius:8px;
  background:var(--kmh-accent); color:#fff; font:600 1rem/1.1 var(--f-head,Inter,system-ui,sans-serif); text-decoration:none;
  box-shadow:0 4px 8px rgba(33,31,27,.08); transition:background .2s ease, transform .15s ease;
}
.kmh-shop:hover{ background:#a91830; color:#fff; transform:translateY(-2px); }
.kmh-more{ color:var(--kmh-ink); font-weight:600; font-size:.95rem; text-decoration:underline; text-underline-offset:3px; }
.kmh-more:hover{ color:var(--kmh-accent); }
.kmh-discounts{
  list-style:none; margin:1.5rem auto 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; max-width:620px; text-align:left;
}
.kmh-discounts li{ display:flex; align-items:baseline; gap:.6rem; background:var(--kmh-surface); border:1px solid var(--kmh-line); border-left:3px solid var(--kmh-accent); border-radius:0 6px 6px 0; padding:.6rem .8rem; color:var(--kmh-ink); font-size:.92rem; line-height:1.35; margin:0; }
.kmh-discounts strong{ font-family:var(--kmh-mono); font-weight:500; font-size:1.2rem; color:var(--kmh-accent); white-space:nowrap; }
.kmh-note{ margin:.8rem 0 0; font-family:var(--kmh-mono); font-size:.72rem; color:var(--kmh-dim); }
@media (max-width:560px){
  .kmh-discounts{ grid-template-columns:1fr; }
  .kmh-copy{ flex:1 1 100%; }
  .kmh-code{ flex:1 1 100%; max-width:none; }
}
/* auf sehr schmalen Handys bleiben Code und Button nebeneinander, sofern Platz ist */
@media (min-width:360px) and (max-width:560px){
  .kmh-code{ flex:1 1 0; min-width:0; }
  .kmh-copy{ flex:0 0 auto; }
}

/* ---------- YouTube-Videos ---------- */
.kmh-videos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,3vw,1.8rem); margin-top:2rem; }
.kmh-video{ margin:0; }
.kmh-video-box{ position:relative; aspect-ratio:16/9; background:var(--c-bg-alt,#F1EEE6); border:1px solid var(--c-line,#E3DFD3); border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.kmh-video-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.kmh-video-consent{ padding:1rem; max-width:46ch; }
.kmh-video-provider{ font-family:var(--f-display,Georgia,serif); font-weight:600; font-size:1.05rem; color:var(--c-ink,#211F1B); margin:0 0 .4rem; }
.kmh-video-hint{ font-size:.78rem; margin:0 0 .9rem; color:var(--c-ink-dim,#6E6A61); }
.kmh-video-hint a{ color:var(--c-accent,#C41E3A); text-decoration:underline; }
.kmh-load{ cursor:pointer; border:none; border-radius:4px; padding:.75em 1.4em; background:var(--c-accent,#C41E3A); color:#fff; font:600 .95rem/1 var(--f-head,Inter,system-ui,sans-serif); }
.kmh-load:hover{ background:#a91830; }
.kmh-video figcaption{ margin-top:.6rem; font-weight:600; font-size:.95rem; line-height:1.35; }
.kmh-video figcaption a{ color:var(--c-ink,#211F1B); }
.kmh-video figcaption a:hover{ color:var(--c-accent,#C41E3A); }
@media (max-width:700px){ .kmh-videos{ grid-template-columns:1fr; } }

.km-vc-page .wpb_wrapper > .kmh-videos{ margin-top:2rem; }
.kmh-disclaimer{ font-size:.85rem; color:var(--c-ink-dim,#6E6A61); border-left:3px solid var(--c-line,#E3DFD3); padding-left:1rem; max-width:70ch; }

/* Video-Platzhalter: nur Play-Symbol, Hinweis steht einmal über der Liste */
.kmh-video-note{ margin:1.2rem 0 0; text-align:center; font-size:.85rem; }
.kmh-video-box{ background:linear-gradient(135deg,#2a2723,#47413a); }
.kmh-video-box .kmh-load{ position:absolute; inset:0; width:100%; height:100%; padding:0; border-radius:0; background:transparent; display:flex; align-items:center; justify-content:center; }
.kmh-video-box .kmh-load:hover{ background:transparent; }
.kmh-play{ width:72px; height:72px; border-radius:50%; background:var(--c-accent,#C41E3A); position:relative; box-shadow:0 4px 18px rgba(0,0,0,.35); transition:transform .15s; }
.kmh-play::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%); border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent #fff; }
.kmh-load:hover .kmh-play, .kmh-load:focus-visible .kmh-play{ transform:scale(1.08); }
.kmh-load:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
@media (max-width:700px){ .kmh-play{ width:64px; height:64px; } }

.kmh-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kmh-thumb + .kmh-load::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.35),rgba(0,0,0,.05)); }
.kmh-box-ready .kmh-thumb{ display:none; }