/*
Theme Name: ToddyBlack Underworld V3
Theme URI: https://toddyblack.party/
Author: ToddyBlack
Description: ToddyBlack Underworld V3 - clean responsive Gothic theme without the old navigation.
Version: 3.0.0
*/
:root{--r:#ef153f;--r2:#820019;--ice:#a5ddff;--bg:#020203;--panel:#08080a;--line:#45101b;--muted:#a39ba1}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020203;color:#eee;font-family:Georgia,"Times New Roman",serif;background-image:radial-gradient(circle at 10% 20%,#35000d44,transparent 30%),radial-gradient(circle at 90% 25%,#00243a44,transparent 30%)}a{color:inherit;text-decoration:none}.wrap{width:min(1470px,96%);margin:auto}
.sitehead{position:sticky;top:0;z-index:50;background:#030304f5;border-bottom:1px solid #781128;box-shadow:0 4px 28px #000,0 0 20px #e5003022}.head{height:76px;display:flex;align-items:center;gap:30px}.logo{color:#f11a42;font-weight:900;font-size:31px;letter-spacing:.03em;text-shadow:0 0 14px #e6003255}.logo small{display:block;font-size:9px;color:#b3a4a8;letter-spacing:.24em;text-align:center}.nav{margin-left:auto;display:flex;gap:28px;align-items:center}.nav a{font-size:12px;text-transform:uppercase}.nav a:hover,.nav a:first-child{color:#f11a42;text-shadow:0 0 9px #f11a42}
.hero{height:min(52vw,800px);min-height:440px;background:url('assets/images/toddyblack-underworld-v3-hero.jpg?v=300') center top/cover no-repeat;border-bottom:2px solid #9e1230;position:relative}.hero:after{content:"";position:absolute;inset:0;box-shadow:inset 0 -55px 55px #020203}
.frame{border:1px solid #49101d;background:linear-gradient(145deg,#0c0c0e,#050506);box-shadow:inset 0 0 0 1px #16070b,0 12px 30px #000a}.services-title{text-align:center;margin:-2px 0 8px;color:#f02a4c;font-size:27px;text-transform:uppercase}.services-sub{text-align:center;color:#b9a4aa;letter-spacing:.12em;margin:0 0 12px}.services{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 25px 18px}.service{height:165px;position:relative;overflow:hidden;border:1px solid #642037;background:#08080a}.service img{width:100%;height:100%;object-fit:cover;opacity:.58;transition:.3s}.service:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0002,#030304dd)}.service-content{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:13px;text-align:center}.service h3{margin:0;color:#ff254d;font-size:22px;text-transform:uppercase}.service p{font-size:11px;letter-spacing:.05em;color:#ddd;margin:4px 0 9px}.service .go{border:1px solid #db153d;background:#520013cc;min-width:180px;padding:7px;font-size:10px;text-transform:uppercase;box-shadow:0 0 12px #e6003233}.service:hover img{transform:scale(1.05);opacity:.75}.service:hover{box-shadow:0 0 20px #e6003240}
.lower{display:grid;grid-template-columns:420px 1fr;gap:18px;padding:0 25px 15px}.news{padding:12px 16px}.news-title{color:#ef254a;text-transform:uppercase;font-size:20px;margin:0 0 7px}.newsrow{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid #251017}.newsrow:last-child{border:0}.newsrow img{width:105px;height:58px;object-fit:cover}.newsrow small{color:#777}.newsrow h3{font-size:14px;margin:3px 0}.newsrow p{font-size:11px;color:#aaa;margin:0}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.feature{height:195px;position:relative;overflow:hidden;border:1px solid #32131b}.feature img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:.3s}.feature:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#030304 90%)}.featuretext{position:absolute;z-index:2;left:14px;right:14px;bottom:13px}.feature h3{margin:0;color:#eee;text-transform:uppercase;font-size:20px}.feature p{margin:3px 0;color:#ccc;font-size:10px;text-transform:uppercase}.feature:hover img{transform:scale(1.05)}.feature.ice{border-color:#24485b}.feature.ice h3{color:#c9ecff}
.quote{text-align:center;border-top:1px solid #53101e;border-bottom:1px solid #53101e;padding:15px;color:#bcb2b5;letter-spacing:.1em;text-transform:uppercase;font-size:14px}.foot{border-top:1px solid #a20d2d;padding:24px 0 28px;background:#020203}.footin{display:flex;align-items:center;gap:40px}.footnav{margin:auto;display:flex;gap:20px;font-size:11px;text-transform:uppercase}.motto{font-size:11px;letter-spacing:.1em}
@media(max-width:1050px){.nav{gap:12px}.services{grid-template-columns:repeat(2,1fr)}.lower{grid-template-columns:1fr}.hero{height:420px}.features{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.nav{display:none}.hero{height:330px;min-height:330px}.services,.features{grid-template-columns:1fr}.services,.lower{padding-left:12px;padding-right:12px}.footin{flex-direction:column}.footnav{justify-content:center;flex-wrap:wrap}.logo{font-size:25px}}


/* =========================================================
   v2.2 RESPONSIVE — Desktop / Tablet / Mobile
   ========================================================= */

/* Touch-friendly controls */
a, button { -webkit-tap-highlight-color: rgba(239,21,63,.22); }
img { max-width:100%; height:auto; }

/* Tablet landscape / smaller notebooks */
@media (max-width: 1180px) {
  .wrap { width:min(100% - 28px, 1120px); }
  .head { min-height:70px; height:auto; padding:10px 0; }
  .logo { font-size:27px; flex:0 0 auto; }
  .nav { gap:14px; justify-content:flex-end; flex-wrap:wrap; }
  .nav a { font-size:11px; }
  .hero { height:54vw; min-height:410px; max-height:650px; background-position:center top; }
  .services { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 18px 18px; }
  .service { height:190px; }
  .lower { grid-template-columns:1fr; padding:0 18px 18px; }
  .features { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature { height:240px; }
}

/* Tablet portrait */
@media (max-width: 850px) {
  .sitehead { position:sticky; }
  .head { min-height:66px; }
  .logo { font-size:25px; }
  .nav {
    width:100%;
    order:2;
    margin:0;
    padding:5px 0 2px;
    justify-content:center;
  }
  .head { flex-wrap:wrap; justify-content:center; }
  .hero { height:58vw; min-height:360px; max-height:520px; }
  .services-title { font-size:24px; padding-top:8px; }
  .services-sub { font-size:12px; }
  .service { height:180px; }
  .lower { gap:14px; }
  .newsrow { grid-template-columns:92px 1fr; }
  .newsrow img { width:92px; height:60px; }
  .quote { padding:18px 24px; font-size:12px; line-height:1.7; }
  .footin { flex-direction:column; text-align:center; gap:20px; }
  .footnav { justify-content:center; flex-wrap:wrap; }
}

/* Phones */
@media (max-width: 640px) {
  body { overflow-x:hidden; }
  .wrap { width:100%; }
  .sitehead { position:sticky; top:0; }
  .head { min-height:60px; padding:8px 14px; justify-content:center; }
  .logo { font-size:23px; text-align:center; }
  .logo small { font-size:8px; }
  .nav { display:none; }

  /* Keep the complete artwork readable instead of cutting off the sides */
  .hero {
    height:67vw;
    min-height:250px;
    max-height:430px;
    background-size:cover;
    background-position:center top;
  }

  main.frame {
    border-left:0;
    border-right:0;
  }

  .services-title { font-size:22px; margin-top:8px; }
  .services-sub { padding:0 14px; font-size:10px; }
  .services { grid-template-columns:1fr; gap:12px; padding:0 12px 16px; }
  .service { height:210px; }
  .service h3 { font-size:23px; }
  .service p { font-size:11px; }
  .service .go { min-width:200px; padding:9px; }

  .lower { grid-template-columns:1fr; padding:0 12px 14px; }
  .news { padding:12px; }
  .news-title { font-size:18px; }
  .newsrow { grid-template-columns:88px 1fr; gap:10px; }
  .newsrow img { width:88px; height:58px; }
  .newsrow h3 { font-size:13px; }

  .features { grid-template-columns:1fr; gap:12px; }
  .feature { height:225px; }
  .feature h3 { font-size:22px; }
  .feature p { font-size:10px; }

  .quote { font-size:11px; line-height:1.65; padding:17px 18px; }
  .foot { padding:25px 14px; }
  .footin { gap:18px; }
  .footnav { gap:13px; }
  .motto { text-align:center; }
}

/* Very small phones */
@media (max-width: 390px) {
  .logo { font-size:20px; }
  .hero { height:72vw; min-height:230px; }
  .service { height:195px; }
  .service h3 { font-size:21px; }
  .feature { height:205px; }
  .newsrow { grid-template-columns:76px 1fr; }
  .newsrow img { width:76px; height:54px; }
}

/* Avoid hover-only behavior on touch devices */
@media (hover:none) {
  .service:hover img, .feature:hover img { transform:none; }
  .service:active { border-color:#ef153f; }
}

/* v2.3: Haupt- und Footer-Navigation entfernt */
.head{justify-content:center}.logo{text-align:center}.footin{justify-content:space-between}

/* v2.4 — artwork without baked-in navigation */
.hero{
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1536/1024;
  background-size:contain !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-color:#020203;
}
.hero:after{display:none!important}
@media(max-width:850px){
  .hero{aspect-ratio:1536/1024!important;height:auto!important;min-height:0!important}
}
@media(max-width:640px){
  .hero{aspect-ratio:1536/1024!important;height:auto!important;min-height:0!important;background-size:contain!important}
}