/* ===========================
   Common styles for all cards
   Adaptive content layout – Card phase 2
   =========================== */

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}

body{
  --mv-public-card-width:min(calc(100vw - 36px),var(--mv-public-narrow-max,420px));
  --mv-public-card-height:min(90vh,740px);
  --mv-public-card-height:min(90svh,740px);
  --mv-public-card-height:min(90dvh,740px);
  margin:0;
  padding:8px max(var(--mv-public-gutter,18px),env(safe-area-inset-right,0px)) 0 max(var(--mv-public-gutter,18px),env(safe-area-inset-left,0px));
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  overflow-x:hidden;
  background:#fff;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
}


/* Die optionale Stimmungsmusik sitzt vollständig innerhalb der Kartenfläche
   und wird nicht mehr teilweise vom oberen Bildschirmrand abgeschnitten. */
.mv-card-view > .mv-background-music-player{
  top:max(
    calc(8px + env(safe-area-inset-top,0px)),
    calc((100vh - var(--mv-public-card-height))/2 + 10px)
  );
  left:max(
    calc(8px + env(safe-area-inset-left,0px)),
    calc((100vw - var(--mv-public-card-width))/2 + 10px)
  );
}
@supports (height:100dvh){
  .mv-card-view > .mv-background-music-player{
    top:max(
      calc(8px + env(safe-area-inset-top,0px)),
      calc((100dvh - var(--mv-public-card-height))/2 + 10px)
    );
  }
}

.card-card{
  --card-inline-pad:clamp(12px,3.8vw,18px);
  --card-content-gap:clamp(8px,1.8vh,13px);
  --card-photo-radius:14px;
  --card-fab-safe:78px;
  --card-design-header-max:132px;
  --card-design-footer-min:76px;
  width:min(100%,var(--mv-public-narrow-max,420px));
  height:min(90vh,740px);
  height:min(90svh,740px);
  height:min(90dvh,740px);
  background:#fff;
  border:1px solid var(--mv-public-border,rgba(255,255,255,.58));
  border-radius:var(--mv-public-radius,24px);
  box-shadow:var(--mv-public-shadow,0 18px 42px rgba(73,55,37,.12),0 4px 12px rgba(73,55,37,.06));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

/* Layer-basierte Designgrafiken werden nur von entsprechend markierten
   Designpaketen genutzt. Bestehende CSS-basierte Designs bleiben dadurch
   visuell unverändert. */
.card-card.has-design-layer-assets > .card-header,
.card-card.has-design-layer-assets > .card-body,
.card-card.has-design-layer-assets > .card-footer{
  position:relative;
  z-index:1;
}
.card-design-background{
  position:absolute;
  inset:-1px;
  z-index:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}
.card-design-background img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.card-header.has-design-asset{
  height:auto;
  min-height:0;
  max-height:var(--card-design-header-max);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  background:none!important;
}
.card-design-header-image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:var(--card-design-header-max);
  object-fit:contain;
  object-position:top center;
  flex:0 1 auto;
}
.card-footer.has-design-asset{
  min-height:var(--card-design-footer-min);
  overflow:hidden;
  background:none!important;
}
.card-design-footer-image{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:bottom center;
  pointer-events:none;
}
.card-footer.has-design-asset > :not(.card-design-footer-image){
  position:relative;
  z-index:1;
}

.card-header{
  width:100%;
  height:100px;
  min-height:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  flex:0 0 auto;
  transition:height .18s ease;
}

.card-body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0 var(--card-inline-pad);
}

.card-content{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:var(--card-content-gap);
}

.card-text-shell{
  position:relative;
  width:100%;
  min-height:0;
  flex:1 1 auto;
  display:flex;
  overflow:hidden;
}

.card-text{
  width:100%;
  min-height:0;
  flex:1 1 auto;
  margin:0;
  padding:8px 10px 4px;
  color:#1d1d21;
  font-size:clamp(1.02rem,2.55vw,1.20rem);
  line-height:1.42;
  text-align:left;
  overflow-y:auto;
  overflow-x:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.card-text:focus-visible{
  outline:2px solid rgba(113,136,121,.34);
  outline-offset:-2px;
  border-radius:10px;
}
.card-text::-webkit-scrollbar{width:0;height:0;display:none;}
.card-text p{
  margin:0 0 .44em;
  padding:0;
}
.card-text p:last-child{margin-bottom:0;}

.card-text-shell.has-scroll-cue::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:44px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.76) 60%,rgba(255,255,255,.92));
}
.layout-smart .card-text-shell.has-scroll-cue::after{
  background:linear-gradient(to bottom,rgba(43,43,43,0),rgba(43,43,43,.78) 62%,rgba(43,43,43,.94));
}
.card-scroll-cue{
  appearance:none;
  position:absolute;
  left:50%;
  bottom:4px;
  z-index:3;
  width:32px;
  height:26px;
  padding:0;
  border:1px solid rgba(255,255,255,.62);
  border-radius:999px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  background:rgba(255,252,247,.90);
  color:var(--player-main,#718879);
  box-shadow:0 5px 16px rgba(73,55,37,.12);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  animation:mvCardCue 1.8s ease-in-out 2;
}
.card-scroll-cue svg{width:17px;height:17px;fill:currentColor;}
.card-scroll-cue:focus-visible{outline:3px solid rgba(113,136,121,.28);outline-offset:2px;}
@keyframes mvCardCue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,3px)}}

.card-photo{
  min-width:0;
  min-height:0;
  flex:0 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding:0;
  background:transparent;
  border:0;
  border-radius:var(--card-photo-radius);
  overflow:visible;
}
.card-photo img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  border:0;
  border-radius:var(--card-photo-radius);
  object-fit:contain;
  object-position:center;
  background:transparent;
  box-shadow:none;
}

.card-footer{
  width:100%;
  min-height:0;
  padding:34px 0 22px;
  text-align:center;
  border-bottom-left-radius:25px;
  border-bottom-right-radius:25px;
  position:relative;
  flex:0 0 auto;
}

.card-audio{
  width:min(78%,260px);
  max-width:100%;
  margin:0 auto 12px;
  flex:0 0 auto;
}
.card-audio audio{width:100%;height:34px;border-radius:6px;}

/* Card messages always start at the upper-left edge. Short text must not
   switch back to a centered greeting-card composition. */
.card-card.has-text .card-content{
  align-items:stretch;
  justify-content:flex-start;
}
.card-card.has-text .card-text-shell{
  align-self:stretch;
}
.card-card.has-text .card-text{
  text-align:left!important;
}

/* ===========================
   Text-only
   =========================== */
.card-card.mode-textOnly .card-content{justify-content:flex-start;}
.card-card.mode-textOnly .card-text{
  padding:6px 12px 4px;
  font-size:clamp(1.06rem,2.70vw,1.24rem);
  line-height:1.43;
}
.card-card.mode-textOnly.text-short .card-content,
.card-card.mode-textOnly.text-medium .card-content{
  justify-content:flex-start;
}
.card-card.mode-textOnly.text-short .card-text-shell,
.card-card.mode-textOnly.text-medium .card-text-shell{
  flex:1 1 auto;
  max-height:none;
}
.card-card.mode-textOnly.text-short .card-text{
  text-align:left;
  padding:6px 12px 4px;
}
.card-card.mode-textOnly.has-audio .card-text{
  font-size:clamp(1.00rem,2.42vw,1.16rem);
  line-height:1.40;
}

/* ===========================
   Text + image
   =========================== */
.card-card.mode-textImage .card-content{justify-content:flex-start;}
.card-card.mode-textImage .card-text{
  padding:4px 10px 2px;
  font-size:clamp(1.00rem,2.42vw,1.16rem);
  line-height:1.40;
}
.card-card.mode-textImage .card-photo{
  width:min(82%,320px);
  height:auto;
  min-height:132px;
  max-height:clamp(150px,27dvh,220px);
  aspect-ratio:var(--card-image-ratio,4 / 3);
  padding-bottom:0;
}
.card-card.mode-textImage .card-photo img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.card-card.mode-textImage.image-landscape .card-photo{width:min(88%,344px);}
.card-card.mode-textImage.image-square .card-photo{width:min(70%,274px);}
.card-card.mode-textImage.image-portrait .card-photo{width:min(58%,226px);}
/* Die Größenverteilung hängt bewusst nur von der stabilen serverseitigen
   Textklasse ab. Der gemessene Overflow steuert ausschließlich den
   Scrollhinweis und darf die Bildhöhe nicht verändern. */
.card-card.mode-textImage.text-short .card-content{
  justify-content:flex-start;
}
.card-card.mode-textImage.text-short .card-text-shell{
  flex:0 1 auto;
  max-height:34%;
}
.card-card.mode-textImage.text-short .card-text{
  text-align:left;
}
.card-card.mode-textImage.text-medium .card-content{
  justify-content:flex-start;
}
.card-card.mode-textImage.text-medium .card-text-shell{
  flex:0 1 auto;
  max-height:calc(100% - clamp(132px,23dvh,188px) - var(--card-content-gap));
}
.card-card.mode-textImage.text-medium .card-photo{
  width:min(76%,300px);
  min-height:116px;
  max-height:clamp(132px,23dvh,188px);
}
.card-card.mode-textImage.text-long .card-photo{
  width:min(68%,270px);
  min-height:102px;
  max-height:clamp(116px,19dvh,158px);
}
.card-card.mode-textImage.has-audio .card-header{height:78px;}
.card-card.mode-textImage.has-audio .card-photo{
  width:min(78%,306px);
  min-height:112px;
  max-height:clamp(126px,21dvh,176px);
}
.card-card.mode-textImage.has-audio.image-landscape .card-photo{width:min(84%,330px);}
.card-card.mode-textImage.has-audio.image-square .card-photo{width:min(66%,258px);}
.card-card.mode-textImage.has-audio.image-portrait .card-photo{width:min(54%,212px);}

/* ===========================
   Image-only
   Intrinsic size is preserved; CSS only constrains oversized images.
   =========================== */
.card-card.mode-imageOnly .card-header{height:72px;}
.card-card.mode-imageOnly .card-footer{padding:18px 0;}
.card-card.mode-imageOnly .card-body{padding:0 clamp(8px,2.8vw,14px);}
.card-card.mode-imageOnly .card-content{justify-content:center;}
.card-card.mode-imageOnly .card-photo{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
}
.card-card.mode-imageOnly .card-photo img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.card-card.mode-imageOnly.image-landscape .card-photo img{max-width:100%;}
.card-card.mode-imageOnly.image-portrait .card-photo img{max-height:100%;}
.card-card.mode-imageOnly.image-small .card-photo img{
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}

/* ===========================
   Audio-only
   =========================== */
.card-card.mode-audioOnly .card-content{justify-content:center;}
.card-card.mode-audioOnly .card-footer{padding:16px 0;}
.card-card.mode-audioOnly .card-audio{
  width:min(88%,330px);
  max-width:330px;
  margin:0 auto;
  padding:clamp(15px,3.6vw,22px) clamp(10px,3vw,18px);
  border:1px solid rgba(255,255,255,.56);
  border-radius:24px;
  background:rgba(255,255,255,.42);
  box-shadow:0 12px 32px rgba(73,55,37,.08);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.layout-smart.mode-audioOnly .card-audio{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

/* ===========================
   Image + audio
   =========================== */
.card-card.mode-audioImage .card-content{
  justify-content:center;
  gap:clamp(10px,2.3vh,16px);
}
.card-card.mode-audioImage .card-footer{padding:14px 0;}
.card-card.mode-audioImage .card-photo{
  width:100%;
  height:min(42%,240px);
}
.card-card.mode-audioImage.image-landscape .card-photo{height:min(34%,190px);}
.card-card.mode-audioImage.image-portrait .card-photo{height:min(46%,260px);}
.card-card.mode-audioImage .card-audio{
  width:min(88%,320px);
  max-width:320px;
  margin:0 auto;
}
.card-card.mode-audioImage .mv-audio-headline{margin-top:0;}

/* ===========================
   Compact footer audio: text + audio / text + image + audio
   =========================== */
.card-card.has-text.has-audio .card-footer{
  padding:18px var(--card-fab-safe) 15px 10px;
}
.card-card.has-text.has-audio .card-footer .card-audio{
  width:100%;
  max-width:270px;
  margin:0 auto;
}

/* ===========================
   AI background
   =========================== */
.card-card.ai-bg-full{
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  background-color:#fff!important;
}
.card-card.ai-bg-full .card-header,
.card-card.ai-bg-full .card-body,
.card-card.ai-bg-full .card-footer{
  background-color:transparent!important;
  background-image:none!important;
}
.card-card.ai-bg-full > :not(.edit-fab-dock){position:relative;z-index:1;}
.card-card.ai-theme-light{color:var(--ai-text-color,#1d1d21);}
.card-card.ai-theme-dark{color:var(--ai-text-color,#f6f7fb);}
.card-card.ai-bg-full .card-text{color:inherit;text-shadow:var(--ai-text-shadow,none);}
.card-card.ai-bg-full .card-photo{display:none!important;}
.card-card.ai-bg-full .card-text-shell.has-scroll-cue::after{
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.24) 58%,rgba(255,255,255,.42));
}
.card-card.ai-theme-dark .card-scroll-cue{
  border-color:rgba(255,255,255,.24);
  background:rgba(25,25,25,.72);
  color:#fff;
}

/* ===========================
   Responsive heights
   =========================== */
@media (max-width:600px){
  body{
    --mv-public-card-width:min(calc(100vw - 32px),var(--mv-public-narrow-max,420px));
    --mv-public-card-height:92vh;
    --mv-public-card-height:92svh;
    --mv-public-card-height:92dvh;
  }
  .card-card{
    width:min(100%,var(--mv-public-narrow-max,420px));
    height:92vh;
    height:92svh;
    height:92dvh;
  }
  .card-card.has-text.has-audio .card-footer{padding-right:74px;}
}

@media (max-width:380px){
  .card-card{--card-inline-pad:10px;--card-fab-safe:72px;}
  .card-header{height:86px;}
  .card-card.mode-textImage.has-audio .card-header{height:66px;}
  .card-card.mode-textImage .card-photo{min-height:118px;max-height:clamp(136px,24dvh,188px);}
  .card-card.mode-textImage.has-audio .card-photo{min-height:104px;max-height:clamp(116px,20dvh,158px);}
  .card-card.has-text.has-audio .card-footer{padding:14px 70px 12px 8px;}
  .card-card.mode-audioImage .card-photo{height:min(38%,190px);}
}

@media (max-height:640px){
  .card-card{--card-design-header-max:92px;--card-design-footer-min:58px;}
  .card-header.has-design-asset,
  .card-design-header-image{max-height:min(var(--card-design-header-max),92px);}
  .card-footer.has-design-asset{min-height:min(var(--card-design-footer-min),58px);}
  .card-header{height:76px;}
  .card-footer{padding-top:22px;padding-bottom:14px;}
  .card-card.mode-imageOnly .card-header{height:52px;}
  .card-card.mode-textImage .card-photo{min-height:92px;max-height:clamp(104px,20dvh,144px);}
  .card-card.mode-textImage.has-audio .card-photo{min-height:82px;max-height:clamp(92px,17dvh,124px);}
  .card-card.mode-audioOnly .card-audio{padding:12px 10px;}
  .card-card.mode-audioImage .card-photo{height:min(34%,170px);}
}

@media (orientation:landscape) and (max-height:520px){
  body{
    --mv-public-card-width:min(92vw,720px);
    --mv-public-card-height:94vh;
    --mv-public-card-height:94svh;
    --mv-public-card-height:94dvh;
  }
  .card-card{
    --card-design-header-max:54px;
    --card-design-footer-min:42px;
    width:min(92vw,720px);
    max-width:720px;
    height:94vh;
    height:94svh;
    height:94dvh;
    border-radius:20px;
  }
  .card-header.has-design-asset,
  .card-design-header-image{max-height:min(var(--card-design-header-max),54px);}
  .card-footer.has-design-asset{min-height:min(var(--card-design-footer-min),42px);}
  .card-header{height:48px;}
  .card-footer{padding:7px 0;}
  .card-body{padding-inline:10px;}
  /* Der enthaltene Aktionen-FAB ragt bei niedrigen Querformaten deutlich
     in die Karte hinein. Dieser Freiraum hält Text, Bild und Audio frei. */
  .card-card.has-view-fab .card-body{padding-bottom:46px;}

  .card-card.mode-imageOnly .card-header{height:40px;}
  .card-card.mode-imageOnly .card-footer{padding:6px 0;}

  .card-card.mode-audioOnly .card-audio{width:min(76%,310px);padding:8px 10px;}
  .card-card.mode-audioImage .card-content{
    flex-direction:row;
    gap:16px;
  }
  .card-card.mode-audioImage .card-photo{
    width:min(48%,330px);
    height:100%;
  }
  .card-card.mode-audioImage .card-audio{
    width:min(46%,300px);
    margin:0;
  }

  .card-card.mode-textImage .card-content{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(130px,38%);
    align-items:stretch;
    gap:12px;
  }
  .card-card.mode-textImage .card-text-shell{
    width:100%;
    height:100%;
    max-height:100%!important;
  }
  .card-card.mode-textImage .card-photo{
    width:100%;
    height:100%;
    min-height:0;
    max-height:100%;
    aspect-ratio:auto;
  }
  .card-card.mode-textImage.has-audio .card-footer{
    padding:7px 72px 7px 8px;
  }
  .card-card.mode-textImage.has-audio .card-photo{height:100%;max-height:100%;}
}

@media (prefers-reduced-motion:reduce){
  .card-scroll-cue{animation:none;}
  .card-header{transition:none;}
}

.card-card,
.card-body,
.card-content,
.card-text,
.card-footer,
.card-audio,
.mv-audio-headline{
  overflow-wrap:anywhere;
  word-break:break-word;
}