/* =========================
   Colors
========================= */
.csubhgold { color:#D4AF37; }
.csubhwhite { color:#fff; }
.csubhwhitegrey { color:#3C5093; }
.csubhgrey { color:#686868; }
.csubhlightgrey { color:lightgrey; }
.csubhorange { color:#FF8300; }
.csubhgreen { color:#39FF14; }
.csubhred { color:red; }

/* =========================
   Fonts
========================= */
@font-face { font-family: lovelo-black; src: url("/fonts/Lovelo-black.woff"); }
@font-face { font-family: cc;           src: url("/fonts/cc.ttf"); }
@font-face { font-family: esba;         src: url("/fonts/esba.ttf"); }
@font-face { font-family: pervitina;    src: url("/fonts/pervitina.ttf"); }
@font-face { font-family: goodtime;     src: url("/fonts/goodtime.ttf"); }
@font-face { font-family: arial-black;  src: url("/fonts/Arial Black.ttf"); }
@font-face { font-family: cadogan;      src: url("/fonts/cadogan.otf"); }
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&display=swap');

/* =========================
   Base / Global
========================= */
* { box-sizing: border-box; }
html { scroll-behavior:smooth; width:100%; overflow-x:hidden; }
body {
  position:fixed; top:0; left:0; width:100%; height:100%;
  overflow:hidden; background:#000; color:#e5c07b;
  font-family:'Josefin Sans', system-ui, Arial, sans-serif;
}
[id]{ scroll-margin-top:60px; }
a{ color:#e5c07b; text-decoration:none; }
a:hover,a:active{ color:silver!important; }

/* Fade-in Utility */
.fade-in{ opacity:0; transition:opacity 1s ease-in; }
img{ opacity:0; transition:opacity .5s ease-in-out; display:block; width:100%; height:auto; max-width:1000px; margin:auto; }
img.fade-in{ opacity:1; }
img.lazy{ opacity:0; transition:opacity .8s ease-in; }
img.lazy.fade-in{ opacity:1; }
video{ max-width:100%; }

/* =========================
   Top Background / Branding
========================= */
.content-all{
  position:fixed; inset:0; overflow:hidden;
  background:url("../pics/logo/initals_.png") center/cover no-repeat;
}

/* Top Nav + Logo (sauber rechts, kein Überstand) */
.top-nav{
  position:fixed; top:20px; right:8px; margin:0!important;
  overflow:hidden; border-radius:50px; background:#000; z-index:3000;
}
.logo{
  position:relative; width:80px; height:80px;
  background:url("../pics/logo/initals_black.png") center/cover no-repeat;
  border-radius:50px;
}
@media (max-width:480px){ .logo{ width:68px; height:68px; } }

/* =========================
   Hamburger Icon
========================= */
.icon{
  position:fixed; top:8px; left:8px; z-index:3000;
  width:40px; height:40px; cursor:pointer;
}
.bar1,.bar2,.bar3{ width:35px; height:5px; background:#e5c07b; margin:6px 0; transition:.25s; }
.change .bar1{ transform:translate(0,11px) rotate(-45deg); }
.change .bar2{ opacity:0; }
.change .bar3{ transform:translate(0,-11px) rotate(45deg); }

/* =========================
   Side Menu (mehr Platz rechts im geöffneten Zustand)
========================= */
.side-menue-all{ position:fixed; z-index:2000; }

.side-menue{
  box-sizing:border-box;
  position:fixed; top:0; left:0; bottom:0;
  width:380px;                               /* breiter */
  padding:60px 36px 24px 50px;               /* mehr Platz nach rechts */
  background:#000; z-index:2001;
  transform:translateX(-100%);               /* komplett außerhalb */
  transition:transform .25s ease; will-change:transform; contain:paint;
}
.side-menue.visible{ transform:translateX(0); }

.wrapper-inner-side-menue{
  position:absolute; top:60px; left:0; right:0; bottom:0;
  overflow:auto; padding-left:45px; padding-right:16px;
  background:transparent;
}

.side-menue div{
  display:block; text-align:left; width:100%; max-width:320px;
  margin:0; font-family:'Josefin Sans', system-ui, Arial, sans-serif;
}
.tabs,.tab{ color:#e5c07b; }
.tab{ font-size:20px!important; text-shadow:.5px .5px .5px #000; margin:0; cursor:pointer; background:transparent; }
.tab:hover,.toppicks-header:hover{ color:#fff; }
.tabs{ font-size:10px; text-align:center; }
.tabs-photos,.tabs-mod{ padding-left:25px; background:transparent; }
.tabs-photos-header,.tabs-photos-muc,.tabs-ma{ color:#e5c07b; padding-left:50px; }
.tabs-ma{ padding:0; cursor:pointer; }

/* Dropdown */
.dropdown div{ display:none; flex-direction:column; width:200px; background:#e5c07b; color:#000; }
.dropdown.visible,.dropdown.open{ display:block; }
.dropdown.open .tabs-ma-inner{ display:block; }

/* =========================
   Content Wrapper
========================= */
.wrapper-content{
  position:absolute; top:50px; left:0; right:0; bottom:0;
  width:100%; height:auto; overflow:auto; -webkit-overflow-scrolling:touch;
  background:transparent; margin:0; overflow-x:hidden; max-width:100vw;
}

/* Sicherheitsnetz */
.frame,.gallery-item{ max-width:min(1000px, 100vw); }

/* =========================
   Gallery / Frames
========================= */
.gallery{ display:flex; flex-direction:column; gap:10px; padding:1rem 0; }
.gallery-item{ text-align:center; max-width:1000px; margin:0 auto; }

.caption{ width:100%; margin-top:5px; font-size:1px; overflow-wrap:anywhere; }
.caption a{ color:#e5c07b; }
.caption a:hover{ color:#fff; }

.news{ height:auto; width:auto; margin:auto; background:transparent; }
.news p{ color:blue; }

/* Frame */
.frame{
  position:relative; display:block; width:100%; max-width:1000px;
  margin:auto; padding:0; box-sizing:border-box; background:#000;
  border:0 solid #000; border-radius:0; box-shadow:0 0 10px rgba(71,71,71,0);
}
.topframe div{ color:#000!important; font-weight:bold; background:#e5c07b!important; }

/* Frame Inhalte */
.frame div{
  font-size:18px; line-height:1.4; padding:0; margin-bottom:0;
  font-family:'Josefin Sans', system-ui, Arial, sans-serif; text-align:center; color:#e5c07b;
}

/* Responsive Frame */
@media (max-width:1700px){
  .frame{ width:100%; max-width:100%; padding:0; }
  .frame div{ font-size:20px; }
}

/* =========================
   Video (stabil, kein Layout-Shift)
========================= */
.gallery-item.frame{ display:block; width:100%; height:auto; border-radius:inherit; }
.video-wrapper{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; }
.thumb-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }

/* Play Button */
.video-center-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1);
  width:78px; height:78px; border:0; border-radius:50%;
  background:rgba(255,255,255,.25); backdrop-filter:blur(6px);
  box-shadow:0 0 12px rgba(0,0,0,.3); display:none; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
  animation:btn-breathe 2s ease-in-out infinite;
}
.video-center-play::before{
  content:""; display:block; width:0; height:0; margin-left:5px;
  border-style:solid; border-width:14px 0 14px 24px; border-color:transparent transparent transparent #fff;
}
.video-center-play::after{
  content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,.35);
  opacity:0; transform:scale(.8); animation:btn-ring 2s ease-out infinite;
}
.video-center-play:hover{ background:rgba(255,255,255,.45); transform:translate(-50%,-50%) scale(1.08); box-shadow:0 6px 24px rgba(0,0,0,.35); }
.video-center-play:active{ transform:translate(-50%,-50%) scale(.96); }

@keyframes btn-breathe{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.06);} }
@keyframes btn-ring{ 0%{ opacity:0; transform:scale(.85);} 30%{ opacity:.4;} 100%{ opacity:0; transform:scale(1.25);} }
@media (prefers-reduced-motion:reduce){ .video-center-play, .video-center-play::after{ animation:none; } }

/* =========================
   Aspect-Ratio Wrapper für Bilder (kein Stretching)
========================= */
.ar-box{ position:relative; width:100%; aspect-ratio:var(--ar, 16/9); background:transparent; }
.ar-box > img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; }
.ar-box.cover > img{ object-fit:cover; }

/* =========================
   About Section Typo (responsive)
========================= */
.frame-about{ margin-bottom:250px; }
.frame-about div{
  font-size:18px; line-height:1.5; margin:0; padding:0;
  font-family:'Josefin Sans', system-ui, Arial, sans-serif;
  text-align:left; text-shadow:none; color:#e5c07b; background:#000;
}
.frame-about div a{ color:#e5c07b; text-shadow:none; }

#about .frame-about .caption{
  max-width:760px; margin:0 auto; padding:12px 16px;
  font-size:clamp(14px, 1.8vw, 18px); line-height:1.6;
}
#about .frame-about .caption b{
  display:inline-block; margin-bottom:.35em;
  font-size:clamp(16px, 2.2vw, 22px); line-height:1.3;
}
#about .frame-about .caption p{ margin:.45em 0; font-size:inherit; line-height:inherit; }
#about .frame-about .caption i,
#about .frame-about .caption a{ font-size:inherit; line-height:inherit; }
@media (max-width:600px){
  #about .frame-about .caption{ font-size:clamp(13px, 3.6vw, 16px); padding:14px 18px; }
  #about .frame-about .caption b{ font-size:clamp(15px, 4vw, 20px); }
}
/* Verhindert, dass globale .frame div-Größe About „hochzieht“ */
#about .frame-about div{ font-size:inherit; }

/* =========================
   Social Icons
========================= */
/* === Social-Buttons nebeneinander im Side-Menü (unter ABOUT) === */
.side-menue .social-inline{
  display:flex;
  align-items: center;
  gap:12px;
  margin:12px 0 0 150px;           /* bündig zu Text */
}

/* Button-Style */
.side-menue .social-inline .si{
  width:42px; height:42px;
  border-radius:50%;
  display:inline-block;
  background-color:#e5c07b;       /* Gold */
  border: 1px solid black;
  background-position:center;
  background-repeat:no-repeat;
  background-size: 80%;            /* perfekt skaliert */
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:transform .15s ease, box-shadow .2s ease, background-color .15s ease;
}

/* Hover */
.side-menue .social-inline .si:hover{
  background-color:silver;
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}

/* Icons (SVG-Dateien) */
.side-menue .social-inline .si-fb{ background-image:url("../pics/social/fb.svg"); }
.side-menue .social-inline .si-ig{ background-image:url("../pics/social/insta.svg"); }

/* Mobile etwas kleiner */
@media (max-width:480px){
  .side-menue .social-inline{ gap:10px; margin-left:50px; }
  .side-menue .social-inline .si{
    width:38px; height:38px;
    background-size:80%;
  }
}

/* =========================
   Mobile Tweaks / Overflow Guards
========================= */
html, body{ overflow-x:hidden; }
.wrapper-content{ overflow-x:hidden; max-width:100vw; }

@media (max-width:600px){
  .top-nav{ right:8px; margin:0!important; }
  .social-nav-main{ margin:10px 0 0 0!important; }
  .content-all, .logo{ max-width:100vw; }
  .wrapper-inner-side-menue{ padding-right:16px; }
}

/* =========================
   Portrait-Bilder automatisch einpassen
========================= */

/* globale Regel für Bilder, die höher als breit sind */
img,
.ar-box > img {
  object-fit: cover;      /* stellt sicher, dass nichts abgeschnitten wird */
  max-height: 100vh;        /* niemals höher als der Bildschirm */
}

/* optional nur auf kleinen Screens aktivieren */
@media (max-width: 900px) {
  .ar-box > img,
  img {
    object-fit: contain;    /* ganze Höhe sichtbar */
    max-height: 100vh;
  }
}