/* Website im Profil (components/WebsiteEinbettung.tsx) – Präfix wsv-. Fotoseite der Studio-Website im Rahmen, links zwischen „Über“ und „Leistungen“. */
.wsv{min-width:0;overflow-wrap:anywhere} /* lange Domains brechen um, statt die Spalte zu sprengen */
.wsv .btn{white-space:normal;text-align:center}
.wsv-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.wsv-titel{min-width:0}
.wsv-titel h2{margin:0}
.wsv-titel p{margin:4px 0 0;overflow-wrap:anywhere}
.wsv-titel b{color:var(--fg)}
.wsv-tab{flex:none}

/* Rahmen: schmale Leiste mit der Adresse (woher die Inhalte kommen), darunter die Seite */
.wsv-rahmen{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.wsv-leiste{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:var(--panel2);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--fg2)}
.wsv-leiste svg{flex:none;color:var(--green)}
.wsv-flaeche{position:relative;height:640px;background:#fff}
/* Rahmen über der Ladefläche (08.11.2026): Solange die Seite lädt, ist der Rahmen durchsichtig – was die Website schon zeichnet, liegt sofort
   über der Ladefläche, statt erst nach dem kompletten Laden (onLoad) aufzutauchen. Danach wieder weiß (Seiten ohne eigenen Hintergrund). */
.wsv-flaeche iframe{position:relative;z-index:1;display:block;width:100%;height:100%;border:0;background:#fff}
.wsv-flaeche.laedt iframe{background:transparent}
.wsv-lade{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:10px;padding:14px;background:#fff;pointer-events:none}
.wsv-lade span{border-radius:10px;background:var(--panel2);animation:wsv-puls 1.4s ease-in-out infinite}
.wsv-lade span:nth-child(3n+2){animation-delay:.15s}.wsv-lade span:nth-child(3n){animation-delay:.3s}
@keyframes wsv-puls{50%{opacity:.5}}
.wsv-tippen{display:none}
.wsv-fuss{margin:10px 2px 0}
.wsv-tipp{margin:12px 2px 0;color:var(--fg2);max-width:70ch}.wsv-tipp b{color:var(--fg)}

/* Einwilligung, Prüfung, nur Link: ruhige Fläche in derselben Breite */
.wsv-feld{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.wsv-feld b{font:700 17px/1.3 var(--fd);color:var(--fg);overflow-wrap:anywhere}
.wsv-feld p{margin:0 0 8px;max-width:62ch}
.wsv-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--green);margin-bottom:6px}
.wsv-ico-dreht svg{animation:wsv-dreh 2.4s linear infinite}
@keyframes wsv-dreh{to{transform:rotate(360deg)}}
.wsv-aktion{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.wsv-merken{display:inline-flex;align-items:center;gap:8px;color:var(--fg2);cursor:pointer}
.wsv-merken input{width:18px;height:18px;accent-color:var(--green);margin:0}
[data-zustand="pruefen"] .wsv-feld{min-height:220px;justify-content:center}

/* Handy und Tablet mit Finger: Rahmen erst nach Antippen bedienbar */
@media (pointer:coarse){
  /* Pille mittig – unten läge sie hinter der festen Anfrage-Leiste */
  .wsv-tippen{display:flex;position:absolute;inset:0;z-index:2;align-items:center;justify-content:center;padding:0;border:0;margin:0;cursor:pointer;font:inherit;background:rgba(16,20,24,.07)}
  .wsv-tippen span{background:#fff;color:var(--fg);font:700 14px var(--ff);padding:10px 16px;border-radius:999px;box-shadow:0 6px 18px -8px rgba(16,20,24,.45)}
  .wsv-rahmen.aktiv{border-color:var(--green);box-shadow:0 0 0 2px var(--mint)}
}
@media (max-width:860px){
  .wsv-flaeche{height:min(68vh,560px);min-height:380px}
  .wsv-feld{padding:20px}
  .wsv-aktion .btn{width:100%}
}
/* Instagram (components/InstagramEinbettung.tsx): Höhe kommt aus der Breite (inline am Element), deshalb ohne die Mindesthöhe der Website */
.wsv-ig-rahmen .wsv-flaeche{height:520px;min-height:0}
@media (prefers-reduced-motion:reduce){.wsv-lade span,.wsv-ico-dreht svg{animation:none}}