/* Vertraute Profilmodule aus app/stil.css, nur innerhalb der Konzeptdemo.
   Keine globalen Änderungen an echten Inseraten oder der Bilderwand. */
.demo-sr-title { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#vollprofil .vp-koerper { max-width:1080px; margin:0 auto; padding:36px 20px 60px; }
#vollprofil .vp-titel { padding:0 0 28px; }
#vollprofil .vp-titel h2 { font-family:Merriweather,Georgia,serif; font-size:clamp(30px,4.6vw,44px); font-weight:500; line-height:1.2; margin-top:8px; }
#vollprofil .vp-zeile { line-height:1.55; }
#vollprofil .detail { display:grid; grid-template-columns:1.6fr 1fr; gap:32px; align-items:start; padding-bottom:44px; }
#vollprofil .galerie { display:block; }
#vollprofil .vp-bildrahmen { position:relative; border-radius:12px; overflow:hidden; background:var(--papier); }
#vollprofil .vp-held { position:relative; display:block; padding:0; margin:0; width:100%; aspect-ratio:3/2; height:auto; border-radius:12px; overflow:hidden; cursor:zoom-in; touch-action:pan-y pinch-zoom; }
#vollprofil .vp-held img { position:absolute; inset:0; display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border-radius:0; }
#vollprofil #vp-galerie-block { margin-top:10px; }
#vollprofil .vp-vorschaubilder { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#vollprofil .vp-vorschaubilder button { display:block; min-width:0; border-radius:12px; overflow:hidden; }
#vollprofil .vp-vorschaubilder .bildfeld { width:100%; height:auto; aspect-ratio:3/2 !important; }
#vollprofil .vp-vorschaubilder img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; }
#vollprofil .beschreibung { margin-top:26px; max-width:640px; }
#vollprofil .beschreibung h2 { font-family:Merriweather,Georgia,serif; font-size:21px; font-weight:600; margin-bottom:10px; line-height:1.4; }
#vollprofil .vp-text { font-size:15.5px; line-height:1.65; }
#vollprofil .steckbrief { background:var(--karte); border:1px solid var(--linie); border-radius:16px; padding:22px; position:sticky; top:80px; }
#vollprofil .steckbrief h2 { font-family:Merriweather,Georgia,serif; font-size:19px; font-weight:600; margin-bottom:10px; }
#vollprofil .steckbrief .zeile { display:flex; gap:10px; font-size:14.5px; padding:9px 0; border-bottom:1px solid var(--linie); }
#vollprofil .steckbrief .zeile b { min-width:74px; color:var(--grau); font-weight:500; }
#vollprofil .steckbrief p { font-size:14px; color:var(--grau); line-height:1.65; margin-top:16px; }
#vollprofil .steckbrief .hell { margin-top:20px; white-space:normal; width:100%; }
/* Website und Social-Zeile aus dem vorhandenen Inserats-Steckbrief. In dieser
   Demo erklären lokale Schaltflächen die Funktion, ohne erfundene Linkziele. */
#vollprofil .steckbrief .web { display:block; width:100%; text-align:center;
  background:var(--rost); color:#fff; font-weight:600; border:0; border-radius:10px;
  padding:12px; margin-top:14px; }
#vollprofil .steckbrief .web:hover { background:var(--rost-dunkel); }
#vollprofil .steckbrief .sozial { display:flex; gap:8px; margin-top:12px; }
#vollprofil .steckbrief .sozial button { flex:1; min-width:0; text-align:center;
  font-size:13.5px; border:1px solid var(--linie); border-radius:8px; padding:8px 4px; color:var(--grau); }
#vollprofil .steckbrief .sozial button:hover { border-color:var(--rost); color:var(--rost); }
#vollprofil .steckbrief .demo-kontakt-status { font-size:13px; color:var(--rost-dunkel); margin-top:12px; }
#vollprofil .steckbrief .demo-kontakt-status[hidden] { display:none; }
.anbieter-status { display:block; margin-top:8px; font-size:11.5px; font-weight:600; color:var(--rost-dunkel); }
.anbieter-status[hidden] { display:none; }
/* Direkter Weg von der Wand zum Anbieter. Der Rückweg bleibt oben erreichbar,
   die reine Bildvergrößerung ist nur noch eine optionale Ansicht. */
.profil { position:fixed; top:var(--band, 36px); }
.profil-leiste { position:sticky; top:0; z-index:3; padding:12px 18px; background:#f7f3ecf2;
  backdrop-filter:blur(8px); border-bottom:1px solid var(--linie); }
.profil-leiste .profil-zurueck { position:static; background:none; border-radius:0;
  padding:0; min-height:40px; font-size:14px; color:var(--tinte); }
.profil-leiste .profil-zurueck:hover { color:var(--rost-dunkel); }
.profil-kopf { width:100%; aspect-ratio:4/5; height:auto; background:var(--papier); }
.profil-bild { display:block; width:100%; height:100%; padding:0; cursor:zoom-in; touch-action:pan-y pinch-zoom; }
.profil-bild .bildfeld { width:100%; height:100%; }
.profil-bild .bildfeld, #vollprofil .vp-vorschaubilder .bildfeld { background:var(--papier); }
.profil-bild .bildfeld img { object-fit:cover; }
.profil .blaettern, .vp-bildrahmen .blaettern { width:44px; height:44px; }
.profil .thumb .bildfeld { height:76px; aspect-ratio:auto !important; background:var(--papier); }
.profil .thumb .bildfeld img { width:100%; height:100%; object-fit:cover; }
.thumb[aria-current="true"], #vp-galerie button[aria-current="true"] { outline:2px solid var(--rost); outline-offset:2px; }
.profil-weiter { display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.profil-weiter svg { flex:0 0 auto; }
@media (max-width:600px) {
  .profil-weiter { width:100%; }
}
.profil-bildleiste { display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:8px 20px 0; font-size:12.5px; color:var(--grau); }
#profil-bild-merken { flex:0 0 40px; }
#vp-lupe-zu { min-width:40px; min-height:40px; justify-content:center; }
@container app (min-width:900px) {
  .profil-karte { width:min(560px,100%); }
  .profil-kopf { border-radius:0; }
  .profil-leiste { border-radius:16px 16px 0 0; }
}
/* Ein Fähnchen-Stil, unabhängig von der Ansicht; die Trefffläche bleibt groß. */
.merken-gross { border:0; background:none; border-radius:0; width:40px; height:40px; }
.merken-gross[aria-pressed="true"] { border:0; }
.merken, .merken:hover, .merken[aria-pressed="true"] { border:0; background:none; border-radius:0; min-width:40px; min-height:40px; }
.vp-merk, #vollprofil .vp-merk { border:0; background:none; border-radius:0; }
.vp-merk .merkwort { display:inline; }
.merken svg, .merken-gross svg, .profil-merken svg, .vp-merk svg, .us-merk svg { width:13px; height:16px; flex:0 0 auto; }
/* Ein gemeinsamer Zustandswechsel statt neu eingesetzter SVGs: Auch im Motiv,
   Kurzprofil und Vollprofil füllt/leert sich dasselbe Fähnchen in 140 ms. */
:is(.merken, .merken-gross, .profil-merken, .vp-merk, .us-merk) svg > path:not(.lz-fuell) {
  stroke:#a99e96; transition:stroke .14s ease-out;
}
:is(.merken, .merken-gross, .profil-merken, .vp-merk, .us-merk) .lz-fuell {
  fill:var(--rost); clip-path:inset(100% 0 0 0); transition:clip-path .14s ease-out;
}
:is(.merken, .merken-gross, .profil-merken, .vp-merk)[aria-pressed="true"] svg > path:not(.lz-fuell),
.us-merk.voll svg > path:not(.lz-fuell) { stroke:var(--rost); }
:is(.merken, .merken-gross, .profil-merken, .vp-merk)[aria-pressed="true"] .lz-fuell,
.us-merk.voll .lz-fuell { clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce) {
  :is(.merken, .merken-gross, .profil-merken, .vp-merk, .us-merk) svg > path { transition:none; }
}
@container app (min-width:900px) {
  .seitenleiste { max-height:calc(100dvh - var(--band, 36px) - 77px); overflow-y:auto; scrollbar-width:thin; }
}
@media (max-width:760px) {
  #vollprofil .vp-koerper { padding-top:28px; }
  #vollprofil .detail { grid-template-columns:1fr; gap:24px; }
  #vollprofil .steckbrief { position:static; }
  #vollprofil .vp-vorschaubilder { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #vollprofil .vp-kopf { gap:10px; padding:12px 14px; flex-wrap:wrap; }
  #vollprofil .vp-zurueck { font-size:12.5px; gap:6px; }
  #vollprofil .vp-merk { padding:7px 0; font-size:11.5px; gap:6px; min-height:40px; }
}
@container app (max-width:899px) {
  .top .demo-zurueck { order:3; }
}