/* =========================================================
   STYLE.CSS – skinnylegsnina.com
   Clean, Responsive, SEO- & Lighthouse-Optimiert
   Stand: 16.10.2025
========================================================= */

/* =========================
   Root / Base
========================= */
:root {
  --maxw: 980px;
  --radius: 16px;
  --gap: 14px;
  --color-bg-light: #fafafa;
  --color-bg-dark:  #0f1214;
  --color-turq:     #08fff3;
  --color-gold:     #e5c29f;
}
@media (max-width: 640px){ :root { --gap: 10px; } }

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  background: var(--color-bg-light);
}
@media (prefers-color-scheme: dark){
  body { color:#eee; background: var(--color-bg-dark); }
}

/* =========================
   Header (optional)
========================= */
.site {
  display:flex; align-items:center; justify-content:space-between;
  gap: 8px; padding: 12px 16px; position: sticky; top: 0;
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  border-bottom: 1px solid #eee; z-index: 10;
}
@media (prefers-color-scheme: dark){
  .site{ background: rgba(18,22,25,.8); border-color:#222; }
}
.logo { text-decoration:none; color:inherit; font-weight:700; letter-spacing:.4px; }

.nav { display:flex; gap:10px; }
.nav a { text-decoration:none; color:inherit; padding:6px 10px; border-radius:10px; }
.nav a[aria-current="page"] { background:#efefef; }
@media (prefers-color-scheme: dark){ .nav a[aria-current="page"]{ background:#1e2428; } }

.menu-btn { display:none; border:0; background:transparent; font-size:22px; }
@media (max-width: 720px){
  .menu-btn{ display:block; }
  .nav{ display:none; position:absolute; right:10px; top:52px; flex-direction:column;
        padding:10px; background:#fff; border:1px solid #e9e9e9; border-radius:12px; }
  .nav.open{ display:flex; }
  @media (prefers-color-scheme: dark){
    .nav{ background:#12171b; border-color:#222; }
  }
}

/* =========================
   Layout / Cards / Typo
========================= */
.container { max-width: var(--maxw); margin: 20px auto; padding: 0 16px; }

.card {
  background:#fff;
  border:1px solid #eee;
  border-radius: var(--radius);
  padding:18px;
}
@media (prefers-color-scheme: dark){
  .card{ background:#151a1e; border-color:#1e2327; }
}

.links {
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip {
  display:inline-block;
  padding:8px 12px;
  border:1px solid #ddd;
  border-radius:999px;
  text-decoration:none;
  color:inherit;
  transition: all 0.3s ease;
}

/* =========================
   HERO – Titel oben, darunter Bild, darunter Text (zentriert)
========================= */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "media"
    "text";
  gap: 1.8rem;
  justify-items: center;
  text-align: center;
}

/* Titel */
.hero-title {
  grid-area: title;
  margin: 0;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #b58b2e, #f5d76e, #fff1b0, #d4af37, #b58b2e);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldGlow 6s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.25);
}

/* Bildbereich */
.hero-media {
  grid-area: media;
  width: 100%;
  max-width: 800px;
}

.hero-media .hero-carousel.card-in {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid #eee;
  background: #111;
}

.hero-media .hero-carousel.card-in::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

.hero-carousel picture {
  display: block;
}

.hero-carousel .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.65s ease;
}

.hero-carousel .slide.current {
  opacity: 1;
}

/* Textbereich */
.hero-text {
  grid-area: text;
  width: 100%;
  max-width: 780px;
  text-align: left;
  margin: 0 auto;
}

/* Glanzanimation Titel */
@keyframes goldGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   HERO-CAROUSEL Position / Ratio
========================= */
.hero-media .hero-carousel.card-in{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid #eee;
  background:#111;
}
@media (prefers-color-scheme: dark){
  .hero-media .hero-carousel.card-in{ border-color:#1e2327; }
}

/* Ratio-Box (16:9; auf sehr schmalen Screens höher, wenn gewünscht) */
.hero-media .hero-carousel.card-in::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 */
}

/* <picture> sauber darstellen */
.hero-carousel picture{ display:block; }

/* Slides: übereinander, weich blenden – KEIN display:none */
.hero-carousel .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity .65s ease;
}
.hero-carousel .slide.current{ opacity:1; }

/* =========================
   Typografie / Farben
========================= */
.gold {
  color: var(--color-gold);
  text-shadow: 0 0 4px rgba(229, 194, 159, 0.25);
}
.turq {
  color: var(--color-turq);
  text-shadow: 0 0 6px rgba(8,255,243,0.3);
  text-decoration:none;
}
.turq:hover {
  color:#a5fff9;
  text-shadow: 0 0 8px rgba(8,255,243,0.6);
}
.pink {
  color:#c88bff;
  text-shadow:0 0 8px rgba(200,139,255,0.5);
}

/* Textabschnitte */
.lead {
  font-size:1.02rem;
  line-height:1.7;
  margin:8px 0 12px;
  color:#e0e0e0;
}
.bio-points {
  list-style:none;
  margin:10px 0 12px;
  padding:0;
}
.bio-points li {
  position:relative;
  padding-left:18px;
  margin:6px 0;
  color:#ccc;
  font-size:0.95rem;
}
.bio-points li::before {
  content:"";
  position:absolute;
  left:0;
  top:0.65em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-turq);
  box-shadow:0 0 8px rgba(8,255,243,0.8);
}
/* Zentrierter Hinweis (lila Text unten) */
.note {
  font-size: 0.9rem;
  color: #aaa;
  margin-top: 16px;
  text-align: center; /* <— Das ist neu */
}

.note .pink {
  color: #c88bff;
  text-shadow: 0 0 8px rgba(200, 139, 255, 0.5);
  font-weight: 600;
}

/* =========================
   Buttons & Links
========================= */
.links-card .links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:0;
  padding:0;
  list-style:none;
}
.links-card .chip{ padding:10px 14px; }

/* Social Buttons */
.links.social{
  justify-content:center;
  background: rgba(8,255,243,0.06);
  border: 1px solid rgba(8,255,243,0.25);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
}
.links.social .chip {
  border: 1px solid var(--color-turq);
  color: var(--color-turq);
}
.links.social .chip:hover {
  background: var(--color-turq);
  color:#000;
  box-shadow:0 0 12px var(--color-turq);
  transform:translateY(-2px);
}
.links.social .chip:active {
  transform:translateY(0);
  box-shadow:0 0 6px var(--color-turq);
}

/* 18+ Buttons */
.links.adult{
  justify-content:center;
  background: rgba(255,59,59,0.06);
  border: 1px solid rgba(255,59,59,0.25);
  border-radius: 14px;
  padding: 12px;
  margin-top: 16px;
}
.links.adult .chip {
  border:1px solid #ff3b3b;
  color:#ff3b3b;
}
.links.adult .chip:hover {
  background:#ff3b3b;
  color:#000;
  box-shadow:0 0 12px #ff3b3b;
  transform:translateY(-2px);
  animation:redPulse 1.4s ease-in-out infinite;
}
.links.adult .chip:active {
  transform:translateY(0);
  box-shadow:0 0 6px #ff3b3b;
}
@keyframes redPulse {
  0%,100%{ box-shadow:0 0 8px #ff3b3b; }
  50%{    box-shadow:0 0 16px #ff3b3b; }
}

/* Section Titles */
.section-title {
  color: var(--color-turq);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:0.5px;
  text-align:center;
  margin-bottom:10px;
  text-shadow:0 0 6px rgba(0,255,243,0.3);
}
.section-title.adult { color:#ff4c4c; }

/* Hinweistext im Adult-Block */
.adult-note {
  text-align:center;
  margin-top:12px;
  color:#ffb3b3;
  font-size:0.95rem;
}

/* =========================
   Galerie (falls fotos.html)
========================= */
.grid {
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
}
.thumb {
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #eee;
  background:#fff;
}
.thumb img {
  width:100%;
  height:180px;
  object-fit:cover;
  transition: transform .2s ease;
  display:block;
}
.thumb:hover img { transform:scale(1.03); }
@media (min-width:1100px){ .thumb img{ height:220px; } }

/* =========================
   Footer
========================= */
.footer {
  max-width:var(--maxw);
  margin:28px auto 40px;
  padding:0 16px;
  color:#666;
  text-align:center;
}
.footer a { color:inherit; }
@media (prefers-color-scheme: dark){ .footer{ color:#9aa; } }

/* =========================
   Minimalseiten (Impressum)
========================= */
body.minimal { margin:0; background:var(--color-bg-light); }
@media (prefers-color-scheme: dark){ body.minimal{ background:var(--color-bg-dark); } }
body.minimal .site, body.minimal header, body.minimal nav, body.minimal .menu-btn {
  display:none !important;
}

/* =========================
   Responsive Fine-Tuning
========================= */
@media (max-width:600px){
  .lead{ font-size:0.95rem; }
  .bio-points li{ font-size:0.85rem; }
  .section-title{ font-size:1.2rem; }
}