/*
Theme Name: Gastroporn v5
Theme URI: https://example.com
Author: You
Version: 1.0.2
Text Domain: gastroporn
*/

:root{
  --bg:#0a0b0f;
  --bg2:#10121a;
  --fg:#f5f6f7;
  --muted:#a4a9b6;
  --accent:#ff2b4d;
  --line:#232634;
  --card:#121521;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  background:linear-gradient(180deg,#07080c 0%,#0b0d12 40%,#0a0b0f 100%);
  color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,sans-serif;
}

a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

a:hover{
  border-color:var(--accent);
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:24px;
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,11,15,.4);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:visible;
}

.navbar{
  min-height:76px;
  max-width:1200px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.custom-logo-link,
.brand a{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.custom-logo,
.custom-logo-link img,
.brand img{
  height:72px;
  width:auto;
  max-height:none;
  display:block;
}

.brand-title{
  display:none !important;
}

.navlinks{
  position:relative;
}

.navlinks .menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
  align-items:center;
}

.navlinks .menu > li{
  margin:0;
}

.navlinks .menu a{
  color:#d6d8de;
  text-decoration:none;
  font-size:15px;
  line-height:1;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:all .2s ease;
}

.navlinks .menu a:hover{
  color:#fff;
  border-color:var(--accent);
}

.gp-burger{
  display:none;
}

.gp-nav-overlay{
  display:none;
}

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative;
  padding:56px 0 40px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  text-align:center;
}

.hero .backlight{
  position:absolute;
  inset:-10% -10% auto -10%;
  height:60%;
  background:radial-gradient(60% 60% at 40% 30%, rgba(255,43,77,.25), transparent 70%);
  opacity:.6;
  filter:blur(40px);
  pointer-events:none;
}

.hero .content{
  position:relative;
  z-index:1;
  text-align:center;
  padding:20px 16px;
}

.hero .kicker{
  display:none !important;
}

.hero .logo{
  display:block;
}

.hero .logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:560px;
  max-height:none;
  margin:0 auto 28px auto;
  filter:drop-shadow(0 10px 40px rgba(255,43,77,.15));
}

.hero h1{
  max-width:760px;
  margin:10px auto;
  font-size:clamp(40px,4.8vw,60px);
  line-height:1.05;
  letter-spacing:-0.8px;
}

.hero p.sub,
.hero p{
  max-width:560px;
  margin:0 auto 18px;
  font-size:18px;
  line-height:1.45;
  opacity:.92;
}

.hero .cta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px;
}

.hero .cta .button{
  display:inline-block;
  min-width:210px;
  padding:12px 20px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  transition:all .2s ease;
  box-sizing:border-box;
  background:var(--accent);
  color:#fff;
  border:none;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(255,43,77,.25);
}

.hero .cta .button:nth-child(1){
  background:var(--accent);
  color:#fff;
}

.hero .cta .button:nth-child(1):hover{
  filter:brightness(1.1);
}

.hero .cta .button:nth-child(2){
  background:var(--bg2);
  border:1px solid var(--accent);
  color:var(--accent);
  box-shadow:none;
}

.hero .cta .button:nth-child(2):hover{
  background:var(--accent);
  color:#fff;
}

/* =====================================================
   CONTENT SECTIONS
   ===================================================== */
.section{
  padding:28px 0;
}

.story-title{
  font-weight:800;
  font-size:20px;
  margin:8px 0 16px;
}

/* =====================================================
   GRID / CARDS
   ===================================================== */
.gp-grid,
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  align-items:start;
}

.gp-card,
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  color:var(--fg);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gp-card:hover,
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
  border-color:rgba(255,43,77,.35);
}

.gp-thumb{
  display:block;
  overflow:hidden;
}

.gp-thumb img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.card .body{
  padding:14px 16px 16px;
}

.gp-title,
.story-title{
  font-size:19px;
  font-weight:800;
  line-height:1.2;
}

.gp-title{
  margin:14px 16px 6px;
}

.gp-title a{
  color:#fff;
  text-decoration:none;
}

.gp-meta,
.meta{
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}

.gp-meta{
  margin:0 16px 10px;
}

.gp-card p,
.gp-card .excerpt,
.gp-card .gp-excerpt{
  margin:0 16px 16px;
  font-size:14px;
  line-height:1.45;
  color:#d8dbe2;
}

/* =====================================================
   FILTER / PAGINATION
   ===================================================== */
.gp-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 18px;
}

.gp-chip{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg2);
  color:#fff;
  transition:all .15s ease;
}

.gp-chip:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
}

.gp-chip.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}

.gp-pagination{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:20px 0;
}

.gp-page{
  min-width:40px;
  text-align:center;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  color:#fff;
  background:var(--bg2);
  transition:all .18s ease;
}

.gp-page:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
}

.gp-page.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}

/* =====================================================
   BADGES / SHARE
   ===================================================== */
.gp-badge{
  display:inline-block;
  font-size:11px;
  line-height:1;
  padding:3px 6px;
  border-radius:8px;
  margin-right:6px;
  vertical-align:middle;
}

.gp-badge-hot{
  background:var(--accent);
  color:#fff;
}

.gp-badge-trending{
  background:#ffb3bf;
  color:#43000a;
}

.gp-share{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.gp-share-label{
  opacity:.8;
  color:var(--muted);
}

.gp-share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg2);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:all .18s ease;
}

.gp-share-btn:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
}

/* =====================================================
   TABS
   ===================================================== */
.tabs{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.tab{
  padding:10px 14px;
  border:1px solid var(--line);
  background:var(--bg2);
  border-radius:12px;
  cursor:pointer;
}

.tab.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}

.tab-panel{
  display:none;
}

.tab-panel.active{
  display:block;
}

/* =====================================================
   SLIDER
   ===================================================== */
.slider,
.gp-slider{
  max-width:100%;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);
  background:#10131d;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}

.slider-track,
.gp-slider-track{
  display:flex;
  transition:transform .5s ease;
}

.slide,
.gp-slide{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
  padding:22px;
  min-height:260px;
  min-width:100%;
  box-sizing:border-box;
}

.slide .thumb,
.gp-slide .gp-thumb{
  flex:0 0 34%;
  max-width:34%;
}

.slide .thumb img,
.gp-slide .gp-thumb img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:14px;
  display:block;
}

.slide .info,
.gp-slide .gp-info{
  flex:1 1 auto;
}

.slide .info .title,
.gp-slide .gp-title{
  font-size:28px;
  line-height:1.1;
  margin:10px 0;
}

.slide .info .meta,
.gp-slide .gp-meta{
  font-size:13px;
  color:var(--muted);
}

.slide .excerpt,
.gp-slide .excerpt{
  font-size:16px;
  line-height:1.5;
  max-width:60ch;
}

.slider-nav,
.gp-slider-nav{
  position:absolute;
  right:12px;
  bottom:12px;
  display:flex;
  gap:8px;
}

.slider-nav button,
.gp-slider-nav button{
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(15,17,25,.8);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition:all .18s ease;
}

.slider-nav button:hover,
.gp-slider-nav button:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{
  border-top:1px solid var(--line);
  padding:24px 0;
  color:#bdbdc2;
}

/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width:768px){

  .container{
    padding:16px;
  }

  .navbar{
    min-height:64px;
    max-width:100%;
    width:100%;
    margin:0;
    padding:12px 16px;
    gap:12px;
  }

  .brand{
    gap:10px;
    flex:1 1 auto;
    min-width:0;
  }

  .custom-logo,
  .custom-logo-link img,
  .brand img{
    height:48px;
    width:auto;
    max-height:none;
  }

  .brand-title{
    display:none !important;
  }

  .hero{
    padding:28px 0 22px;
  }

  .hero .content{
    padding:12px 16px;
  }

  .hero .logo img{
    max-width:280px;
    width:86%;
    margin:0 auto 18px auto;
  }

  .hero h1{
    font-size:30px;
    max-width:320px;
  }

  .hero p.sub,
  .hero p{
    font-size:14px;
    max-width:300px;
  }

  .hero .cta{
    flex-direction:column;
    gap:10px;
  }

  .hero .cta .button{
    width:100%;
    max-width:300px;
    min-width:0;
  }

  .gp-grid,
  .grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .gp-thumb img{
    height:180px;
  }

  .gp-share-btn{
    flex:1 1 calc(50% - 8px);
    text-align:center;
  }

  /* Burger */
  .gp-burger{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--bg2);
    cursor:pointer;
    flex-shrink:0;
    position:relative;
    z-index:1002;
  }

  .gp-burger span{
    display:block;
    width:18px;
    height:2px;
    background:#fff;
    margin:0 auto;
    transition:all .25s ease;
  }

  .gp-nav-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:1000;
  }

  body.gp-nav-open .gp-nav-overlay{
    opacity:1;
    pointer-events:auto;
  }

  .navlinks{
    position:absolute !important;
    top:calc(100% + 8px);
    left:16px !important;
    right:16px !important;
    width:auto !important;
    margin:0 !important;
    z-index:1001;
  }

  .navlinks .menu{
    display:none !important;
    width:100% !important;
    box-sizing:border-box !important;
    flex-direction:column;
    gap:10px;
    margin:0 !important;
    padding:14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--bg2);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:all .25s ease;
  }

  body.gp-nav-open .navlinks .menu{
    display:flex !important;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .navlinks .menu li,
  .navlinks .menu a{
    width:100%;
    box-sizing:border-box;
  }

  .navlinks .menu a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:var(--card);
  }

  .navlinks .menu a:hover,
  .navlinks .menu a:active{
    border-color:var(--accent);
  }

  body.gp-nav-open .gp-burger span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  body.gp-nav-open .gp-burger span:nth-child(2){
    opacity:0;
  }

  body.gp-nav-open .gp-burger span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .slide,
  .gp-slide{
    flex-direction:column;
    gap:14px;
    padding:14px;
    min-height:0;
  }

  .slide .thumb,
  .gp-slide .gp-thumb{
    flex:0 0 auto;
    max-width:100%;
  }

  .slide .thumb img,
  .gp-slide .gp-thumb img{
    height:180px;
    min-height:180px;
  }

  .slide .info .title,
  .gp-slide .gp-title{
    font-size:20px;
    line-height:1.18;
  }

  .slide .excerpt,
  .gp-slide .excerpt{
    font-size:14px;
    line-height:1.45;
  }

  .slider-nav,
  .gp-slider-nav{
    right:10px;
    bottom:10px;
  }

  .slider-nav button,
  .gp-slider-nav button{
    width:36px;
    height:36px;
  }
}
/* =====================================================
   HERO FEINSCHLIFF (Logo + Typografie)
   ===================================================== */

/* Logo optisch mittig ausrichten */
.hero .logo{
  display:flex;
  justify-content:center;
}

.hero .logo img{
  transform: translateX(18px);
}

/* Headline etwas mehr Luft + ruhiger */
.hero h1{
  margin: 20px auto 14px;
  max-width: 820px;
  letter-spacing: -0.6px;
  line-height: 1.08;
}

/* Subline sauber darunter positionieren */
.hero p.sub{
  margin-bottom: 26px;
  font-size: 18px;
  opacity: 0.85;
}

/* Buttons etwas mehr Abstand zur Subline */
.hero .cta{
  margin-top: 28px;
}

/* ==========================================
   MOBILE FEINSCHLIFF
   ========================================== */
@media (max-width:768px){
  .hero .logo img{
    transform: translateX(8px);
  }

  .hero h1{
    margin: 16px auto 10px;
    max-width: 320px;
  }

  .hero p.sub{
    margin-bottom: 20px;
    font-size: 14px;
  }

  .hero .cta{
    margin-top: 18px;
  }
}

/* =====================================================
   CARDS PREMIUM HOVER EFFECT
   ===================================================== */
.card,
.gp-card{
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover,
.gp-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  border-color: rgba(255,43,77,.45);
}

.card img,
.gp-card img{
  transition: transform .35s ease;
}

.card:hover img,
.gp-card:hover img{
  transform: scale(1.05);
}

.card .story-title a,
.gp-card .gp-title a{
  transition: color .2s ease;
}

.card:hover .story-title a,
.gp-card:hover .gp-title a{
  color: var(--accent);
}

.card:hover::after,
.gp-card:hover::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  box-shadow: 0 0 40px rgba(255,43,77,.15);
  pointer-events:none;
}

/* =====================================================
   HEADER PREMIUM UPGRADE
   ===================================================== */
.site-header{
  background: rgba(10,11,15,.58);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.navbar{
  transition: padding .2s ease;
}

.brand a{
  border-bottom: none !important;
}

.custom-logo,
.custom-logo-link img,
.brand img{
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
}

.navlinks .menu a{
  position: relative;
  padding: 8px 0;
  color: #d6d8de;
  transition: color .2s ease, transform .2s ease;
  border-bottom: none;
}

.navlinks .menu a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  opacity: .95;
}

.navlinks .menu a:hover{
  color: #fff;
  transform: translateY(-1px);
}

.navlinks .menu a:hover::after{
  transform: scaleX(1);
}

.navlinks .menu .current-menu-item > a,
.navlinks .menu .current_page_item > a,
.navlinks .menu .current-menu-ancestor > a{
  color: #fff;
}

.navlinks .menu .current-menu-item > a::after,
.navlinks .menu .current_page_item > a::after,
.navlinks .menu .current-menu-ancestor > a::after{
  transform: scaleX(1);
}

.gp-burger{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.gp-burger:hover{
  border-color: rgba(255,43,77,.45);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

@media (max-width:768px){
  .navlinks .menu{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(16,18,26,.96);
    border: 1px solid rgba(255,255,255,.08);
  }

  .navlinks .menu a{
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }

  .navlinks .menu a:hover,
  .navlinks .menu a:active{
    background: rgba(255,255,255,.03);
    transform: translateY(-1px);
  }
}

/* =====================================================
   BUTTONS PREMIUM MICRO-ANIMATION
   ===================================================== */
.button,
.hero .cta .button,
button,
input[type="submit"],
.wp-element-button{
  position: relative;
  overflow: hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
  will-change: transform;
}

.button:hover,
.hero .cta .button:hover,
button:hover,
input[type="submit"]:hover,
.wp-element-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.button:active,
.hero .cta .button:active,
button:active,
input[type="submit"]:active,
.wp-element-button:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.button:focus-visible,
.hero .cta .button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.wp-element-button:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 0 0 4px rgba(255,43,77,.35),
    0 12px 28px rgba(0,0,0,.2);
}

.button::before,
.hero .cta .button::before,
button::before,
input[type="submit"]::before,
.wp-element-button::before{
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  transition: left .45s ease;
  pointer-events: none;
}

.button:hover::before,
.hero .cta .button:hover::before,
button:hover::before,
input[type="submit"]:hover::before,
.wp-element-button:hover::before{
  left: 140%;
}

.hero .cta .button:nth-child(1),
.button:not(.button--ghost){
  box-shadow: 0 10px 26px rgba(255,43,77,.22);
}

.hero .cta .button:nth-child(2),
.button--ghost{
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width:768px){
  .button:hover,
  .hero .cta .button:hover,
  button:hover,
  input[type="submit"]:hover,
  .wp-element-button:hover{
    transform: translateY(-1px);
  }
}
/* =====================================================
   STORY DETAIL PAGE – EMOTIONAL UPGRADE
   ===================================================== */

.single-story-wrap{
  padding-top: 18px;
}

.single-story-article,
.single article{
  max-width: 860px;
  margin: 0 auto 40px;
  background: rgba(18,21,33,.78);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.single-story-article .post-thumbnail img,
.single article .post-thumbnail img,
.single-story-article img.wp-post-image,
.single article img.wp-post-image{
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
}

.single-story-article .entry-header,
.single-story-article .entry-content,
.single-story-article .entry-footer,
.single .entry-header,
.single .entry-content,
.single .entry-footer{
  padding-left: 34px;
  padding-right: 34px;
}

.single-story-article .entry-header,
.single .entry-header{
  padding-top: 30px;
  padding-bottom: 18px;
}

.single-story-article .entry-title,
.single .entry-title{
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.9px;
  margin: 0 0 14px;
  max-width: 14ch;
}

.single-story-article .entry-meta,
.single .entry-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.single-story-article .entry-content,
.single .entry-content{
  padding-top: 26px;
  padding-bottom: 18px;
}

.single-story-article .entry-content p,
.single .entry-content p{
  font-size: 18px;
  line-height: 1.82;
  color: #eef0f4;
  margin: 0 0 1.15em;
  max-width: 68ch;
}

.single-story-article .entry-content p:first-of-type,
.single .entry-content p:first-of-type{
  font-size: 20px;
  line-height: 1.75;
  color: #ffffff;
}

.single-story-article .entry-content h2,
.single-story-article .entry-content h3,
.single .entry-content h2,
.single .entry-content h3{
  margin-top: 1.8em;
  margin-bottom: .6em;
  line-height: 1.15;
}

.single-story-article .entry-content blockquote,
.single .entry-content blockquote{
  margin: 1.4em 0;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.03);
  border-radius: 0 14px 14px 0;
  color: #f3f4f7;
}

.single-story-article .entry-footer,
.single .entry-footer{
  padding-top: 18px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.single-story-article .gp-share,
.single .gp-share{
  margin-top: 18px;
  padding-top: 18px;
}

.single-story-article .gp-share-btn,
.single .gp-share-btn{
  min-height: 42px;
}

@media (max-width: 768px){
  .single-story-article,
  .single article{
    border-radius: 16px;
    margin: 0 16px 28px;
  }

  .single-story-article .entry-header,
  .single-story-article .entry-content,
  .single-story-article .entry-footer,
  .single .entry-header,
  .single .entry-content,
  .single .entry-footer{
    padding-left: 18px;
    padding-right: 18px;
  }

  .single-story-article .entry-header,
  .single .entry-header{
    padding-top: 20px;
    padding-bottom: 14px;
  }

  .single-story-article .entry-title,
  .single .entry-title{
    font-size: 30px;
    max-width: none;
    margin-bottom: 12px;
  }

  .single-story-article .entry-content,
  .single .entry-content{
    padding-top: 18px;
  }

  .single-story-article .entry-content p,
  .single .entry-content p{
    font-size: 16px;
    line-height: 1.72;
  }

  .single-story-article .entry-content p:first-of-type,
  .single .entry-content p:first-of-type{
    font-size: 17px;
  }
}
.footer-links{
  text-align:center;
  margin-top:10px;
  font-size:14px;
  opacity:.7;
}

.footer-links a{
  color:#aaa;
  text-decoration:none;
}

.footer-links a:hover{
  color:#fff;
}
/* =====================================================
   SUBMIT STORY FORM – STEP 2 UX UPGRADE
   ===================================================== */

.submit-intro{
  max-width: 760px;
  margin: 0 auto 18px;
  color: #d4d8e1;
  font-size: 17px;
  line-height: 1.65;
  text-align: center;
}

.gp-submit-story-wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(255,43,77,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%),
    rgba(18,21,33,.86);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 28px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gp-submit-rules{
  margin-bottom: 26px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
}

.gp-submit-rules strong{
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  color: #fff;
  letter-spacing: .2px;
}

.gp-submit-rules ul{
  margin: 0;
  padding-left: 18px;
  color: #d7dce5;
  line-height: 1.7;
}

.gp-submit-rules li + li{
  margin-top: 4px;
}

.gp-submit-message{
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
}

.gp-submit-success{
  background: rgba(80,180,120,.12);
  border: 1px solid rgba(80,180,120,.28);
  color: #dff5e6;
}

.gp-submit-error{
  background: rgba(255,80,80,.12);
  border: 1px solid rgba(255,80,80,.28);
  color: #ffd9d9;
}

.gp-submit-story-form{
  display: grid;
  gap: 18px;
}

.gp-submit-story-form p{
  margin: 0;
}

.gp-submit-story-form label{
  display: block;
  color: #f3f5f8;
  font-size: 14px;
  line-height: 1.45;
}

.gp-submit-story-form label strong{
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  letter-spacing: .2px;
  color: #f7f8fb;
  opacity: .96;
}

.gp-submit-story-form input[type="text"],
.gp-submit-story-form select,
.gp-submit-story-form textarea{
  width: 100%;
  display: block;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,11,15,.72);
  color: #fff;
  font: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 0 0 0 rgba(255,43,77,0);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.gp-submit-story-form input[type="text"]::placeholder,
.gp-submit-story-form textarea::placeholder{
  color: #8e95a3;
}

.gp-submit-story-form input[type="text"]:hover,
.gp-submit-story-form select:hover,
.gp-submit-story-form textarea:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(10,11,15,.82);
}

.gp-submit-story-form input[type="text"]:focus,
.gp-submit-story-form select:focus,
.gp-submit-story-form textarea:focus{
  outline: none;
  border-color: rgba(255,43,77,.58);
  box-shadow:
    0 0 0 4px rgba(255,43,77,.10),
    0 14px 30px rgba(0,0,0,.14);
  background: rgba(12,14,20,.96);
  transform: translateY(-1px);
}

.gp-submit-story-form textarea{
  min-height: 260px;
  resize: vertical;
  line-height: 1.7;
}

.gp-submit-story-form select{
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #bfc5d0 50%),
    linear-gradient(135deg, #bfc5d0 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.gp-submit-consent{
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.06);
}

.gp-submit-consent label{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  color: #d8dde6;
  line-height: 1.6;
}

.gp-submit-consent input[type="checkbox"]{
  margin: 4px 0 0;
  accent-color: var(--accent);
  transform: scale(1.05);
}

.gp-submit-note{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin-top: -4px;
}

.gp-submit-story-form .button{
  min-width: 240px;
  justify-self: start;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
}

@media (max-width: 768px){
  .submit-intro{
    margin: 0 auto 16px;
    font-size: 15px;
    text-align: left;
  }

  .gp-submit-story-wrap{
    margin: 0 16px;
    padding: 18px;
    border-radius: 18px;
  }

  .gp-submit-rules{
    padding: 16px;
    border-radius: 14px;
  }

  .gp-submit-story-form{
    gap: 16px;
  }

  .gp-submit-story-form input[type="text"],
  .gp-submit-story-form select,
  .gp-submit-story-form textarea{
    padding: 14px;
    border-radius: 14px;
  }

  .gp-submit-story-form textarea{
    min-height: 220px;
  }

  .gp-submit-story-form .button{
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}
.gp-monthly-top-wrap{
  max-width: 900px;
  margin: 0 auto;
}

.gp-monthly-top-label{
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
/* =====================================================
   STORY DES MONATS
   ===================================================== */

.gp-monthly-top-wrap{
  max-width: 980px;
  margin: 0 auto;
}

.gp-monthly-top-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,43,77,.10);
  border: 1px solid rgba(255,43,77,.22);
  color: #ffd6dc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.gp-monthly-top-wrap .card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,43,77,.18);
  box-shadow:
    0 24px 60px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,43,77,.06) inset;
}

.gp-monthly-top-wrap .card::before{
  content: "🔥 Story des Monats";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(10,11,15,.82);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gp-monthly-top-wrap .card img{
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.gp-monthly-top-wrap .card .body{
  padding: 20px 22px 22px;
}

.gp-monthly-top-wrap .card .story-title{
  font-size: 28px;
  line-height: 1.08;
  margin: 8px 0 12px;
}

.gp-monthly-top-wrap .card .story-title a{
  color: #fff;
}

.gp-monthly-top-wrap .card .meta{
  font-size: 14px;
  color: #c2c8d3;
}

.gp-monthly-top-wrap .card .body > div:last-child{
  color: #dce0e8;
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 768px){
  .gp-monthly-top-wrap .card img{
    height: 220px;
  }

  .gp-monthly-top-wrap .card::before{
    top: 12px;
    left: 12px;
    font-size: 11px;
    padding: 7px 10px;
  }

  .gp-monthly-top-wrap .card .body{
    padding: 16px 16px 18px;
  }

  .gp-monthly-top-wrap .card .story-title{
    font-size: 22px;
  }

  .gp-monthly-top-wrap .card .body > div:last-child{
    font-size: 15px;
    line-height: 1.55;
  }
}
.gp-monthly-home-head{
  max-width: 900px;
  margin: 0 auto 18px;
}

.gp-monthly-home-head .story-title{
  margin-bottom: 8px;
}

.gp-monthly-home-head .submit-intro{
  margin: 0;
  text-align: left;
}
.gp-instagram-share{
  border-color:#e1306c;
}

.gp-instagram-share:hover{
  background:#e1306c;
  color:#fff;
}
/* =====================================================
   STORY UX UPGRADE
   ===================================================== */

.single-story-article .entry-meta{
  gap: 8px 12px;
}

.single-story-article .gp-share{
  gap: 12px;
  align-items: center;
}

.single-story-article .gp-share-label{
  font-size: 14px;
  font-weight: 700;
  color: #c7ccd6;
}

.single-story-article .gp-share-btn{
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(16,18,26,.78);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.single-story-article .gp-share-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,43,77,.42);
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
}

.gp-instagram-share{
  border-color: rgba(225,48,108,.45);
}

.gp-instagram-share:hover{
  background: rgba(225,48,108,.12);
  border-color: rgba(225,48,108,.75);
}

.gp-toast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(10px);
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(10,11,15,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 9999;
  font-size: 14px;
  line-height: 1.4;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gp-toast.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px){
  .single-story-article .gp-share{
    gap: 10px;
  }

  .single-story-article .gp-share-btn{
    min-height: 42px;
  }

  .gp-toast{
    width: calc(100% - 32px);
    max-width: 420px;
    text-align: center;
    bottom: 18px;
  }
}
.gp-like-static{
  display:inline-flex;
  align-items:center;
  gap:6px;
  vertical-align:middle;
}

.gp-like-static-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:6px;
  background:#fff;
  color:#222;
  font-size:14px;
  line-height:1;
  font-weight:700;
}

.gp-like-static-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  padding:0 8px;
  border-radius:6px;
  background:#fff;
  color:#222;
  font-size:14px;
  line-height:1;
  font-weight:600;
}