* { margin: 0; padding: 0; box-sizing: border-box; }

        

        body {

            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

            line-height: 1.6;

            color: #000;

            background: #faf9f5;

        }



        html { scroll-behavior: smooth; }



        /* NAVIGATION */

        .nav {

            background: white;

            padding: 16px 0;

            box-shadow: 0 2px 20px rgba(0,0,0,0.08);

            position: sticky;

            top: 0;

            z-index: 1000;

            transition: all 0.3s ease;

        }



        .nav.scrolled {

            padding: 12px 0;

            box-shadow: 0 4px 30px rgba(0,0,0,0.12);

        }



        .nav-container {

            max-width: 1400px;

            margin: 0 auto;

            padding: 0 20px;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .logo-text {

            font-size: 1.4rem;

            font-weight: 800;

            color: #000;

            text-decoration: none;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .logo-text i {

            font-size: 1.6rem;

            color: #000;

        }



        .nav-links {

            display: flex;

            gap: 8px;

            list-style: none;

        }



        .nav-links a {

            color: #000;

            text-decoration: none;

            font-weight: 500;

            padding: 10px 18px;

            border-radius: 50px;

            transition: all 0.3s ease;

            font-size: 0.95rem;

        }



        .nav-links a:hover {

            background: #000;

            color: #fff;

        }



        /* MOBILE MENU */

        .mobile-menu-toggle {

            display: none;

            background: none;

            border: none;

            cursor: pointer;

            padding: 8px;

            border-radius: 8px;

            transition: background 0.3s;

        }



        .mobile-menu-toggle:hover {

            background: #f0f0f0;

        }



        .mobile-menu-toggle i {

            font-size: 1.5rem;

        }



        .mobile-menu {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: white;

            z-index: 999;

            padding: 100px 30px 30px;

            opacity: 0;

            transition: opacity 0.3s ease;

        }



        .mobile-menu.active {

            display: block;

            opacity: 1;

        }



        .mobile-menu ul {

            list-style: none;

        }



        .mobile-menu li {

            border-bottom: 1px solid #eee;

        }



        .mobile-menu a {

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 20px 0;

            color: #000;

            text-decoration: none;

            font-weight: 600;

            font-size: 1.1rem;

        }



        .mobile-menu-close {

            position: absolute;

            top: 20px;

            right: 20px;

            background: none;

            border: none;

            font-size: 1.8rem;

            cursor: pointer;

        }



        /* HERO SECTION */

        .hero {

            background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);

            color: white;

            padding: 140px 20px 100px;

            text-align: center;

            position: relative;

            overflow: hidden;

        }



        .hero::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=1920') center/cover;

            opacity: 0.15;

        }



        .hero::after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            height: 150px;

            background: linear-gradient(to top, #faf9f5, transparent);

        }



        .hero-content {

            position: relative;

            z-index: 1;

            max-width: 900px;

            margin: 0 auto;

        }



        .hero-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            background: rgba(255,255,255,0.15);

            padding: 10px 20px;

            border-radius: 50px;

            font-size: 0.9rem;

            margin-bottom: 30px;

            backdrop-filter: blur(10px);

        }



        .hero h1 { 

            font-size: 4rem; 

            font-weight: 800; 

            margin-bottom: 24px;

            line-height: 1.1;

        }



        .hero-subtitle { 

            font-size: 1.4rem; 

            opacity: 0.9; 

            margin-bottom: 40px;

            font-weight: 300;

            max-width: 700px;

            margin-left: auto;

            margin-right: auto;

        }



        .hero-buttons {

            display: flex;

            gap: 16px;

            justify-content: center;

            flex-wrap: wrap;

            margin-bottom: 60px;

        }



        .hero-btn {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 16px 32px;

            border-radius: 50px;

            font-weight: 600;

            text-decoration: none;

            transition: all 0.3s ease;

        }



        .hero-btn-primary {

            background: white;

            color: #000;

        }



        .hero-btn-primary:hover {

            transform: translateY(-3px);

            box-shadow: 0 10px 30px rgba(0,0,0,0.3);

        }



        .hero-btn-secondary {

            background: transparent;

            color: white;

            border: 2px solid rgba(255,255,255,0.4);

        }



        .hero-btn-secondary:hover {

            background: rgba(255,255,255,0.1);

            border-color: rgba(255,255,255,0.6);

        }



        .hero-stats {

            display: flex;

            justify-content: center;

            gap: 60px;

            flex-wrap: wrap;

        }



        .stat {

            text-align: center;

        }



        .stat-number {

            font-size: 3rem;

            font-weight: 800;

            display: block;

            margin-bottom: 8px;

        }



        .stat-label {

            font-size: 1rem;

            opacity: 0.8;

            font-weight: 400;

        }



        /* INTRO SECTION */

        .intro-section {

            padding: 100px 20px;

            background: #faf9f5;

        }



        .intro-container {

            max-width: 1200px;

            margin: 0 auto;

        }



        .intro-grid {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 80px;

            align-items: center;

        }



        .intro-text h2 {

            font-size: 2.5rem;

            color: #000;

            margin-bottom: 24px;

            font-weight: 700;

        }



        .intro-text p {

            font-size: 1.1rem;

            color: #333;

            margin-bottom: 20px;

            line-height: 1.8;

        }



        .benefits {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 24px;

            margin-top: 40px;

        }



        .benefit-item {

            display: flex;

            align-items: start;

            gap: 16px;

            padding: 20px;

            background: white;

            border-radius: 16px;

            transition: all 0.3s ease;

        }



        .benefit-item:hover {

            transform: translateY(-4px);

            box-shadow: 0 10px 30px rgba(0,0,0,0.08);

        }



        .benefit-icon {

            width: 50px;

            height: 50px;

            background: #000;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            color: white;

            font-size: 1.3rem;

        }



        .benefit-text {

            font-size: 0.95rem;

            color: #333;

        }



        .benefit-text strong {

            display: block;

            color: #000;

            margin-bottom: 4px;

            font-size: 1rem;

        }



        .intro-image {

            position: relative;

        }



        .intro-image img {

            width: 100%;

            border-radius: 24px;

            box-shadow: 0 30px 60px rgba(0,0,0,0.15);

        }



        .intro-image-badge {

            position: absolute;

            bottom: -20px;

            right: -20px;

            background: #000;

            color: white;

            padding: 20px 30px;

            border-radius: 16px;

            box-shadow: 0 15px 40px rgba(0,0,0,0.2);

        }



        .intro-image-badge .number {

            font-size: 2rem;

            font-weight: 800;

            display: block;

        }



        .intro-image-badge .label {

            font-size: 0.85rem;

            opacity: 0.8;

        }



        /* SEO CONTENT SECTION */

        .seo-section {

            padding: 100px 20px;

            background: #fff;

        }



        .seo-container {

            max-width: 1200px;

            margin: 0 auto;

        }



        .seo-content {

            display: grid;

            grid-template-columns: 2fr 1fr;

            gap: 60px;

        }



        .main-content h2 {

            font-size: 2rem;

            color: #000;

            margin-bottom: 20px;

            margin-top: 50px;

            font-weight: 700;

            display: flex;

            align-items: center;

            gap: 12px;

        }



        .main-content h2:first-child {

            margin-top: 0;

        }



        .main-content h2 i {

            font-size: 1.5rem;

            color: #666;

        }



        .main-content h3 {

            font-size: 1.4rem;

            color: #000;

            margin-bottom: 16px;

            margin-top: 35px;

            font-weight: 600;

        }



        .main-content p {

            font-size: 1.05rem;

            color: #333;

            margin-bottom: 20px;

            line-height: 1.85;

        }



        .highlight-box {

            background: linear-gradient(135deg, #faf9f5 0%, #f5f3ed 100%);

            border-left: 4px solid #000;

            padding: 28px;

            margin: 35px 0;

            border-radius: 12px;

        }



        .highlight-box h3 {

            margin-top: 0;

            color: #000;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .highlight-box p {

            margin-bottom: 0;

        }



        .sidebar {

            position: sticky;

            top: 100px;

            height: fit-content;

        }



        .sidebar-box {

            background: #faf9f5;

            padding: 30px;

            border-radius: 20px;

            margin-bottom: 25px;

        }



        .sidebar-box h3 {

            font-size: 1.2rem;

            color: #000;

            margin-bottom: 20px;

            font-weight: 700;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .sidebar-list {

            list-style: none;

        }



        .sidebar-list li {

            padding: 14px 0;

            border-bottom: 1px solid #e5e5e5;

            font-size: 0.95rem;

            color: #333;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .sidebar-list li:last-child {

            border-bottom: none;

            padding-bottom: 0;

        }



        .sidebar-list li i {

            color: #000;

            font-size: 1rem;

        }



        .price-table {

            width: 100%;

            border-collapse: collapse;

            margin: 30px 0;

            border-radius: 16px;

            overflow: hidden;

            box-shadow: 0 5px 20px rgba(0,0,0,0.08);

        }



        .price-table th {

            background: #000;

            color: white;

            padding: 18px 20px;

            text-align: left;

            font-weight: 600;

        }



        .price-table td {

            padding: 18px 20px;

            border-bottom: 1px solid #eee;

            background: white;

        }



        .price-table tr:last-child td {

            border-bottom: none;

        }



        .price-table tr:hover td {

            background: #faf9f5;

        }



        /* CTA SECTION */

        .cta-section {

            background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);

            color: white;

            padding: 100px 20px;

            text-align: center;

            position: relative;

            overflow: hidden;

        }



        .cta-section::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1920') center/cover;

            opacity: 0.1;

        }



        .cta-content {

            position: relative;

            z-index: 1;

        }



        .cta-section h2 {

            font-size: 2.8rem;

            margin-bottom: 20px;

            font-weight: 700;

        }



        .cta-section p {

            font-size: 1.2rem;

            margin-bottom: 35px;

            opacity: 0.9;

            max-width: 500px;

            margin-left: auto;

            margin-right: auto;

        }



        .cta-button {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            background: white;

            color: #000;

            padding: 18px 40px;

            border-radius: 50px;

            font-weight: 700;

            text-decoration: none;

            font-size: 1.1rem;

            transition: all 0.3s;

        }



        .cta-button:hover {

            transform: translateY(-4px);

            box-shadow: 0 15px 40px rgba(0,0,0,0.3);

        }



        /* FOOTER */

        .footer {

            background: #0a0a0a;

            color: white;

            padding: 80px 20px 30px;

        }



        .footer-container {

            max-width: 1400px;

            margin: 0 auto;

        }



        .footer-grid {

            display: grid;

            grid-template-columns: 2fr 1fr 1fr 1fr;

            gap: 50px;

            margin-bottom: 60px;

        }



        .footer-col h3 {

            font-size: 1.2rem;

            margin-bottom: 25px;

            font-weight: 700;

        }



        .footer-col p {

            color: #999;

            line-height: 1.8;

            margin-bottom: 25px;

        }



        .footer-links {

            list-style: none;

        }



        .footer-links li {

            margin-bottom: 14px;

        }



        .footer-links a {

            color: #999;

            text-decoration: none;

            transition: all 0.3s;

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .footer-links a:hover {

            color: white;

            padding-left: 5px;

        }



        .footer-bottom {

            border-top: 1px solid #222;

            padding-top: 30px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            gap: 20px;

        }



        .footer-bottom p {

            color: #666;

            font-size: 0.9rem;

            margin: 0;

        }



        .footer-social {

            display: flex;

            gap: 12px;

        }



        .social-link {

            width: 44px;

            height: 44px;

            background: #1a1a1a;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            text-decoration: none;

            transition: all 0.3s;

            font-size: 1.2rem;

        }



        .social-link:hover {

            background: white;

            color: #000;

            transform: translateY(-3px);

        }



        /* CARDS SECTION */

        .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

        .section { padding: 100px 20px; }

        

        .section-header {

            text-align: center;

            margin-bottom: 60px;

        }



        .section-title { 

            font-size: 2.5rem; 

            font-weight: 700; 

            margin-bottom: 16px; 

            color: #000; 

        }



        .section-subtitle {

            font-size: 1.15rem;

            color: #666;

            max-width: 600px;

            margin: 0 auto;

        }



        .grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 30px;

        }



        .card {

            background: white;

            border-radius: 24px;

            overflow: hidden;

            box-shadow: 0 10px 40px rgba(0,0,0,0.08);

            transition: all 0.4s ease;

        }



        .card:hover { 

            transform: translateY(-10px); 

            box-shadow: 0 20px 50px rgba(0,0,0,0.15); 

        }



        .card-img {

            position: relative;

            height: 280px;

            background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);

        }



        .card-img img { 

            width: 100%; 

            height: 100%; 

            object-fit: cover;

            transition: transform 0.5s ease;

        }



        .card:hover .card-img img {

            transform: scale(1.05);

        }



        .badge {

            position: absolute;

            top: 20px;

            left: 20px;

            background: white;

            padding: 10px 18px;

            border-radius: 50px;

            font-weight: 600;

            font-size: 0.85rem;

            color: #000;

            display: flex;

            align-items: center;

            gap: 6px;

        }



        .heart {

            position: absolute;

            top: 20px;

            right: 20px;

            width: 48px;

            height: 48px;

            background: white;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            transition: all 0.3s;

            border: none;

            font-size: 1.2rem;

            color: #ccc;

        }



        .heart:hover {

            transform: scale(1.1);

            color: #e74c3c;

        }



        .heart.active {

            color: #e74c3c;

        }



        .logo {

            position: absolute;

            bottom: -30px;

            left: 20px;

            width: 70px;

            height: 70px;

            background: white;

            border-radius: 16px;

            border: 4px solid white;

            box-shadow: 0 8px 25px rgba(0,0,0,0.15);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.8rem;

            font-weight: 700;

            color: #000;

            overflow: hidden;

        }



        .logo img { width: 100%; height: 100%; object-fit: cover; }



        .card-body { padding: 45px 25px 25px; }

        .card-title { 

            font-size: 1.4rem; 

            font-weight: 700; 

            margin-bottom: 12px; 

            color: #000; 

        }

        

        .rating {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            background: #000;

            color: white;

            padding: 8px 14px;

            border-radius: 10px;

            font-weight: 600;

            font-size: 0.9rem;

            margin-bottom: 20px;

        }



        .rating i {

            color: #ffc107;

        }



        .footer-card {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding-top: 20px;

            border-top: 1px solid #eee;

        }



        .price { font-size: 0.85rem; color: #666; }

        .price-big { font-size: 2rem; font-weight: 700; color: #000; }

        .price-big span { font-size: 1rem; margin-left: 2px; font-weight: 400; }



        .btn {

            background: #000;

            color: white;

            padding: 14px 28px;

            border-radius: 50px;

            font-weight: 600;

            text-decoration: none;

            display: inline-flex;

            align-items: center;

            gap: 8px;

            transition: all 0.3s;

            font-size: 0.95rem;

        }



        .btn:hover { 

            background: #333; 

            transform: translateX(5px); 

        }



        .loading { 

            text-align: center; 

            padding: 80px; 

            font-size: 1.1rem; 

            color: #666;

        }



        .loading i {

            font-size: 2rem;

            margin-bottom: 15px;

            display: block;

            animation: spin 1s linear infinite;

        }



        @keyframes spin {

            100% { transform: rotate(360deg); }

        }



        /* RESPONSIVE */

        @media (max-width: 768px) {

            .hero h1 { font-size: 2.5rem; }

            .hero-subtitle { font-size: 1.1rem; }

            .hero { padding: 100px 20px 80px; }

            .hero-buttons { flex-direction: column; align-items: center; }

            .hero-btn { width: 100%; max-width: 280px; justify-content: center; }

            .grid { grid-template-columns: 1fr; gap: 25px; }

            .container { padding: 0 15px; }

            .section { padding: 70px 15px; }

            .intro-grid { grid-template-columns: 1fr; gap: 40px; }

            .intro-image { order: -1; }

            .intro-image-badge { right: 10px; bottom: -15px; padding: 15px 20px; }

            .intro-image-badge .number { font-size: 1.5rem; }

            .seo-content { grid-template-columns: 1fr; }

            .sidebar { position: static; }

            .nav-links { display: none; }

            .mobile-menu-toggle { display: block; }

            .hero-stats { gap: 30px; }

            .footer-grid { grid-template-columns: 1fr; gap: 40px; }

            .footer-bottom { flex-direction: column; text-align: center; }

            .benefits { grid-template-columns: 1fr; }

            .section-title { font-size: 2rem; }

            .cta-section h2 { font-size: 2rem; }

        }



        @media (min-width: 769px) and (max-width: 1200px) {

            .grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }

            .footer-grid { grid-template-columns: repeat(2, 1fr); }

        }



        @media (min-width: 1201px) and (max-width: 1600px) {

            .grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }

        }

   /* =========================================================
   SAUNAGUS STEDER - KUN SCOPET TIL #steder
   Bootstrap bruges kun til struktur
========================================================= */

#steder #grid .row{
  --bs-gutter-x:24px;
  --bs-gutter-y:24px;
}

#steder #grid .loading{
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}

#steder #grid .loading i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  animation:stederSpin 1s linear infinite;
}

#steder .card{
  height:100%;
}

#steder .card-img{
  position:relative;
}

#steder .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

#steder .rating{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#steder .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

#steder .heart,
#steder .logo,
#steder .benefit-icon,
#steder .rating i,
#steder .badge i,
#steder .btn i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#steder .logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

@keyframes stederSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}