/* ==========================================================================
   ULM - STANDALONE WEB PORTAL STYLESHEET
   ==========================================================================
   TABLE OF CONTENTS:
   1. ROOT VARIABLES & THEME SCOPE
   2. GLOBAL RESETS & BASE TYPOGRAPHY
   3. UTILITY INFO-BAR (TOP STRIP)
   4. MAIN HEADER & CENTRED NAVIGATION
   5. MOBILE NAVIGATION DRAWER & TOGGLE
   6. CATEGORY CIRCLES STRIP (TOUCH HORIZONTAL SCROLL)
   7. HERO SECTIONS & WIDESCREEN SLIDERS
   8. PROMINENT SEARCH BAR & MODAL
   9. PARTNER STORIES STRIP
   10. BENTO GRIDS & CARDS (NEWS, EVENTS, GASTRO, JOBS)
   11. DEDICATED SECTIONS (ÖPNV, PARKING, WETTER, BLITZER, FINDER)
   12. COMPANY PROFILE & DETAIL LAYOUTS
   13. MAGAZINE ARTICLE & TOC SIDEBAR
   14. MODAL DIALOGS & OVERLAYS
   15. B2B PARTNER LANDING PAGE
   16. RICH FOOTER & LEGAL NAVIGATION
   17. RESPONSIVE MEDIA QUERIES (1024px, 900px, 768px, 640px, 480px)
   ========================================================================== */

    :root, body.theme-scope {
      --client-bg-surface: #f3f4f6;
    }

    /* Standalone overrides to make the web preview fill the screen */
    body {
      margin: 0;
      padding: 0;
      background-color: var(--client-bg, #f3f4f6);
      font-family: var(--client-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
      color: var(--client-text, #1f2937);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      height: auto !important;
      overflow-y: auto !important;
    }

    /* Top Utility Info-Bar */
    .web-utility-bar {
      height: 52px;
      background-color: #111827;
      color: #9ca3af;
      font-size: 0.85rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .web-utility-bar-inner {
      max-width: 1360px;
      margin: 0 auto;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      box-sizing: border-box;
    }
    .web-utility-bar strong {
      color: #ffffff;
      margin-left: 2px;
    }
    .web-utility-links {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .web-utility-links span {
      cursor: pointer;
      transition: color 0.2s;
    }
    .web-utility-links span:hover {
      color: #ffffff;
    }

    /* Centered Main Navigation (Ikea inspired) */
    .web-nav-wrapper {
      border-bottom: 1px solid var(--client-border);
      background-color: var(--client-bg-card);
      width: 100%;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    }
    
    .web-nav {
      max-width: 1360px;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
      padding: 20px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    
    .web-logo-container {
      display: flex;
      align-items: center;
      gap: 48px;
      flex-shrink: 0;
    }

    .web-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      font-size: 1.3rem;
      color: var(--client-primary);
      text-decoration: none;
    }

    .web-nav-links {
      display: flex;
      gap: 36px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .web-nav-link {
      font-size: 0.95rem;
      font-weight: 700;
      color: #374151;
      cursor: pointer;
      letter-spacing: 0.2px;
      transition: color 0.2s;
    }
    .web-nav-link:hover, .web-nav-link.active {
      color: var(--client-primary);
    }

    /* Prominent Centered Search Bar (Ikea style) */
    .web-search-bar-container {
      flex: 1;
      max-width: 580px;
      position: relative;
      display: flex;
      align-items: center;
    }
    .web-search-bar-container input {
      width: 100%;
      padding: 10px 44px 10px 40px;
      font-size: 0.85rem;
      font-weight: 500;
      border: 1px solid #d1d5db;
      border-radius: 24px;
      background-color: #f3f4f6;
      color: #1f2937;
      outline: none;
      transition: all 0.2s ease;
    }
    .web-search-bar-container input:focus {
      background-color: #ffffff;
      border-color: var(--client-primary);
      box-shadow: 0 0 0 3px rgba(var(--client-primary-rgb), 0.15);
    }
    .web-search-bar-container .search-icon {
      position: absolute;
      left: 14px;
      color: #6b7280;
      width: 16px;
      height: 16px;
    }
    .web-search-bar-container .camera-icon {
      position: absolute;
      right: 16px;
      color: #6b7280;
      width: 16px;
      height: 16px;
      cursor: pointer;
      transition: color 0.2s;
    }
    .web-search-bar-container .camera-icon:hover {
      color: #111827;
    }

    /* Header Actions right */
    .web-header-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-shrink: 0;
    }
    .header-action-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      font-weight: 700;
      color: #374151;
      cursor: pointer;
      transition: color 0.2s;
    }
    .header-action-item:hover {
      color: var(--client-primary);
    }
    .header-action-item i {
      width: 20px;
      height: 20px;
      color: #4b5563;
    }

    /* Horizontal Category Circles (Ikea Category list) */
    .web-category-strip-wrapper {
      width: 100%;
      background-color: #ffffff;
      padding: 16px 0;
      overflow-x: auto;
    }
    .web-category-strip {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 16px;
      display: flex;
      gap: 32px;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
    }
    .category-circle-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }
    .category-circle-item:hover {
      transform: translateY(-2px);
    }
    .category-circle-item .circle-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-color: #f3f4f6;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #374151;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
      transition: all 0.2s ease;
    }
    .category-circle-item:hover .circle-icon {
      background-color: var(--client-primary);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(var(--client-primary-rgb), 0.2);
    }
    .category-circle-item span {
      font-size: 0.72rem;
      font-weight: 700;
      color: #4b5563;
    }
    .category-circle-item:hover span {
      color: #111827;
    }

    /* Centered Content Container */
    .web-main-container {
      max-width: 1360px;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
      padding: 64px 16px;
      background-color: var(--client-bg);
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 48px;
    }

    /* Bento Grid Spans */
    .bento-slider {
      grid-column: span 12;
    }
    .bento-stories-card {
      grid-column: span 4;
      display: flex;
      flex-direction: column;
      background-color: var(--client-bg-card);
      border-radius: 12px;
      border: 1px solid var(--client-border);
      padding: 20px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      max-height: 400px;
    }
    .bento-stories-card h3 {
      margin: 0 0 16px 0;
      font-size: 1rem;
      font-weight: 800;
      color: #111827;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .bento-stories-card h3 span {
      background-color: var(--client-accent);
      color: #ffffff;
      font-size: 0.6rem;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Partner Stories Web horizontal/vertical view */
    .web-partner-teaser-grid {
      display: grid;
      grid-template-rows: repeat(2, auto);
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 32px) / 3);
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .web-partner-teaser-grid::-webkit-scrollbar {
      display: none;
    }
    @media (max-width: 900px) {
      .web-partner-teaser-grid {
        grid-auto-columns: calc((100% - 16px) / 2);
      }
    }
    @media (max-width: 600px) {
      .web-partner-teaser-grid {
        grid-auto-columns: 100%;
      }
    }

    .web-stories-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
      gap: 16px;
      overflow-y: auto;
      padding-bottom: 8px;
    }
    .web-story-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }
    .web-story-avatar-ring {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }
    .web-story-item:hover .web-story-avatar-ring {
      transform: scale(1.05);
    }
    .web-story-avatar-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .web-story-avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #ffffff;
      background-color: #f3f4f6;
    }
    .web-story-name {
      font-size: 0.62rem;
      font-weight: 700;
      color: #4b5563;
      text-align: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Bento Grid Items row 2 */
    .bento-news-section {
      grid-column: span 8;
    }
    .bento-widgets-section {
      grid-column: span 4;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* Redesigned full-width web hero section */
    .web-hero {
      width: 100%;
      box-sizing: border-box;
      padding: 60px 4%;
      background: linear-gradient(to right, var(--client-bg-surface) 60%, rgba(255,255,255,0) 100%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }
    .web-hero-text {
      max-width: 620px;
    }
    .web-hero-text h1 {
      font-size: 2.8rem;
      font-weight: 800;
      line-height: 1.1;
      margin: 0 0 16px 0;
      letter-spacing: -0.03em;
    }
    .web-hero-text p {
      font-size: 1.1rem;
      color: #4b5563;
      line-height: 1.6;
      margin: 0 0 28px 0;
    }

    /* Rich Footer (Full Branding Width & Spacious) */
    .web-rich-footer-wrapper {
      background-color: var(--client-primary) !important;
      color: rgba(255, 255, 255, 0.8) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      width: 100%;
      margin-top: auto;
      padding: 64px 0 32px 0;
      box-sizing: border-box;
    }
    
    .web-rich-footer {
      max-width: 1360px;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
      padding: 0 16px;
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 40px !important;
      font-size: 0.88rem;
    }
    
    .web-rich-footer-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .web-rich-footer-col h4 {
      color: #ffffff !important;
      font-size: 0.95rem;
      font-weight: 800;
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    
    .web-rich-footer-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .web-rich-footer-col ul li a {
      color: rgba(255, 255, 255, 0.75) !important;
      text-decoration: none;
      transition: color 0.2s;
    }
    
    .web-rich-footer-col ul li a:hover {
      color: #ffffff !important;
      text-decoration: underline;
    }
    
    .web-rich-footer-bottom {
      max-width: 1360px;
      margin: 48px auto 0 auto;
      padding: 24px 16px 0 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.6) !important;
      box-sizing: border-box;
    }
    
    .legal-nav-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 0.84rem;
      font-weight: 700;
      text-decoration: none;
      border: 1px solid var(--client-border);
      color: var(--client-text-muted);
      background-color: #ffffff;
      transition: all 0.15s ease;
    }
    .legal-nav-pill:hover {
      color: var(--client-primary);
      border-color: var(--client-primary);
    }
    .legal-nav-pill.active {
      background-color: var(--client-primary) !important;
      color: #ffffff !important;
      border-color: var(--client-primary) !important;
    }

    /* Ulm Hero Layout (Full Width & Spacious) */
    .web-split-hero {
      max-width: 1360px;
      margin: 0 auto;
      padding: 72px 16px;
      display: flex;
      flex-direction: column;
      gap: 48px;
      align-items: center;
      text-align: center;
      box-sizing: border-box;
    }
    .hero-left {
      max-width: 860px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .hero-left h1 {
      font-size: 3.4rem;
      font-weight: 800;
      color: #111827;
      line-height: 1.15;
      margin: 0;
    }
    .hero-left h1 span,
    #webHeroHeadline span,
    #webHeroHeadline .dynamic-city-name,
    .hero-left h1 .dynamic-city-name {
      background: linear-gradient(135deg, var(--client-primary, #274A84) 0%, var(--client-accent, #af5a83) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      display: inline;
    }
    .hero-left p {
      font-size: 1.15rem;
      color: #4b5563;
      line-height: 1.6;
      margin: 0;
    }
    .hero-buttons-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 12px;
    }
    .hero-right {
      width: 100%;
      min-width: 0;
    }
    .web-slide-card {
      padding: 44px !important;
      text-align: left !important;
      box-sizing: border-box !important;
      overflow: hidden;
    }
    .web-slide-card h2 {
      font-size: 2rem !important;
      line-height: 1.2 !important;
      margin-bottom: 6px !important;
    }
    .web-slide-card p {
      font-size: 1.05rem !important;
      line-height: 1.4 !important;
      margin-top: 6px !important;
    }
    .web-slide-card .client-btn {
      padding: 12px 24px !important;
      font-size: 0.95rem !important;
      margin-bottom: 0 !important;
    }
    .web-slide-content-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      gap: 16px;
    }
    @media (max-width: 900px) {
      .web-slide-card {
        padding: 24px 20px 34px 20px !important;
      }
      .web-slide-card h2 {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
      }
      .web-slide-card p {
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        margin-top: 4px !important;
      }
      .web-slide-card .client-btn {
        padding: 8px 16px !important;
        font-size: 0.82rem !important;
      }
    }
    @media (max-width: 600px) {
      .web-slide-content-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
      }
    }

    /* Unified Homepage Sections (Padding, Margin, Striping) */
    .web-home-section {
      width: 100% !important;
      box-sizing: border-box !important;
      padding: 56px 0 !important;
      margin: 0 !important;
      transition: background-color 0.2s ease;
    }
    .web-home-section .web-projects-inner,
    .web-home-section .web-section-container {
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 0 16px !important;
      box-sizing: border-box !important;
      text-align: left;
    }

    /* Hero Search Bar (Standard Mode Base) */
    .web-hero-search-wrapper {
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
      background-color: #ffffff;
      border: 1.5px solid var(--client-border);
      border-radius: 50px;
      padding: 6px 6px 6px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 10px 30px rgba(0,0,0,0.04);
      box-sizing: border-box;
      cursor: pointer;
    }
    .web-hero-search-inner-box {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
    }
    .web-hero-search-inner-box input {
      border: none;
      background: transparent;
      color: var(--client-text);
      font-size: 0.95rem;
      width: 100%;
      outline: none;
      font-weight: 500;
    }
    .web-hero-search-btn {
      padding: 12px 28px;
      border-radius: 25px;
      font-weight: 700;
      font-size: 0.88rem;
      box-shadow: 0 4px 12px rgba(var(--client-primary-rgb), 0.2);
    }
    .web-home-section.section-bg-white {
      background-color: #ffffff !important;
      background-image: none !important;
      border: none !important;
      margin: 0 !important;
    }
    .web-home-section.section-bg-tinted {
      background-color: var(--client-bg-surface, #f3f4f6) !important;
      background-image: none !important;
      border-top: 1px solid var(--client-border, #e5e7eb) !important;
      border-bottom: 1px solid var(--client-border, #e5e7eb) !important;
      margin: 0 !important;
    }

    /* B2B Partner Landingpage Styles */
    .web-partner-section {
      width: 100%;
      box-sizing: border-box;
      background-color: #f8fafc;
      padding: 32px 0 96px 0;
      color: var(--client-text, #0f172a);
    }
    .web-partner-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      box-sizing: border-box;
    }
    .partner-hero-wrap {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, rgba(var(--client-primary-rgb, 39, 74, 130), 0.05) 100%);
      border: 1.5px solid #e2e8f0;
      border-radius: 32px;
      padding: 56px 48px;
      box-shadow: 0 20px 40px -15px rgba(0,0,0,0.05);
      margin-bottom: 64px;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: center;
    }
    @media (max-width: 960px) {
      .partner-hero-wrap {
        grid-template-columns: 1fr;
        padding: 36px 24px;
        gap: 36px;
      }
    }
    .partner-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(var(--client-primary-rgb, 39, 74, 130), 0.08);
      color: var(--client-primary);
      border: 1px solid rgba(var(--client-primary-rgb, 39, 74, 130), 0.2);
      border-radius: 9999px;
      padding: 6px 16px;
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.4px;
      margin-bottom: 20px;
    }
    .partner-pill-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--client-accent, #f97316);
      display: inline-block;
    }
    .partner-card-hover {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      padding: 32px 28px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.02);
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .partner-card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(0,0,0,0.08);
      border-color: #cbd5e1;
    }
    .partner-phone-mockup {
      width: 290px;
      height: 520px;
      background: #ffffff;
      border-radius: 40px;
      border: 10px solid #0f172a;
      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .partner-phone-notch {
      width: 110px;
      height: 20px;
      background: #0f172a;
      border-radius: 0 0 14px 14px;
      margin: 0 auto;
      position: relative;
      z-index: 10;
    }
    .partner-form-container {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 28px;
      padding: 48px 40px;
      box-shadow: 0 16px 40px -10px rgba(0,0,0,0.06);
      max-width: 780px;
      margin: 0 auto;
    }
    @media (max-width: 640px) {
      .web-partner-section {
        padding: 20px 0 64px 0;
      }
      .partner-hero-wrap {
        padding: 28px 18px !important;
        border-radius: 24px !important;
        margin-bottom: 48px !important;
      }
      .partner-form-container {
        padding: 28px 18px !important;
        border-radius: 20px !important;
      }
      .partner-phone-mockup {
        width: 100% !important;
        max-width: 290px !important;
      }
    }
    .web-bento-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 28px;
      width: 100%;
    }
    .web-bento-grid > .client-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    @media (max-width: 900px) {
      .web-home-section {
        padding: 36px 0 !important;
      }
      .web-bento-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .web-bento-grid > div {
        grid-column: span 1 !important;
      }
    }

    /* Stadtmarketing Cards Row (3-columns) */
    .web-projects-section {
      width: 100%;
      box-sizing: border-box;
      padding: 56px 0;
      border: none;
      margin: 0;
    }
    .web-projects-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
      box-sizing: border-box;
      text-align: left;
    }
    .web-projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin: 48px 0;
    }
    .project-card {
      background-color: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--client-border);
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      text-align: left;
    }
    .project-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    }
    .project-card-img {
      height: 200px;
      background-size: cover;
      background-position: center;
    }
    .project-card-body {
      padding: 28px;
    }
    .project-card-body h4 {
      margin: 0 0 8px 0;
      font-size: 1.1rem;
      font-weight: 800;
      color: #111827;
    }
    .project-card-body p {
      margin: 0;
      font-size: 0.82rem;
      color: #4b5563;
      line-height: 1.5;
    }

    /* Magazine Module Styles */
    .magazine-card {
      background-color: var(--client-bg-card);
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--client-border);
      box-shadow: 0 4px 15px rgba(0,0,0,0.03);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      display: flex;
      flex-direction: column;
      cursor: pointer;
    }
    .magazine-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.08);
      border-color: rgba(var(--client-primary-rgb), 0.4);
    }
    .magazine-card-img-wrapper {
      position: relative;
      width: 100%;
      height: 210px;
      overflow: hidden;
      background-color: #f3f4f6;
    }
    .magazine-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .magazine-card:hover .magazine-card-img {
      transform: scale(1.05);
    }
    .magazine-card-badges {
      position: absolute;
      top: 12px;
      left: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 2;
      max-width: calc(100% - 90px);
      flex-wrap: wrap;
    }
    .magazine-card-badges .magazine-card-badge,
    .magazine-card-badges .magazine-badge-sponsored {
      position: static;
      top: auto;
      left: auto;
      right: auto;
      margin: 0;
    }
    .magazine-card-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(4px);
      color: var(--client-primary);
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .magazine-card-time {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(17, 24, 39, 0.75);
      backdrop-filter: blur(4px);
      color: #ffffff;
      font-size: 0.72rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .magazine-card-body {
      padding: 22px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .magazine-card-meta {
      font-size: 0.75rem;
      color: var(--client-text-muted);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .magazine-card-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--client-text);
      line-height: 1.4;
      margin: 0 0 8px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .magazine-card-teaser {
      font-size: 0.84rem;
      color: var(--client-text-muted);
      line-height: 1.55;
      margin: 0 0 16px 0;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .magazine-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--client-border);
      padding-top: 14px;
      margin-top: auto;
    }
    .magazine-card-author {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .magazine-card-author img {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      object-fit: cover;
    }
    .magazine-card-author-name {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--client-text);
    }
    .magazine-article-body h2 {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--client-text);
      margin: 36px 0 16px 0;
      scroll-margin-top: 100px;
    }
    .magazine-article-body h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--client-text);
      margin: 28px 0 12px 0;
      scroll-margin-top: 100px;
    }
    .magazine-article-body p {
      margin: 0 0 18px 0;
      line-height: 1.8;
      color: #374151;
    }
    .magazine-article-body ul {
      margin: 0 0 20px 24px;
      line-height: 1.8;
      color: #374151;
    }
    .magazine-article-body blockquote {
      border-left: 4px solid var(--client-accent);
      padding: 14px 20px;
      margin: 28px 0;
      background: rgba(var(--client-accent-rgb), 0.05);
      border-radius: 0 12px 12px 0;
      font-style: italic;
      color: var(--client-text);
    }
    .magazine-article-body ol {
      margin: 18px 0 18px 24px;
      padding-left: 0;
      line-height: 1.8;
      color: #374151;
    }
    .magazine-article-body ol li {
      margin-bottom: 6px;
    }
    .magazine-article-body mark {
      background-color: #fef08a;
      color: #854d0e;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
    }
    .magazine-article-body hr {
      border: none;
      border-top: 1px solid var(--client-border);
      margin: 32px 0;
    }
    .magazine-article-body a {
      color: var(--client-primary);
      text-decoration: underline;
      font-weight: 600;
    }
    .magazine-article-body u {
      text-decoration: underline;
    }
    .magazine-article-body s {
      text-decoration: line-through;
    }
    .magazine-article-body h4 {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--client-text);
      margin: 24px 0 8px 0;
    }
    .magazine-callout {
      background: rgba(var(--client-primary-rgb), 0.05);
      border: 1px solid rgba(var(--client-primary-rgb), 0.2);
      border-radius: 12px;
      padding: 20px;
      margin: 28px 0;
    }
    .magazine-callout h4 {
      margin: 0 0 8px 0;
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--client-primary);
    }
    .magazine-toc-link {
      color: var(--client-text-muted);
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 6px;
      transition: all 0.2s;
      display: block;
      line-height: 1.4;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .magazine-toc-link:hover, .magazine-toc-link.active {
      color: var(--client-primary);
      background-color: rgba(var(--client-primary-rgb), 0.08);
      font-weight: 700;
    }
    @media (max-width: 900px) {
      #webMagTocContainer {
        display: none !important;
      }
    }
    .magazine-inline-img {
      margin: 32px 0;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--client-border);
      background-color: var(--client-bg-surface);
      box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    }
    .magazine-inline-img img {
      width: 100%;
      height: auto;
      max-height: 480px;
      object-fit: cover;
      display: block;
    }
    .magazine-inline-img figcaption {
      font-size: 0.82rem;
      color: var(--client-text-muted);
      font-style: italic;
      padding: 10px 16px;
      background-color: var(--client-bg-card);
      border-top: 1px solid var(--client-border);
      text-align: right;
    }
    .magazine-badge-sponsored {
      background-color: rgba(var(--client-accent-rgb), 0.15);
      color: var(--client-accent);
      border: 1px solid rgba(var(--client-accent-rgb), 0.3);
      font-weight: 800;
      font-size: 0.7rem;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .magazine-slider-track::-webkit-scrollbar {
      display: none;
    }

    /* Mayor Section Speech Bubble */
    .mayor-card {
      background-color: var(--client-bg-card);
      border: 1px solid var(--client-border);
      border-radius: 16px;
      padding: 24px;
      margin-top: 32px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }
    .mayor-avatar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      width: 110px;
    }
    .mayor-avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      border: 3px solid var(--client-primary);
      object-fit: cover;
    }
    .mayor-name {
      font-size: 0.75rem;
      font-weight: 800;
      color: #111827;
      text-align: center;
      line-height: 1.2;
    }
    .mayor-role {
      font-size: 0.65rem;
      color: #6b7280;
      text-align: center;
    }
    .mayor-speech-bubble {
      flex: 1;
      position: relative;
      background: linear-gradient(135deg, var(--client-primary) 0%, rgba(var(--client-primary-rgb), 0.8) 100%);
      color: #ffffff;
      border-radius: 16px;
      padding: 20px;
      font-size: 0.88rem;
      line-height: 1.6;
      box-shadow: 0 4px 15px rgba(var(--client-primary-rgb), 0.1);
    }
    .mayor-speech-bubble::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 36px;
      border-width: 6px 12px 6px 0;
      border-style: solid;
      border-color: transparent var(--client-primary) transparent transparent;
    }

    /* Wide Stadtmarketing Banner (Zick-Zack 2 / Promo-Banner) */
    .wide-marketing-banner {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--client-border);
      background-color: #ffffff;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      display: flex;
      box-sizing: border-box;
      min-height: 320px;
    }
    .banner-img-col {
      flex: 1;
      min-height: 300px;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .banner-text-col {
      flex: 1.1;
      background-color: #ffffff;
      padding: 48px 52px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
      box-sizing: border-box;
    }
    .banner-text-col h3 {
      font-size: 1.85rem;
      font-weight: 800;
      color: #111827;
      line-height: 1.15;
      margin: 0;
    }
    .banner-text-col .banner-subline {
      font-size: 1.05rem;
      font-weight: 700;
      color: #111827;
      margin: 0;
    }
    .banner-text-col p {
      font-size: 0.9rem;
      color: #4b5563;
      line-height: 1.6;
      margin: 0;
    }
    .banner-text-col button {
      margin: 0;
      padding: 12px 26px;
      border-radius: 24px;
      font-weight: 700;
      font-size: 0.88rem;
      align-self: flex-start;
      cursor: pointer;
    }

    /* Global mobile overflow prevention */
    html, body {
      overflow-x: hidden;
      max-width: 100vw;
      width: 100%;
    }

    /* Mobile Menu Toggle Button */
    .web-mobile-menu-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--client-bg-card, #ffffff);
      border: 1.5px solid var(--client-border, #e5e7eb);
      color: var(--client-text, #1f2937);
      cursor: pointer;
      padding: 0;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    .web-mobile-menu-toggle:hover {
      background: #f3f4f6;
      border-color: var(--client-primary);
      color: var(--client-primary);
    }

    /* Mobile Drawer Backdrop */
    .web-mobile-drawer-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 9998;
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .web-mobile-drawer-backdrop.active {
      display: block;
      opacity: 1;
    }

    /* Mobile Navigation Drawer */
    .web-mobile-nav-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: 320px;
      max-width: 85vw;
      height: 100vh;
      height: 100dvh;
      background-color: var(--client-bg-card, #ffffff);
      box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
      z-index: 9999;
      transform: translateX(100%);
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .web-mobile-nav-drawer.active {
      transform: translateX(0);
    }

    .web-mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px;
      border-bottom: 1px solid var(--client-border, #e5e7eb);
      position: sticky;
      top: 0;
      background-color: var(--client-bg-card, #ffffff);
      z-index: 2;
    }
    .web-mobile-drawer-close {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid var(--client-border, #e5e7eb);
      background: #f8fafc;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: all 0.15s ease;
    }
    .web-mobile-drawer-close:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .web-mobile-drawer-body {
      padding: 16px 18px 32px 18px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      flex: 1;
    }
    .web-mobile-nav-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .web-mobile-nav-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      font-size: 0.95rem;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .web-mobile-nav-item:hover, .web-mobile-nav-item.active {
      background-color: rgba(var(--client-primary-rgb, 39, 74, 130), 0.08);
      color: var(--client-primary);
    }
    .web-mobile-nav-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background-color: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--client-primary);
      flex-shrink: 0;
    }
    .web-mobile-drawer-cta {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid var(--client-border, #e5e7eb);
    }

    /* Hide scrollbar for category strip and stories */
    .web-category-strip-wrapper::-webkit-scrollbar,
    #webPartnerStoriesList::-webkit-scrollbar,
    #webHomeNewsScrollContainer::-webkit-scrollbar,
    #companyStickySubNav::-webkit-scrollbar,
    .legal-nav-pills-row::-webkit-scrollbar,
    #webTransitQuickPills::-webkit-scrollbar {
      display: none;
    }

    /* Social Media Hover Cards */
    .social-hover-card:hover {
      transform: translateY(-4px);
      border-color: var(--client-primary) !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
    }

    /* Responsive Media Queries */
    @media (max-width: 1024px) {
      .web-nav-links {
        display: none !important;
      }
      .web-mobile-menu-toggle {
        display: inline-flex !important;
      }
      .web-partner-btn-desktop {
        display: none !important;
      }
      .web-nav {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        gap: 12px !important;
      }
      .web-logo-container {
        gap: 12px !important;
      }
      .web-main-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .bento-slider, .bento-stories-card, .bento-news-section, .bento-widgets-section {
        grid-column: span 12 !important;
      }
      .web-hero {
        flex-direction: column !important;
        text-align: center !important;
        padding: 40px 4% !important;
        gap: 24px !important;
      }
      .web-hero-text {
        max-width: 100% !important;
      }
      .web-hero-illustration {
        display: none !important;
      }
      .web-split-hero {
        flex-direction: column !important;
        text-align: center !important;
        padding: 32px 16px !important;
        gap: 28px !important;
      }
      .hero-left h1 {
        font-size: 2.2rem !important;
      }
      .hero-buttons-row {
        justify-content: center !important;
      }
      .web-projects-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .wide-marketing-banner {
        flex-direction: column !important;
        min-height: auto !important;
        margin: 24px auto !important;
      }
      .banner-img-col {
        height: 190px !important;
        width: 100% !important;
        min-height: 190px !important;
      }
      .banner-text-col {
        padding: 22px 24px !important;
        text-align: left !important;
      }
      .banner-text-col h3 {
        font-size: 1.35rem !important;
      }
    }

    @media (max-width: 900px) {
      .web-home-events-split {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }
      .web-social-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .magazine-article-layout {
        flex-direction: column !important;
        gap: 24px !important;
      }
      #webMagTocContainer {
        width: 100% !important;
        position: static !important;
        top: auto !important;
      }
      .company-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }
      .web-rich-footer {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
      }
      .partner-hero-wrap {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }
    }

    @media (max-width: 768px) {
      .web-utility-bar {
        display: none !important;
      }
      .web-category-strip-wrapper {
        padding: 12px 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .web-category-strip {
        gap: 20px !important;
        padding: 0 16px !important;
      }
      .category-circle-item .circle-icon {
        width: 52px !important;
        height: 52px !important;
      }
      .web-footer {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
      }
      .mayor-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
      }
      .mayor-speech-bubble::before {
        display: none !important;
      }
      .web-transit-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      #companyStickySubNav {
        top: 60px !important;
        gap: 20px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 12px !important;
        margin-bottom: 24px !important;
        flex-wrap: nowrap !important;
      }
      .legal-nav-pills-row, #webTransitQuickPills {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 6px !important;
        flex-wrap: nowrap !important;
      }
    }

    @media (max-width: 640px) {
      /* Collapse all content grids to single column */
      #webGastroTeaserGrid,
      #webHomeJobsGrid,
      #webHomeMagazineGrid,
      #webHelpersGrid,
      #webWeatherForecastGrid,
      #webEventsGrid,
      #webDedicatedNewsGrid,
      #webFinderGrid,
      #webCompaniesGrid,
      #webGastroGrid,
      #webJobsGrid,
      #webMagazineGrid,
      #webMagRelatedGrid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .company-extra-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .web-transit-routing-inputs {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }
      #webTeaserSliderContainer {
        height: 280px !important;
        border-radius: 16px !important;
      }
      .hero-left h1 {
        font-size: 1.75rem !important;
      }
      /* Footer collapse to single centered column */
      .web-rich-footer {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        text-align: center !important;
      }
      .web-rich-footer-col {
        align-items: center !important;
      }
      .web-rich-footer-bottom {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
      }
      /* Modals Responsive */
      #webJobModalContent,
      #webFinderModalContent,
      #webEventModalContent,
      #webNewsModalContent,
      #webRecommendationModal > div {
        width: 95% !important;
        max-width: 95vw !important;
        max-height: 92vh !important;
        padding: 18px 14px !important;
        border-radius: 16px !important;
      }
      #webStoryModal > div {
        width: 94vw !important;
        max-width: 380px !important;
        height: 85vh !important;
        max-height: 640px !important;
        border-radius: 18px !important;
      }
      /* Hero Search Bar */
      .web-hero-search-wrapper {
        padding: 4px 6px 4px 14px !important;
      }
      .web-hero-search-wrapper button {
        padding: 10px 18px !important;
        font-size: 0.8rem !important;
      }
    }

    @media (max-width: 480px) {
      .web-split-hero {
        padding: 20px 12px !important;
      }
      .hero-left h1 {
        font-size: 1.55rem !important;
      }
      .hero-left p {
        font-size: 0.95rem !important;
      }
      #webTeaserSliderContainer {
        height: 220px !important;
      }
      .web-logo span.dynamic-city-name {
        font-size: 1.05rem !important;
      }
    }

/* ==========================================================================
   18. DUOTONE THEME ALTERNATIVE (RELAUNCH SCREENDESIGN RWebStart.dc.html)
   ========================================================================== */

/* State visibility toggles between Duotone & Standard */
body:not(.theme-duotone) .duo-hero-stage {
  display: none !important;
}
body:not(.theme-duotone) .duo-explore-cta-section {
  display: none !important;
}
body:not(.theme-duotone) .duo-brand-logo-svg {
  display: none !important;
}
body:not(.theme-duotone) .viewfinder-corner,
body:not(.theme-duotone) .brand-rhombus-badge,
body:not(.theme-duotone) .duo-events-all-btn {
  display: none !important;
}

body.theme-duotone .web-split-hero-standard {
  display: none !important;
}
body.theme-duotone .default-logo-icon {
  display: none !important;
}
body.theme-duotone .duo-brand-logo-svg {
  display: inline-block !important;
}

/* Duotone Theme Palette & Typography */
body.theme-duotone {
  --duo-primary: var(--client-primary, #2D0A3D);
  --duo-accent: var(--client-accent, #FFE600);
  --duo-primary-rgb: var(--client-primary-rgb, 45, 10, 61);
  --duo-accent-rgb: var(--client-accent-rgb, 255, 230, 0);
  --duo-bg: #FFFFFF;
  --duo-card-bg: #FFFFFF;
  --duo-text-dark: var(--duo-primary);
  --duo-text-muted: rgba(var(--duo-primary-rgb, 45, 10, 61), 0.75);
  --duo-border: var(--duo-primary);
  
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--duo-primary) !important;
  background-color: var(--duo-bg) !important;
}

body.theme-duotone h1,
body.theme-duotone h2,
body.theme-duotone h3,
body.theme-duotone .brand-heading,
body.theme-duotone .web-section-header h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary);
}

/* ==========================================================================
   DUOTONE HIGH-CONTRAST HEADINGS (HERO STAGES, DARK CARDS & MODALS)
   Headlines on dark aubergine backgrounds must always contrast in yellow/white.
   ========================================================================== */
body.theme-duotone .web-duo-detail-hero-info h1,
body.theme-duotone .web-duo-detail-hero-info h2,
body.theme-duotone .web-duo-detail-hero-info h3,
body.theme-duotone .web-events-hero-stage h1,
body.theme-duotone .web-events-hero-stage h2,
body.theme-duotone .web-events-hero-stage h3,
body.theme-duotone .web-events-hero-title,
body.theme-duotone .web-event-single-hero h1,
body.theme-duotone .web-event-single-hero h2,
body.theme-duotone .web-event-single-hero h3,
body.theme-duotone .web-event-single-stage h1,
body.theme-duotone .web-event-single-title,
body.theme-duotone .web-wetter-hero-stage h1,
body.theme-duotone .web-wetter-hero-stage h2,
body.theme-duotone .web-wetter-hero-temp,
body.theme-duotone .web-coupons-hero-stage h1,
body.theme-duotone .web-coupons-hero-stage h2,
body.theme-duotone .web-coupons-hero-title,
body.theme-duotone .web-helfer-hero-stage h1,
body.theme-duotone .web-helfer-hero-stage h2,
body.theme-duotone .web-helfer-hero-title,
body.theme-duotone .web-blitzer-hero-stage h1,
body.theme-duotone .web-blitzer-hero-stage h2,
body.theme-duotone .web-blitzer-hero-title,
body.theme-duotone .web-parking-hero-stage h1,
body.theme-duotone .web-parking-hero-stage h2,
body.theme-duotone .web-parking-hero-title,
body.theme-duotone .web-oepnv-hero-stage h1,
body.theme-duotone .web-oepnv-hero-stage h2,
body.theme-duotone .web-oepnv-hero-title,
body.theme-duotone .web-mag-hero-stage h1,
body.theme-duotone .web-mag-hero-stage h2,
body.theme-duotone .web-mag-hero-title,
body.theme-duotone .web-mag-single-hero h1,
body.theme-duotone .web-mag-single-title,
body.theme-duotone .web-mag-modal-title,
body.theme-duotone .web-jobs-hero-stage h1,
body.theme-duotone .web-jobs-hero-stage h2,
body.theme-duotone .web-jobs-hero-title,
body.theme-duotone .web-job-detail-stage h1,
body.theme-duotone .web-job-detail-stage h2,
body.theme-duotone .web-job-detail-left h1,
body.theme-duotone .web-job-detail-title,
body.theme-duotone .web-finder-hero-stage h1,
body.theme-duotone .web-finder-hero-stage h2,
body.theme-duotone .web-finder-hero-title,
body.theme-duotone .web-news-hero-stage h1,
body.theme-duotone .web-news-hero-stage h2,
body.theme-duotone .web-news-hero-title,
body.theme-duotone .web-gastro-hero-stage h1,
body.theme-duotone .web-gastro-hero-stage h2,
body.theme-duotone .web-gastro-hero-title,
body.theme-duotone .web-partner-hero-stage h1,
body.theme-duotone .web-partner-hero-stage h2,
body.theme-duotone .web-partner-hero-title,
body.theme-duotone .duo-finder-headline {
  color: var(--duo-accent, #FFE600) !important;
}

body.theme-duotone .duo-hero-stage h1,
body.theme-duotone .duo-hero-title,
body.theme-duotone .duo-hero-title span {
  color: #FFFFFF !important;
}

/* Fallback for any hero stage or dark container descendant heading */
body.theme-duotone [class*="hero-stage"] h1,
body.theme-duotone [class*="hero-stage"] h2,
body.theme-duotone [class*="hero-info"] h1,
body.theme-duotone [class*="hero-info"] h2,
body.theme-duotone [class*="dark-block"] h1,
body.theme-duotone [class*="dark-block"] h2,
body.theme-duotone [class*="dark-card"] h1,
body.theme-duotone [class*="dark-card"] h2,
body.theme-duotone .duo-hero-dark-block h1 {
  color: var(--duo-accent, #FFE600) !important;
}

/* 1. Header & Utility Bar */
body.theme-duotone .web-utility-bar {
  background-color: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-bottom: none !important;
}
body.theme-duotone .web-utility-bar a {
  color: var(--duo-accent) !important;
}
body.theme-duotone .web-utility-bar #webUtilityWeather {
  color: var(--duo-accent) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
}
body.theme-duotone .web-utility-bar #webUtilityWeather span {
  color: var(--duo-accent) !important;
  font-weight: 700 !important;
}
body.theme-duotone .web-nav-wrapper {
  background: #FFFFFF !important;
  border-bottom: 2px solid var(--duo-primary) !important;
}
body.theme-duotone .web-nav {
  max-width: 1280px !important;
}
body.theme-duotone .web-logo span.dynamic-city-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone .web-nav-link {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--duo-primary) !important;
  transition: opacity 0.2s ease;
}
body.theme-duotone .web-nav-link:hover {
  opacity: 0.8;
}
body.theme-duotone .web-nav-link.active {
  color: var(--duo-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 3px !important;
  border-bottom: none !important;
}
body.theme-duotone .web-partner-btn-desktop {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 24px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: none !important;
}

/* Duotone Unified Section Layout & Centering */
body.theme-duotone .web-home-section,
body.theme-duotone .web-projects-section,
body.theme-duotone .duo-explore-cta-section {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 72px 24px 0 !important;
  width: 100% !important;
  background-color: transparent !important;
  background-image: none !important;
  box-sizing: border-box !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
body.theme-duotone .web-home-section.section-bg-white,
body.theme-duotone .web-home-section.section-bg-tinted {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  margin: 0 auto !important;
}
body.theme-duotone .web-home-section .web-projects-inner,
body.theme-duotone .web-home-section .web-section-container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Hide duplicate Promo Banner in Duotone mode (Explore CTA is shown instead) */
body.theme-duotone #webHomePromoBannerContainer {
  display: none !important;
}

/* 2. Quick Access / Schnellzugriff Icon Strip */
body.theme-duotone .web-category-strip-wrapper {
  background: transparent !important;
  border-bottom: none !important;
  padding: 10px 0 0 0 !important;
}
body.theme-duotone .web-category-strip {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 20px 24px !important;
  display: grid !important;
  grid-template-columns: repeat(14, minmax(0, 1fr)) !important;
  gap: 14px 4px !important;
  overflow-x: visible !important;
  justify-items: center !important;
}
body.theme-duotone .category-circle-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--duo-primary) !important;
  cursor: pointer;
  text-align: center;
}
body.theme-duotone .category-circle-item span {
  color: var(--duo-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  white-space: nowrap !important;
}
body.theme-duotone .category-circle-item .circle-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 4px auto !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.theme-duotone .category-circle-item:hover .circle-icon {
  transform: translateY(-2px);
  opacity: 0.9;
}
body.theme-duotone .category-circle-item .circle-icon i,
body.theme-duotone .category-circle-item .circle-icon svg {
  color: inherit !important;
  stroke: currentColor !important;
}
/* Alternating yellow background for second group of icons */
body.theme-duotone .category-circle-item[data-preview-module="poi"] .circle-icon,
body.theme-duotone .category-circle-item[data-preview-module="helper"] .circle-icon,
body.theme-duotone .category-circle-item[data-preview-module="blitzer"] .circle-icon,
body.theme-duotone .category-circle-item[data-preview-module="wetter"] .circle-icon,
body.theme-duotone .category-circle-item[data-preview-module="parking"] .circle-icon,
body.theme-duotone .category-circle-item[data-preview-module="transit"] .circle-icon {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
}
/* Empfehlen pill with border outline */
body.theme-duotone .category-circle-item:last-child .circle-icon {
  background: transparent !important;
  border: 2px solid var(--duo-primary) !important;
  color: var(--duo-primary) !important;
}
@media (max-width: 1100px) {
  body.theme-duotone .web-category-strip {
    display: flex !important;
    overflow-x: auto !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    justify-content: flex-start !important;
  }
  body.theme-duotone .web-category-strip::-webkit-scrollbar {
    display: none !important;
  }
}

/* 3. Screendesign Duotone Hero Split & Stage */
body.theme-duotone .web-split-hero {
  max-width: 1280px !important;
  margin: 8px auto 0 !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: stretch !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

:root {
  --duo-img-filter: none;
}

body.theme-duotone .has-duotone-filter,
body.theme-duotone #duoHeroBgImage,
body.theme-duotone .web-story-avatar-img,
body.theme-duotone #webHomeEventsFeatured .client-card > div:first-child,
body.theme-duotone .web-partner-teaser-grid .client-card img,
body.theme-duotone .duo-local-guide-card img,
body.theme-duotone .duo-article-card-media img,
body.theme-duotone .duo-promo-banner-media img,
body.theme-duotone .duo-partner-logo,
body.theme-duotone #webPremiumPartnersStrip .web-premium-partner-card img,
body.theme-duotone #webHomeMagazineGrid .magazine-card-img,
body.theme-duotone #webGastroTeaserGrid .client-card img,
body.theme-duotone #webHomeNewsScrollContainer .web-news-card img,
body.theme-duotone #webHomeNewsScrollContainer .web-news-card [style*="background-image"],
body.theme-duotone img.has-duotone-filter,
body.no-duotone-img-filter .has-duotone-filter,
body.no-duotone-img-filter img {
  filter: none !important;
}

body.theme-duotone #webHomeEventsFeatured .client-card > div:first-child,
body.theme-duotone .web-partner-teaser-grid .client-card > div:first-child,
body.theme-duotone .web-story-avatar-inner {
  background-color: #f3f4f6 !important;
}

.duo-hero-stage,
body.theme-duotone .duo-hero-stage {
  width: 100% !important;
  position: relative !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  min-height: 560px !important;
  background: var(--duo-accent, #FFE600) !important;
  box-shadow: 0 16px 36px rgba(45, 10, 61, 0.08) !important;
  margin-bottom: 0 !important;
  display: block !important;
}
.duo-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: var(--duo-img-filter, url(#city-duotone-filter));
  transition: background-image 0.4s ease;
}
.duo-hero-fav {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: transform 0.2s ease;
}
.duo-hero-fav:hover {
  transform: scale(1.08);
}
.duo-hero-dark-block {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(720px, 100%);
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 36px 0 0;
  padding: 40px 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 4;
}
.duo-hero-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(44px, 5.5vw, 84px) !important;
  letter-spacing: -0.045em !important;
  line-height: 0.9 !important;
  color: #FFFFFF !important;
}
body.theme-duotone .duo-hero-title,
body.theme-duotone .duo-hero-title span {
  color: #FFFFFF !important;
}
.duo-hero-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 54ch;
  color: #FFFFFF !important;
  opacity: 0.95;
}
body.theme-duotone .duo-hero-text {
  color: #FFFFFF !important;
  opacity: 0.95 !important;
}
.duo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  align-items: center;
}
.duo-hero-actions .duo-btn-accent {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border-radius: 26px;
  padding: 14px 22px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  transition: opacity 0.2s;
}
.duo-hero-actions .duo-btn-accent:hover {
  opacity: 0.9;
}
.duo-hero-actions .duo-btn-outline {
  border: 2px solid var(--duo-accent, #FFE600);
  color: var(--duo-accent, #FFE600);
  background: transparent;
  border-radius: 26px;
  padding: 12px 22px;
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.2s, color 0.2s;
}
.duo-hero-actions .duo-btn-outline:hover {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}
.duo-hero-actions .duo-btn-circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.duo-hero-actions .duo-btn-circle:hover {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

/* Floating Yellow Slider Teaser Card */
.duo-hero-slider-card {
  position: absolute;
  right: 24px;
  bottom: 24px;
  max-width: 380px;
  width: calc(100% - 48px);
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border-radius: 28px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.duo-hero-slider-card:hover {
  transform: translateY(-2px);
}
.duo-slider-meta {
  font-weight: 700;
  font-size: 14px;
  opacity: 0.9;
}
.duo-slider-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  color: var(--duo-primary, #2D0A3D) !important;
}
.duo-slider-desc {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
  color: var(--duo-primary, #2D0A3D);
}
.duo-slider-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.duo-slider-cta-text {
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
}
.duo-slider-arrows {
  display: flex;
  gap: 6px;
}
.duo-slider-arrow {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.duo-slider-arrow:hover {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

@media (max-width: 900px) {
  .duo-hero-dark-block {
    position: relative;
    width: 100%;
    border-radius: 0;
    padding: 28px 24px;
  }
  .duo-hero-slider-card {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 16px 24px 24px;
    max-width: none;
    width: calc(100% - 48px);
  }
}

/* 4. Hero Search Bar */
body.theme-duotone .web-hero-search-wrapper {
  background: var(--duo-accent) !important;
  border-radius: 34px !important;
  padding: 8px !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 820px !important;
  width: min(820px, 100%) !important;
  margin: 0 auto !important;
  display: flex !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}
body.theme-duotone .web-hero-search-inner-box {
  background: #FFFFFF !important;
  border-radius: 28px !important;
  height: 52px !important;
  padding: 0 18px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-grow: 1;
}
body.theme-duotone .web-hero-search-inner-box input {
  border: 0 !important;
  outline: none !important;
  font: 500 16px 'DM Sans', sans-serif !important;
  color: var(--duo-primary) !important;
  background: transparent !important;
  width: 100%;
}
body.theme-duotone .web-hero-search-inner-box svg {
  stroke: var(--duo-primary) !important;
}
body.theme-duotone .web-hero-search-btn {
  height: 52px !important;
  padding: 0 26px !important;
  border-radius: 26px !important;
  border: 0 !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  font: 700 16px 'DM Sans', sans-serif !important;
  box-shadow: none !important;
}

/* 5. Partner Stories (Live Status) */
body:not(.theme-duotone) #webPartnerStoriesStrip {
  background-color: var(--client-bg-card, #ffffff);
  border-bottom: 1px solid var(--client-border, #e5e7eb);
  padding: 18px 0;
  display: block;
}
body:not(.theme-duotone) #webPartnerStoriesStrip .web-stories-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
body:not(.theme-duotone) #webPartnerStoriesStrip .web-stories-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
body:not(.theme-duotone) #webPartnerStoriesStrip .web-stories-header h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--client-text);
}
body:not(.theme-duotone) #webPartnerStoriesStrip .web-stories-live-badge {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
body:not(.theme-duotone) #webPartnerStoriesList {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
body:not(.theme-duotone) #webPartnerStoriesList::-webkit-scrollbar {
  display: none;
}
body:not(.theme-duotone) .web-story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  text-align: center;
}
body:not(.theme-duotone) .web-story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  text-align: center;
  width: 68px;
}
body:not(.theme-duotone) .web-story-avatar-ring {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  max-width: 58px;
  max-height: 58px;
  border-radius: 50% !important;
  display: block;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  margin: 0 auto;
}
body:not(.theme-duotone) .web-story-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  overflow: hidden;
  display: block;
  background: #f3f4f6;
}
body:not(.theme-duotone) .web-story-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}
body:not(.theme-duotone) .web-story-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--client-text);
  max-width: 68px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Duotone Stories - Exact Screendesign RWebStart.dc.html (lines 105-113) */
body.theme-duotone #webPartnerStoriesStrip {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 56px 24px 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: block !important;
}
body.theme-duotone #webPartnerStoriesStrip .web-stories-inner {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.theme-duotone #webPartnerStoriesStrip .web-stories-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
body.theme-duotone #webPartnerStoriesStrip .web-stories-header::before {
  content: "" !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 5px !important;
  background: var(--duo-accent) !important;
  box-shadow: 0 0 0 3px var(--duo-primary) !important;
  flex-shrink: 0 !important;
}
body.theme-duotone #webPartnerStoriesStrip .web-stories-header h2 {
  margin: 0 !important;
  font: 900 22px 'Inter', sans-serif !important;
  letter-spacing: -0.02em !important;
  color: var(--duo-primary) !important;
  line-height: 1 !important;
}
body.theme-duotone #webPartnerStoriesStrip .web-stories-live-badge {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 10px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
body.theme-duotone #webPartnerStoriesList {
  display: flex !important;
  gap: 20px !important;
  overflow-x: auto !important;
  padding: 8px 4px 14px 4px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body.theme-duotone #webPartnerStoriesList::-webkit-scrollbar {
  display: none !important;
}
body.theme-duotone .web-story-item {
  width: 92px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  text-align: center !important;
  cursor: pointer !important;
}
body.theme-duotone .web-story-avatar-ring {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  min-height: 84px !important;
  max-width: 84px !important;
  max-height: 84px !important;
  border-radius: 50% !important;
  border: 3px solid var(--duo-primary) !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 auto 6px auto !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}
body.theme-duotone .web-story-avatar-inner {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: var(--duo-accent) !important;
  display: block !important;
  position: relative !important;
}
body.theme-duotone.no-duotone-img-filter .web-story-avatar-inner {
  background: #f3f4f6 !important;
}
body.theme-duotone .web-story-avatar-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  filter: var(--duo-img-filter, url(#city-duotone-filter)) !important;
  display: block !important;
}
body.theme-duotone .web-story-name {
  font: 700 13px 'DM Sans', sans-serif !important;
  color: var(--duo-primary) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 92px !important;
  display: block !important;
}
body.theme-duotone .web-story-item > span:not(.web-story-name) {
  display: none !important;
}

/* 6. Events Section */
body.theme-duotone #webHomeEventsSection {
  background: transparent !important;
  padding: 72px 24px 0 !important;
}
body.theme-duotone #webHomeEventsSection .web-section-header h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
}
body.theme-duotone #btnGoToEventsCalendar {
  display: none !important;
}
body.theme-duotone #webHomeEventsFeatured .client-card {
  border-radius: 32px !important;
  overflow: hidden !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(45, 10, 61, 0.12) !important;
  min-height: 460px !important;
}
body.theme-duotone #webHomeEventsFeatured .client-card > div:first-child {
  height: 270px !important;
  background-color: var(--duo-accent) !important;
  position: relative !important;
  filter: var(--duo-img-filter, url(#city-duotone-filter)) !important;
}
body.theme-duotone #webHomeEventsFeatured .client-card > div:last-child {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 32px 32px 0 0 !important;
  padding: 28px 30px !important;
  border-top: none !important;
}
body.theme-duotone #webHomeEventsFeatured h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone #webHomeEventsFeatured p {
  color: var(--duo-accent) !important;
  font-size: 16px !important;
  opacity: 0.95 !important;
}
body.theme-duotone #webHomeEventsFeatured span {
  color: var(--duo-accent) !important;
}
body.theme-duotone #webHomeEventsFeatured .duo-event-highlight-badge {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webHomeEventsFeatured .duo-event-category-badge {
  background: var(--duo-primary) !important;
  color: #ffffff !important;
}
body.theme-duotone #webHomeEventsFeatured .duo-event-price-badge,
body.theme-duotone #webHomeEventsFeatured .duo-event-price-badge span,
body.theme-duotone #webHomeEventsFeatured .duo-event-price-badge i,
body.theme-duotone #webHomeEventsFeatured .duo-event-price-badge svg {
  background: var(--duo-primary) !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

body.theme-duotone #webHomeEventsList .client-card {
  border-radius: 22px !important;
  border: 2px solid var(--duo-primary) !important;
  padding: 12px 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.theme-duotone #webHomeEventsList .client-card:hover {
  background: rgba(45, 10, 61, 0.04) !important;
}
body.theme-duotone #webHomeEventsList .client-card > div:first-child,
body.theme-duotone #webHomeEventsList .web-home-event-date-badge {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 16px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
body.theme-duotone #webHomeEventsList .client-card > div:first-child span,
body.theme-duotone #webHomeEventsList .client-card > div:first-child b,
body.theme-duotone #webHomeEventsList .web-home-event-date-badge span,
body.theme-duotone #webHomeEventsList .web-home-event-date-badge b {
  color: var(--duo-accent) !important;
}
body.theme-duotone #webHomeEventsList .client-card > div:nth-child(2) span,
body.theme-duotone #webHomeEventsList .client-card > div:nth-child(2) p,
body.theme-duotone #webHomeEventsList .client-card > div:nth-child(2) h4 {
  color: var(--duo-primary) !important;
  background: transparent !important;
  border: none !important;
}
body.theme-duotone #webHomeEventsList .client-card svg,
body.theme-duotone #webHomeEventsList .client-card i {
  color: var(--duo-primary) !important;
  stroke: var(--duo-primary) !important;
}
body.theme-duotone #webHomeEventsList > button,
body.theme-duotone .duo-events-all-btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  border-radius: 22px !important;
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  padding: 14px !important;
  font-weight: 700 !important;
  border: none !important;
  margin-top: 10px !important;
  cursor: pointer !important;
}

/* 7. Social Media Cards ("Bleib auf dem Laufenden!") */
body.theme-duotone #webHomeSocialSection {
  background: transparent !important;
  padding: 72px 24px 0 !important;
}
body.theme-duotone #webHomeSocialSection h2 {
  font-size: 36px !important;
  letter-spacing: -0.03em !important;
}
body.theme-duotone .social-hover-card {
  border-radius: 24px !important;
  border: 2px solid var(--duo-primary) !important;
  background: #FFFFFF !important;
  padding: 20px !important;
  box-shadow: none !important;
}
body.theme-duotone .social-hover-card:hover {
  background: rgba(45, 10, 61, 0.02) !important;
  transform: translateY(-2px);
}
body.theme-duotone .social-hover-card > div:first-child {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .social-hover-card:nth-child(1) > div:first-child svg {
  fill: none !important;
  stroke: var(--duo-accent) !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .social-hover-card:nth-child(2) > div:first-child svg,
body.theme-duotone .social-hover-card:nth-child(3) > div:first-child svg {
  fill: var(--duo-accent) !important;
  stroke: none !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .social-hover-card h4 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  color: var(--duo-primary) !important;
  margin: 0 !important;
}
body.theme-duotone .social-hover-card span {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--duo-primary) !important;
  text-decoration: underline !important;
}
body.theme-duotone .social-hover-card span i,
body.theme-duotone .social-hover-card span svg {
  display: none !important;
}

/* 8. Helper Teaser Section */
body.theme-duotone #webHomeHelperTeaser {
  background: transparent !important;
  padding: 72px 24px 0 !important;
}
body.theme-duotone #webHomeHelperTeaser > div > div {
  border-radius: 36px !important;
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  padding: 48px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}
body.theme-duotone #webHomeHelperTeaser div[style*="opacity: 0.15"] {
  display: none !important;
}
body.theme-duotone .duo-helper-bg-svg {
  display: block !important;
}
body.theme-duotone #webHomeHelperTeaser span[style*="uppercase"] {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
}
body.theme-duotone #webHomeHelperTeaser h2,
body.theme-duotone .duo-helper-headline {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 4vw, 56px) !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone .duo-helper-text-block {
  max-width: 56ch !important;
}
body.theme-duotone #webHomeHelperTeaser p,
body.theme-duotone .duo-helper-desc {
  color: var(--duo-primary) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  max-width: 56ch !important;
}
body.theme-duotone .duo-helper-search-bar {
  border-radius: 26px !important;
  height: 52px !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
}
body.theme-duotone .duo-helper-search-btn,
body.theme-duotone #webHomeHelperTeaser button {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 26px !important;
  height: 52px !important;
  padding: 0 26px !important;
  font: 700 16px 'DM Sans', sans-serif !important;
  border: none !important;
  cursor: pointer !important;
}
body.theme-duotone .duo-helper-pills-label,
body.theme-duotone #webHomeHelperTeaser .duo-helper-pills-row > span:first-child {
  color: var(--duo-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
body.theme-duotone .duo-helper-pill,
body.theme-duotone #webHomeHelperTeaser span[onclick*="triggerWebHomeHelperCategory"] {
  border: 2px solid var(--duo-primary) !important;
  background: transparent !important;
  color: var(--duo-primary) !important;
  border-radius: 18px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
}

/* 9. Premium Partner Section */
body.theme-duotone #webHomePremiumPartnersSection {
  background: transparent !important;
  padding: 72px 24px 0 !important;
}
body.theme-duotone #webHomePremiumPartnersSection h3 {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webHomePremiumPartnersSection span[style*="uppercase"] {
  border: 2px solid var(--duo-primary) !important;
  border-radius: 10px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webPremiumPartnersStrip {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 4px 0 14px 0 !important;
  width: 100% !important;
}
body.theme-duotone #webPremiumPartnersStrip::-webkit-scrollbar {
  display: none !important;
}
body.theme-duotone #webPremiumPartnersStrip .web-premium-partner-card {
  flex: 0 0 auto !important;
  aspect-ratio: 1 !important;
  border-radius: 22px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 92px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
}
body.theme-duotone #webPremiumPartnersStrip .web-premium-partner-card:nth-child(even) {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webPremiumPartnersStrip .web-premium-partner-card img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  display: block !important;
  filter: var(--duo-img-filter, url(#city-duotone-filter)) !important;
}

/* 10. Lokale Partner & Betriebe */
body.theme-duotone #webHomeCompaniesSection {
  background: transparent !important;
  padding: 88px 24px 0 !important;
}
body.theme-duotone #webHomeCompaniesSection .web-section-container > div:first-child {
  text-align: left !important;
  margin-bottom: 24px !important;
}
body.theme-duotone #webHomeCompaniesSection .web-section-container > div:first-child span {
  display: none !important;
}
body.theme-duotone #webHomeCompaniesSection h2 {
  margin: 0 !important;
  font: 900 clamp(32px, 4vw, 44px) 'Inter', sans-serif !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
  line-height: 1 !important;
}
body.theme-duotone #webHomeCompaniesSection p {
  margin: 8px 0 0 !important;
  font-size: 16px !important;
  color: var(--duo-primary) !important;
  font-weight: 500 !important;
}
body.theme-duotone .web-partner-teaser-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 20px !important;
  overflow: visible !important;
  width: 100% !important;
  scroll-snap-type: none !important;
}
@media (max-width: 960px) {
  body.theme-duotone .web-partner-teaser-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  body.theme-duotone .web-partner-teaser-grid {
    grid-template-columns: 1fr !important;
  }
}
body.theme-duotone .web-partner-teaser-grid .client-card {
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 2px solid var(--duo-primary) !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
body.theme-duotone .web-partner-teaser-grid .client-card:hover {
  transform: translateY(-2px);
}
body.theme-duotone .web-partner-teaser-grid .client-card > div:first-child {
  height: 170px !important;
  background: var(--duo-accent) !important;
  position: relative !important;
}
body.theme-duotone .web-partner-teaser-grid .client-card img {
  filter: var(--duo-img-filter, url(#city-duotone-filter)) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body.theme-duotone .web-partner-teaser-grid .client-card h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webHomeCompaniesSection button.client-btn-primary {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 26px !important;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  border: none !important;
}

/* 11. Tippgeber-Programm / Recommendation */
body.theme-duotone #webHomeRecommendationSection {
  background: transparent !important;
  padding: 72px 24px 0 !important;
}
body.theme-duotone .duo-recommendation-card,
body.theme-duotone #webHomeRecommendationSection > div > div {
  max-width: 1280px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 36px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  padding: 48px !important;
  border: none !important;
  box-shadow: none !important;
}
body.theme-duotone .duo-recommendation-content {
  flex: 1 1 520px !important;
  max-width: 60ch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
body.theme-duotone .duo-recommendation-badge-pill,
body.theme-duotone #webHomeRecommendationSection span[style*="uppercase"]:first-child {
  border: 2px solid var(--duo-accent) !important;
  border-radius: 12px !important;
  padding: 2px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .duo-recommendation-reward-pill,
body.theme-duotone #webHomeRecommendationSection span[style*="uppercase"]:last-child {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
}
body.theme-duotone .duo-recommendation-headline,
body.theme-duotone #webHomeRecommendationSection h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .duo-recommendation-desc,
body.theme-duotone #webHomeRecommendationSection p {
  color: var(--duo-accent) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  max-width: 60ch !important;
}
body.theme-duotone #webHomeRecommendationSection strong,
body.theme-duotone #webHomeRecommendationSection b,
body.theme-duotone .duo-highlight-text {
  color: var(--duo-accent) !important;
  font-weight: 700 !important;
}
body.theme-duotone .duo-benefit-item,
body.theme-duotone #webHomeRecommendationSection div[style*="display: flex; gap: 24px;"] > div,
body.theme-duotone #webHomeRecommendationSection .duo-recommendation-benefits > div {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border-radius: 16px !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
body.theme-duotone .duo-benefit-item span,
body.theme-duotone #webHomeRecommendationSection .duo-recommendation-benefits > div span {
  color: var(--duo-primary) !important;
}
body.theme-duotone .duo-benefit-item i,
body.theme-duotone .duo-benefit-item svg {
  display: none !important;
}
body.theme-duotone .duo-recommendation-btn,
body.theme-duotone #webHomeRecommendationSection button.client-btn-primary {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border-radius: 28px !important;
  padding: 16px 26px !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
body.theme-duotone .duo-recommendation-btn i,
body.theme-duotone .duo-recommendation-btn svg {
  display: none !important;
}
body.theme-duotone .duo-recommendation-subtext,
body.theme-duotone #webHomeRecommendationSection span[style*="text-muted"] {
  color: var(--duo-accent) !important;
  opacity: 0.85 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* 12. Gastro Section */
body.theme-duotone #webHomeGastroSection {
  background: transparent !important;
  padding: 88px 24px 0 !important;
}
body.theme-duotone #webHomeGastroSection .web-section-container > div:first-child,
body.theme-duotone #webHomeGastroSection .duo-section-header-wrap {
  text-align: left !important;
}
body.theme-duotone #webHomeGastroSection h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
  text-align: left !important;
}
body.theme-duotone #webHomeGastroSection p {
  text-align: left !important;
}
body.theme-duotone #webGastroTeaserGrid .client-card {
  border-radius: 28px !important;
  border: 2px solid var(--duo-primary) !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
body.theme-duotone #webGastroTeaserGrid .client-card:first-child {
  border-radius: 32px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border: none !important;
}
body.theme-duotone #webGastroTeaserGrid .client-card:first-child h3 {
  color: var(--duo-accent) !important;
}
body.theme-duotone #webGastroTeaserGrid .client-card:first-child p {
  color: var(--duo-accent) !important;
}
body.theme-duotone #webGastroTeaserGrid .client-card img {
  filter: var(--duo-img-filter, url(#city-duotone-filter)) !important;
}
body.theme-duotone .web-gastro-tabs-bar {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
}
body.theme-duotone .web-gastro-clock-badge {
  background: transparent !important;
  color: var(--duo-primary) !important;
  font: 900 18px 'Inter', sans-serif !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body.theme-duotone .web-gastro-tab-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 0 !important;
}
body.theme-duotone .web-gastro-tab-btn {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 22px !important;
  border: 2px solid var(--duo-primary) !important;
  background: transparent !important;
  color: var(--duo-primary) !important;
  font: 700 15px 'DM Sans', sans-serif !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
body.theme-duotone .web-gastro-tab-btn.active {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone #webHomeGastroSection button.client-btn-outline {
  border: 2px solid var(--duo-primary) !important;
  border-radius: 26px !important;
  padding: 12px 26px !important;
  font-weight: 700 !important;
  color: var(--duo-primary) !important;
  background: transparent !important;
}
body.theme-duotone #webHomeGastroSection button.client-btn-outline svg,
body.theme-duotone #webHomeGastroSection button.client-btn-outline i {
  display: none !important;
}

/* 13. Jobs Section */
body.theme-duotone #webHomeJobsSection {
  background: transparent !important;
  padding: 88px 24px 0 !important;
}
body.theme-duotone #webHomeJobsSection h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webHomeJobsGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 20px !important;
}
body.theme-duotone #webHomeJobsGrid .web-partner-teaser-card,
body.theme-duotone #webHomeJobsGrid .client-card {
  border-radius: 28px !important;
  border: 2px solid var(--duo-primary) !important;
  padding: 24px !important;
  box-shadow: none !important;
  color: var(--duo-primary) !important;
  background: #FFFFFF !important;
  height: auto !important;
  min-height: 280px !important;
}
body.theme-duotone #webHomeJobsGrid .web-partner-teaser-card:first-child,
body.theme-duotone #webHomeJobsGrid .client-card:first-child {
  background: var(--duo-accent) !important;
  border: none !important;
}
body.theme-duotone #webHomeJobsGrid h3,
body.theme-duotone #webHomeJobsGrid h4 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webHomeJobsGrid .client-badge,
body.theme-duotone #webHomeJobsGrid span[style*="text-transform: uppercase"] {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-weight: 700 !important;
}
body.theme-duotone #webHomeJobsSection button.client-btn-outline,
body.theme-duotone #webHomeJobsSection a[href*="#jobs"] {
  border: 2px solid var(--duo-primary) !important;
  border-radius: 26px !important;
  padding: 12px 26px !important;
  font-weight: 700 !important;
  color: var(--duo-primary) !important;
  background: transparent !important;
  text-decoration: none !important;
}
body.theme-duotone #webHomeJobsSection button.client-btn-outline svg,
body.theme-duotone #webHomeJobsSection button.client-btn-outline i {
  display: none !important;
}

/* 13b. Homepage Coupons Teaser Section & Ticket Notch Cards */
body.theme-duotone #webHomeCouponsSection {
  background: transparent !important;
  padding: 72px 24px 0 !important;
}
body.theme-duotone #webHomeCouponsSection .web-section-container > div:first-child {
  text-align: left !important;
}
body.theme-duotone #webHomeCouponsSection span[style*="uppercase"] {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--duo-primary) !important;
  letter-spacing: 0.5px !important;
}
body.theme-duotone #webHomeCouponsSection h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(32px, 3.5vw, 44px) !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
  margin: 4px 0 6px !important;
}
body.theme-duotone #webHomeCouponsSection p {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--duo-text-muted, rgba(45, 10, 61, 0.75)) !important;
  margin: 0 !important;
}
body.theme-duotone #webHomeCouponsSection button.client-btn-outline,
body.theme-duotone #webHomeCouponsSection a.client-btn-outline {
  border: 2px solid var(--duo-primary) !important;
  border-radius: 26px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--duo-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}
body.theme-duotone #webHomeCouponsSection button.client-btn-outline:hover,
body.theme-duotone #webHomeCouponsSection a.client-btn-outline:hover {
  background: rgba(45, 10, 61, 0.04) !important;
}
body.theme-duotone #webHomeCouponsSection button.client-btn-outline i,
body.theme-duotone #webHomeCouponsSection button.client-btn-outline svg {
  color: var(--duo-primary) !important;
  stroke: var(--duo-primary) !important;
}

/* Ticket Coupon Cards */
.ticket-coupon-card {
  position: relative;
  background: var(--duo-primary, #2D0A3D);
  color: #FFFFFF;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  overflow: hidden;
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 240px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.ticket-coupon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(45, 10, 61, 0.14);
}

.ticket-coupon-card.coral,
.ticket-coupon-card.accent {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border: 2.5px solid var(--duo-primary, #2D0A3D);
}

.ticket-coupon-card .ticket-company-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--duo-accent, #FFE600);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  display: inline-block;
}
.ticket-coupon-card.coral .ticket-company-title,
.ticket-coupon-card.accent .ticket-company-title {
  color: var(--duo-primary, #2D0A3D);
}

.ticket-coupon-card .ticket-app-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(255, 230, 0, 0.18);
  color: var(--duo-accent, #FFE600);
  border: 1.5px solid var(--duo-accent, #FFE600);
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.ticket-coupon-card.coral .ticket-app-badge,
.ticket-coupon-card.accent .ticket-app-badge {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border: 1.5px solid var(--duo-primary, #2D0A3D);
}

.ticket-coupon-card .ticket-discount-headline {
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
  margin: 12px 0 6px 0;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
.ticket-coupon-card.coral .ticket-discount-headline,
.ticket-coupon-card.accent .ticket-discount-headline {
  color: var(--duo-primary, #2D0A3D);
}

.ticket-subtext {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  min-height: 40px;
}
.ticket-coupon-card.coral .ticket-subtext,
.ticket-coupon-card.accent .ticket-subtext {
  color: rgba(45, 10, 61, 0.85);
}

.ticket-notch-divider {
  position: relative;
  margin: 18px -26px 14px;
  border-top: 2px dashed rgba(255, 230, 0, 0.45);
}
.ticket-coupon-card.coral .ticket-notch-divider,
.ticket-coupon-card.accent .ticket-notch-divider {
  border-top: 2px dashed rgba(45, 10, 61, 0.35);
}

.ticket-notch-divider::before,
.ticket-notch-divider::after {
  content: '';
  position: absolute;
  top: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--duo-bg, #FFFFFF);
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}
.ticket-notch-divider::before {
  left: -13px;
}
.ticket-notch-divider::after {
  right: -13px;
}

.ticket-coupon-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 230, 0, 0.25);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--duo-accent, #FFE600);
}
.ticket-coupon-card.coral .ticket-coupon-code-box,
.ticket-coupon-card.accent .ticket-coupon-code-box {
  background: rgba(45, 10, 61, 0.08);
  border: 1px solid rgba(45, 10, 61, 0.2);
  color: var(--duo-primary, #2D0A3D);
}

.ticket-coupon-code-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border: none;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.ticket-coupon-code-btn:hover {
  opacity: 0.9;
}
.ticket-coupon-card.coral .ticket-coupon-code-btn,
.ticket-coupon-card.accent .ticket-coupon-code-btn {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

/* 14. Finder Teaser Section */
body.theme-duotone #webHomeFinderSection {
  background: transparent !important;
  padding: 72px 24px 0 !important;
}
body.theme-duotone .duo-finder-card,
body.theme-duotone #webHomeFinderSection > div > div {
  border-radius: 36px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  padding: 48px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}
body.theme-duotone #webHomeFinderSection div[style*="opacity: 0.15"] {
  display: none !important;
}
body.theme-duotone .duo-finder-bg-svg {
  display: block !important;
}
body.theme-duotone .duo-finder-badge,
body.theme-duotone #webHomeFinderSection span[style*="uppercase"] {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
body.theme-duotone .duo-finder-content {
  max-width: 56ch !important;
}
body.theme-duotone .duo-finder-headline,
body.theme-duotone #webHomeFinderSection h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 4vw, 54px) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: var(--duo-accent) !important;
  white-space: normal !important;
  word-break: break-word !important;
}
body.theme-duotone .duo-finder-desc,
body.theme-duotone #webHomeFinderSection p {
  color: var(--duo-accent) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  max-width: 56ch !important;
}
body.theme-duotone .duo-finder-search-bar {
  border-radius: 26px !important;
  height: 52px !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
}
body.theme-duotone .duo-finder-search-btn,
body.theme-duotone #webHomeFinderSection button {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border-radius: 26px !important;
  height: 52px !important;
  padding: 0 26px !important;
  font: 700 16px 'DM Sans', sans-serif !important;
  border: none !important;
  cursor: pointer !important;
}
body.theme-duotone .duo-finder-pills-label {
  color: var(--duo-accent) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
body.theme-duotone .duo-finder-pill,
body.theme-duotone #webHomeFinderSection span[onclick*="triggerWebHomeFinderCategory"] {
  border: 2px solid var(--duo-accent) !important;
  color: var(--duo-accent) !important;
  background: transparent !important;
  border-radius: 18px !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
}
body.theme-duotone .duo-finder-pill i,
body.theme-duotone .duo-finder-pill svg,
body.theme-duotone #webHomeFinderSection span[onclick*="triggerWebHomeFinderCategory"] i,
body.theme-duotone #webHomeFinderSection span[onclick*="triggerWebHomeFinderCategory"] svg {
  display: none !important;
}

/* 15. News Section */
body.theme-duotone #webHomeNewsSection {
  background: transparent !important;
  padding: 88px 24px 0 !important;
}
body.theme-duotone #webHomeNewsSection h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webHomeNewsSection span[onclick*="window.location.hash"] {
  color: var(--duo-primary) !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}
body.theme-duotone #webHomeNewsScrollContainer {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 40px) / 3) !important;
  gap: 20px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  padding: 0 0 12px 0 !important;
}
@media (max-width: 960px) {
  body.theme-duotone #webHomeNewsScrollContainer {
    grid-auto-columns: calc((100% - 20px) / 2) !important;
  }
}
@media (max-width: 640px) {
  body.theme-duotone #webHomeNewsScrollContainer {
    grid-auto-columns: 85% !important;
  }
}
body.theme-duotone #webHomeNewsScrollContainer .web-news-card {
  width: auto !important;
  height: auto !important;
  min-height: 300px !important;
  flex: none !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
body.theme-duotone #webHomeNewsScrollContainer .web-news-card:first-child {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border: none !important;
  padding: 26px !important;
}
body.theme-duotone #webHomeNewsScrollContainer .web-news-card:first-child span,
body.theme-duotone #webHomeNewsScrollContainer .web-news-card:first-child p,
body.theme-duotone #webHomeNewsScrollContainer .web-news-card:first-child h4 {
  color: var(--duo-accent) !important;
}
body.theme-duotone #webHomeNewsScrollContainer .web-news-card:first-child span[style*="uppercase"] {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border-radius: 10px !important;
  padding: 2px 10px !important;
}
body.theme-duotone #webHomeNewsScrollContainer .web-news-card:not(:first-child) {
  border: 2px solid var(--duo-primary) !important;
  background: #FFFFFF !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webHomeNewsScrollContainer .web-news-card:not(:first-child) span[style*="uppercase"] {
  border: 2px solid var(--duo-primary) !important;
  background: transparent !important;
  color: var(--duo-primary) !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
}
body.theme-duotone #webHomeNewsScrollContainer .web-news-card img,
body.theme-duotone #webHomeNewsScrollContainer .web-news-card [style*="background-image"] {
  filter: var(--duo-img-filter, url(#city-duotone-filter)) !important;
}
body.theme-duotone #webHomeNewsScrollContainer .web-news-card h4 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
body.theme-duotone #btnWebHomeNewsScrollNext {
  display: flex !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border: 2px solid var(--duo-primary) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 4px 14px rgba(45, 10, 61, 0.15) !important;
}
body.theme-duotone #btnWebHomeNewsScrollNext svg,
body.theme-duotone #btnWebHomeNewsScrollNext i {
  color: var(--duo-accent) !important;
  stroke: var(--duo-accent) !important;
}
body.theme-duotone #webHomeNewsSection div[style*="justify-content: center"] {
  display: none !important;
}
body.theme-duotone .duo-news-card-shield,
body.theme-duotone .duo-news-card-photo {
  padding: 0 !important;
  overflow: hidden !important;
}
body.theme-duotone .duo-news-card-shield > div:first-child,
body.theme-duotone .duo-news-card-photo > div:first-child {
  margin: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
}

/* 16. Transit (ÖPNV) Section */
body.theme-duotone #webHomeTransitTeaser {
  background: transparent !important;
  padding: 88px 24px 0 !important;
}
body.theme-duotone #webHomeTransitTeaser .duo-section-header-wrap,
body.theme-duotone #webHomeTransitTeaser .web-section-container > div:first-child {
  text-align: left !important;
}
body.theme-duotone #webHomeTransitTeaser .duo-section-header-wrap p,
body.theme-duotone #webHomeTransitTeaser .web-section-container > div:first-child p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  color: var(--duo-primary) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  max-width: 100% !important;
}
body.theme-duotone #webHomeTransitTeaser .duo-transit-header-pill {
  background: transparent !important;
  color: var(--duo-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 0 !important;
  margin-left: 0 !important;
}
body.theme-duotone #webHomeTransitTeaser .duo-transit-live-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 5px !important;
  background: var(--duo-primary) !important;
}
body.theme-duotone #webHomeTransitTeaser h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
  text-align: left !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
}
body.theme-duotone .duo-transit-grid {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Left: Live Departures Card */
body.theme-duotone .duo-transit-left-card {
  border-radius: 32px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border: none !important;
  padding: 28px !important;
  box-shadow: none !important;
}
body.theme-duotone .duo-transit-left-card h3,
body.theme-duotone #webHomeTransitStationTitle {
  color: var(--duo-accent) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
}
body.theme-duotone .duo-transit-station-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  font: 900 24px 'Inter', sans-serif !important;
  display: grid !important;
  place-items: center !important;
}
body.theme-duotone .duo-transit-status-badge {
  color: var(--duo-accent) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
body.theme-duotone .duo-transit-status-badge span {
  background: var(--duo-accent) !important;
}
body.theme-duotone .duo-transit-open-btn {
  border: 2px solid var(--duo-accent) !important;
  border-radius: 18px !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: transparent !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone button[id^="webHomeTransitBtn_"] {
  border-radius: 18px !important;
  border: 2px solid var(--duo-accent) !important;
  background: transparent !important;
  color: var(--duo-accent) !important;
  font-weight: 700 !important;
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}
body.theme-duotone button[id^="webHomeTransitBtn_"].client-btn-primary {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone .duo-transit-departure-row {
  border-top: 1px solid var(--duo-accent) !important;
  padding: 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .duo-transit-departure-row:last-child {
  border-bottom: 1px solid var(--duo-accent) !important;
  margin-bottom: 18px !important;
}
body.theme-duotone .duo-transit-bottom-btn {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border-radius: 24px !important;
  padding: 14px !important;
  font-weight: 700 !important;
  border: none !important;
  font-size: 15px !important;
  justify-content: center !important;
}
body.theme-duotone .duo-transit-bottom-btn i,
body.theme-duotone .duo-transit-bottom-btn svg {
  display: none !important;
}

/* Right: Routing Card */
body.theme-duotone .duo-transit-right-card {
  border-radius: 32px !important;
  border: 2px solid var(--duo-primary) !important;
  padding: 28px !important;
  background: #FFFFFF !important;
  color: var(--duo-primary) !important;
  box-shadow: none !important;
}
body.theme-duotone .duo-transit-route-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  display: grid !important;
  place-items: center !important;
}
body.theme-duotone .duo-transit-right-card h3 {
  color: var(--duo-primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
}
body.theme-duotone .duo-transit-right-card span {
  color: var(--duo-primary) !important;
}
body.theme-duotone .duo-transit-start-label,
body.theme-duotone .duo-transit-dest-label {
  color: var(--duo-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
body.theme-duotone .duo-transit-input-wrap {
  border: 2px solid var(--duo-primary) !important;
  border-radius: 16px !important;
  background: transparent !important;
  padding: 0 16px !important;
  height: 50px !important;
  box-sizing: border-box !important;
}
body.theme-duotone .duo-transit-start-pin,
body.theme-duotone .duo-transit-dest-pin {
  display: none !important;
}
body.theme-duotone .duo-transit-input-wrap input {
  height: 100% !important;
  border: none !important;
  color: var(--duo-primary) !important;
  font: 700 16px 'DM Sans', sans-serif !important;
  background: transparent !important;
  padding: 0 !important;
}
body.theme-duotone .duo-transit-right-card > div > div:last-child {
  color: var(--duo-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}
body.theme-duotone .duo-transit-right-card div[style*="border-top"] {
  border-top: none !important;
}
body.theme-duotone .duo-transit-search-btn {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 26px !important;
  height: 52px !important;
  font: 700 16px 'DM Sans', sans-serif !important;
  border: none !important;
  width: 100% !important;
  justify-content: center !important;
}
body.theme-duotone .duo-transit-search-btn i,
body.theme-duotone .duo-transit-search-btn svg {
  display: none !important;
}

/* 17. Bento: Wetter, Blitzer, Parken */
body.theme-duotone #webHomeWeatherBlitzerSection {
  background: transparent !important;
  padding: 88px 24px 0 !important;
}
body.theme-duotone #webHomeWeatherBlitzerSection .duo-section-header-wrap,
body.theme-duotone #webHomeWeatherBlitzerSection .web-section-header {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
body.theme-duotone #webHomeWeatherBlitzerSection .duo-section-header-wrap p,
body.theme-duotone #webHomeWeatherBlitzerSection .web-section-header p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  color: var(--duo-primary) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  max-width: 100% !important;
}
body.theme-duotone #webHomeWeatherBlitzerSection h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
  text-align: left !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
}
body.theme-duotone #webHomeWeatherBlitzerSection .web-section-header > span {
  color: var(--duo-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Wetter Card */
body.theme-duotone .client-card[data-preview-module="wetter"] {
  border-radius: 28px !important;
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border: none !important;
  padding: 24px !important;
  box-shadow: none !important;
}
body.theme-duotone .client-card[data-preview-module="wetter"] div[style*="padding: 8px; border-radius: 10px"] {
  display: none !important;
}
body.theme-duotone .client-card[data-preview-module="wetter"] i,
body.theme-duotone .client-card[data-preview-module="wetter"] svg {
  display: none !important;
}
body.theme-duotone .client-card[data-preview-module="wetter"] h4 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone .client-card[data-preview-module="wetter"] .weather-location-label {
  color: var(--duo-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
body.theme-duotone .client-card[data-preview-module="wetter"] #webHomeWeatherForecastPreview > div {
  border-radius: 16px !important;
  background: #FFFFFF !important;
  color: var(--duo-primary) !important;
  padding: 10px 4px !important;
}
body.theme-duotone .client-card[data-preview-module="wetter"] div[style*="border-top"] {
  border-top: none !important;
  color: var(--duo-primary) !important;
  padding-top: 0 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  font-size: 15px !important;
}
body.theme-duotone .client-card[data-preview-module="wetter"] div[style*="border-top"] * {
  color: var(--duo-primary) !important;
}

/* Blitzer Card */
body.theme-duotone .client-card[data-preview-module="blitzer"] {
  border-radius: 28px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border: none !important;
  padding: 24px !important;
  box-shadow: none !important;
}
body.theme-duotone .client-card[data-preview-module="blitzer"] div[style*="padding: 8px; border-radius: 10px"] {
  display: none !important;
}
body.theme-duotone .client-card[data-preview-module="blitzer"] i,
body.theme-duotone .client-card[data-preview-module="blitzer"] svg {
  display: none !important;
}
body.theme-duotone .client-card[data-preview-module="blitzer"] h4 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .client-card[data-preview-module="blitzer"] span {
  color: var(--duo-accent) !important;
}
body.theme-duotone .blitzer-speed-badge {
  width: 48px !important;
  height: 48px !important;
  border-radius: 24px !important;
  border: 4px solid var(--duo-accent) !important;
  background: transparent !important;
  color: var(--duo-accent) !important;
  font: 900 16px 'Inter', sans-serif !important;
}
body.theme-duotone .client-card[data-preview-module="blitzer"] div[style*="border-top"] {
  border-top: none !important;
  color: var(--duo-accent) !important;
  padding-top: 0 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  font-size: 15px !important;
}
body.theme-duotone .client-card[data-preview-module="blitzer"] div[style*="border-top"] * {
  color: var(--duo-accent) !important;
}

/* Parking Card */
body.theme-duotone .client-card[data-preview-module="parking"] {
  border-radius: 28px !important;
  border: 2px solid var(--duo-primary) !important;
  background: #FFFFFF !important;
  color: var(--duo-primary) !important;
  padding: 24px !important;
  box-shadow: none !important;
}
body.theme-duotone .client-card[data-preview-module="parking"] div[style*="padding: 8px; border-radius: 10px"] {
  display: none !important;
}
body.theme-duotone .client-card[data-preview-module="parking"] i,
body.theme-duotone .client-card[data-preview-module="parking"] svg {
  display: none !important;
}
body.theme-duotone .client-card[data-preview-module="parking"] h4 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone .client-card[data-preview-module="parking"] span {
  color: var(--duo-primary) !important;
}
body.theme-duotone .duo-progress-track {
  height: 10px !important;
  border-radius: 5px !important;
  border: 2px solid var(--duo-primary) !important;
  background: transparent !important;
}
body.theme-duotone .duo-progress-fill {
  background: var(--duo-primary) !important;
}
body.theme-duotone .duo-progress-number {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone .client-card[data-preview-module="parking"] div[style*="border-top"] {
  border-top: none !important;
  color: var(--duo-primary) !important;
  padding-top: 0 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  font-size: 15px !important;
}
body.theme-duotone .client-card[data-preview-module="parking"] div[style*="border-top"] * {
  color: var(--duo-primary) !important;
}

/* Gastro Side Card explicitly */
body.theme-duotone .gastro-side-card {
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
}

/* 18. Roulette Section */
body.theme-duotone #webHomeRouletteSection {
  background: transparent !important;
  padding: 88px 24px 0 !important;
}
body.theme-duotone #webHomeRouletteSection .duo-section-header-wrap,
body.theme-duotone #webHomeRouletteSection .web-section-header {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
body.theme-duotone #webHomeRouletteSection .duo-section-header-wrap p,
body.theme-duotone #webHomeRouletteSection .web-section-header p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  color: var(--duo-primary) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  max-width: 100% !important;
}
body.theme-duotone #webHomeRouletteSection h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
  text-align: left !important;
}
body.theme-duotone #webGastroRouletteCard,
body.theme-duotone .duo-gastro-roulette-card,
body.theme-duotone .client-card[data-preview-module="roulette"]:first-of-type {
  border-radius: 32px !important;
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border: none !important;
  padding: 28px !important;
}
body.theme-duotone #webGastroRouletteCard h4,
body.theme-duotone #webGastroRouletteCard span,
body.theme-duotone #webGastroRouletteCard label,
body.theme-duotone #webGastroRouletteCard i,
body.theme-duotone #webGastroRouletteCard svg {
  color: var(--duo-primary) !important;
}
body.theme-duotone #webEventRouletteCard,
body.theme-duotone .duo-event-roulette-card,
body.theme-duotone .client-card[data-preview-module="roulette"]:last-of-type {
  border-radius: 32px !important;
  border: 2px solid var(--duo-primary) !important;
  background: #FFFFFF !important;
  color: var(--duo-primary) !important;
  padding: 28px !important;
}
body.theme-duotone #webEventRouletteCard h4,
body.theme-duotone #webEventRouletteCard span,
body.theme-duotone #webEventRouletteCard label,
body.theme-duotone #webEventRouletteCard i,
body.theme-duotone #webEventRouletteCard svg {
  color: var(--duo-primary) !important;
}
body.theme-duotone select#webGastroRouletteCatSelect,
body.theme-duotone select#webEventRouletteCatSelect {
  height: 48px !important;
  border-radius: 16px !important;
  border: 2px solid var(--duo-primary) !important;
  color: var(--duo-primary) !important;
  background: #FFFFFF !important;
  font: 700 15px 'DM Sans', sans-serif !important;
}
body.theme-duotone #btnWebRouletteSpin,
body.theme-duotone #btnWebEventRouletteSpin {
  height: 52px !important;
  border-radius: 26px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  font: 700 16px 'DM Sans', sans-serif !important;
  border: none !important;
}
body.theme-duotone #webRouletteSpinner {
  width: 110px !important;
  height: 110px !important;
  border-radius: 55px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border: none !important;
}
body.theme-duotone #webRouletteSpinner svg,
body.theme-duotone #webRouletteSpinner i {
  color: var(--duo-accent) !important;
  width: 44px !important;
  height: 44px !important;
}
body.theme-duotone #webEventRouletteSpinner {
  width: 110px !important;
  height: 110px !important;
  border-radius: 55px !important;
  background: var(--duo-accent) !important;
  color: var(--duo-primary) !important;
  border: none !important;
}
body.theme-duotone #webEventRouletteSpinner svg,
body.theme-duotone #webEventRouletteSpinner i {
  color: var(--duo-primary) !important;
  width: 44px !important;
  height: 44px !important;
}

/* 19. Magazin Section */
body.theme-duotone #webHomeMagazineSection {
  background: transparent !important;
  padding: 88px 24px 0 !important;
}
body.theme-duotone #webHomeMagazineSection h2 {
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  color: var(--duo-primary) !important;
}
body.theme-duotone #webHomeMagazineSection p {
  max-width: 100% !important;
}
body.theme-duotone #webHomeMagazineSection button.client-btn-outline,
body.theme-duotone #webHomeMagazineSection a[href*="#magazin"] {
  border: 2px solid var(--duo-primary) !important;
  border-radius: 26px !important;
  padding: 12px 22px !important;
  font-weight: 700 !important;
  color: var(--duo-primary) !important;
  text-decoration: none !important;
}
body.theme-duotone #webHomeMagazineGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 20px !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card,
body.theme-duotone #webHomeMagazineGrid .client-card {
  position: relative !important;
  min-height: 460px !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-img-wrapper {
  position: absolute !important;
  inset: 0 0 200px 0 !important;
  background: var(--duo-accent) !important;
  height: auto !important;
  overflow: hidden !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: var(--duo-img-filter, url(#city-duotone-filter)) !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-badges {
  position: absolute !important;
  left: 16px !important;
  top: 16px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 2 !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-badge {
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-time {
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  background: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  z-index: 2 !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-body {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 230px !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: var(--duo-primary) !important;
  border-radius: 32px 32px 0 0 !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-meta span {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--duo-accent) !important;
  margin: 0 !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-teaser {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #FFFFFF !important;
  opacity: 0.9 !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  margin: 2px 0 6px 0 !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-footer {
  margin-top: auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 14px !important;
  border-top: none !important;
  padding-top: 0 !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-author img {
  display: none !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-author-name {
  color: var(--duo-accent) !important;
  font-weight: 500 !important;
}
body.theme-duotone #webHomeMagazineGrid .magazine-card-footer span {
  color: var(--duo-accent) !important;
  font-weight: 900 !important;
}
body.theme-duotone #webHomeMagazineSection > div > div:last-child {
  display: none !important;
}

/* 20. Explore CTA Banner ("Raus aus den vier Wänden. Rein in die Stadt.") */
body.theme-duotone #webHomeExploreCtaSection,
body.theme-duotone .duo-explore-cta-section {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 88px 24px 0 !important;
  display: block !important;
}
.duo-explore-cta-card {
  display: flex;
  flex-wrap: wrap;
  border-radius: 36px;
  overflow: hidden;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  box-shadow: 0 16px 36px rgba(45, 10, 61, 0.06);
}
.duo-explore-cta-img-wrap {
  flex: 1 1 420px;
  min-height: 380px;
  position: relative;
  background: var(--duo-accent, #FFE600);
}
.duo-explore-cta-body {
  flex: 1 1 420px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.duo-explore-cta-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(36px, 4.5vw, 56px) !important;
  letter-spacing: -0.035em !important;
  line-height: 0.95 !important;
  color: var(--duo-primary, #2D0A3D) !important;
}
.duo-explore-cta-subtitle {
  font-weight: 700;
  font-size: 20px;
  color: var(--duo-primary, #2D0A3D);
}
.duo-explore-cta-text {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--duo-primary, #2D0A3D);
}
.duo-explore-cta-body .duo-btn-primary {
  align-self: flex-start;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 26px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: opacity 0.2s;
}
.duo-explore-cta-body .duo-btn-primary:hover {
  opacity: 0.9;
}

/* 21. Footer */
body.theme-duotone .web-rich-footer-wrapper {
  margin-top: 96px !important;
  background-color: var(--duo-primary) !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .web-rich-footer {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 56px 24px 32px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 32px !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .web-rich-footer h4,
body.theme-duotone .web-rich-footer p,
body.theme-duotone .web-rich-footer a,
body.theme-duotone .web-rich-footer span {
  color: var(--duo-accent) !important;
}
body.theme-duotone #webFooterAppsCol a {
  border: 2px solid var(--duo-accent) !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone #webFooterSocialCol a {
  border: 2px solid var(--duo-accent) !important;
  border-radius: 14px !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .web-rich-footer-col a:hover {
  opacity: 0.85;
}
body.theme-duotone .web-rich-footer-bottom {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 18px 24px 28px !important;
  border-top: 1px solid var(--duo-accent) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--duo-accent) !important;
}
body.theme-duotone .web-rich-footer-bottom div,
body.theme-duotone .web-rich-footer-bottom span {
  color: var(--duo-accent) !important;
}

/* Design Switcher Button in Utility Bar */
.theme-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #ffffff;
  transition: all 0.2s ease;
  user-select: none;
  font-family: 'DM Sans', sans-serif;
}
.theme-switch-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.theme-switch-btn.active-duo {
  background: var(--duo-accent, #FFE600) !important;
  color: var(--duo-primary, #2D0A3D) !important;
  border-color: var(--duo-accent, #FFE600) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Dynamic Duotone Photo Filter */
.has-duotone-filter {
  filter: var(--duo-img-filter, url(#city-duotone-filter));
  transition: filter 0.3s ease;
}

/* ==========================================================================
   WETTER RELAUNCH (DUOTONE DESIGN)
   ========================================================================== */
.web-wetter-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
  box-sizing: border-box;
}

.web-wetter-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  box-sizing: border-box;
}

.web-wetter-hero-subline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.web-wetter-stand-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
}

.web-wetter-warn-toggle-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 13px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.web-wetter-warn-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.web-wetter-warn-toggle-btn.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-hero-main-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.web-wetter-hero-left {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

body.theme-duotone .web-wetter-hero-stage h1,
body.theme-duotone .web-wetter-hero-temp,
.web-wetter-hero-temp {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(84px, 10vw, 140px) !important;
  letter-spacing: -0.06em !important;
  line-height: 0.82 !important;
  color: var(--duo-accent, #FFE600) !important;
}

.web-wetter-hero-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--duo-accent, #FFE600);
}

.web-wetter-hero-range {
  font-size: 16px;
  font-weight: 500;
  color: var(--duo-accent, #FFE600);
  opacity: 0.95;
}

.web-wetter-stats-grid {
  flex: 0 1 560px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.web-wetter-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 22px;
  border: 2px solid var(--duo-accent, #FFE600);
  padding: 14px 18px;
  background: transparent;
  color: var(--duo-accent, #FFE600);
  box-sizing: border-box;
}

.web-wetter-stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
  opacity: 0.9;
}

.web-wetter-stat-value {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--duo-accent, #FFE600);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.web-wetter-stat-card {
  min-width: 0;
}

.web-wetter-stat-suffix {
  margin-left: 6px;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.9;
}

/* Warnings Banner in Hero */
.web-wetter-warning-safe {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 22px;
  border: 2px solid var(--duo-accent, #FFE600);
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--duo-accent, #FFE600);
  width: 100%;
  box-sizing: border-box;
}

.web-wetter-warning-alert {
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 26px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 20px 24px;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.web-wetter-warning-alert .alert-icon-box {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
}

.web-wetter-warning-alert .alert-pill {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.web-wetter-warning-alert .alert-pill-outline {
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  color: var(--duo-primary, #2D0A3D);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.web-wetter-warning-alert .alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.web-wetter-warning-alert .alert-btn:hover {
  opacity: 0.9;
}

/* Main Content Section */
.web-wetter-main-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

.web-wetter-box {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 32px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 28px 30px 30px;
  background: #FFFFFF;
  box-sizing: border-box;
}

.web-wetter-box-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-wetter-box-header h2 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-box-header span {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

/* Hourly Grid */
.web-wetter-hourly-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.web-wetter-hourly-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 10px 4px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--duo-primary, #2D0A3D);
}
.web-wetter-hourly-slot:hover {
  background: rgba(var(--duo-primary-rgb, 45, 10, 61), 0.05);
}
.web-wetter-hourly-slot.is-selected {
  background: var(--duo-accent, #FFE600);
  box-shadow: 0 0 0 2px var(--duo-primary, #2D0A3D);
}

.web-wetter-hourly-slot .slot-time {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-hourly-slot .slot-desc {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--duo-primary, #2D0A3D);
}

/* 3-Tage Trend Grid */
.web-wetter-trend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.web-wetter-trend-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}

.web-wetter-trend-card.is-today {
  background: var(--duo-accent, #FFE600);
}

.web-wetter-trend-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.web-wetter-trend-card-top b {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-trend-card-top span {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-trend-condition {
  font-size: 17px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-temp-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.web-wetter-temp-bar-row b {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  width: 44px;
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-temp-bar-track {
  flex-grow: 1;
  position: relative;
  height: 12px;
  border-radius: 6px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.web-wetter-temp-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: var(--duo-primary, #2D0A3D);
}

.web-wetter-temp-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

/* App Download Banner */
.web-wetter-app-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 26px 30px;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.web-wetter-app-banner b {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-app-banner p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
}

.web-wetter-app-btn {
  display: inline-block;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.web-wetter-app-btn:hover {
  opacity: 0.9;
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 900px) {
  .web-wetter-hero-main-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-wetter-stats-grid {
    flex: 1 1 100%;
  }
  .web-wetter-trend-grid {
    grid-template-columns: 1fr;
  }
  .web-wetter-hourly-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .web-wetter-app-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .web-wetter-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-wetter-hero-left {
    gap: 16px;
  }
  .web-wetter-box {
    padding: 20px 16px;
  }
}

/* ==========================================================================
   ÖPNV & ABFAHRTEN RELAUNCH (DUOTONE DESIGN)
   ========================================================================== */
.web-oepnv-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
  box-sizing: border-box;
}

.web-oepnv-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-oepnv-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-oepnv-hero-text-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.web-oepnv-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600) !important;
}

body.theme-duotone .web-oepnv-hero-title,
.web-oepnv-hero-stage .web-oepnv-hero-title,
.web-oepnv-hero-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 64px;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--duo-accent, #FFE600) !important;
}

.web-oepnv-hero-desc {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-accent, #FFE600) !important;
}

.web-oepnv-mode-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 26px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  flex-shrink: 0;
}

.web-oepnv-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 0;
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.web-oepnv-mode-btn.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-hero-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.web-oepnv-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 360px;
  max-width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 0 20px;
  position: relative;
  box-sizing: border-box;
}

.web-oepnv-search-input {
  border: 0;
  outline: none;
  font: 500 16px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  flex-grow: 1;
  background: transparent;
  min-width: 0;
}

.web-oepnv-search-input::placeholder {
  color: rgba(45, 10, 61, 0.55);
}

.web-oepnv-pills-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-oepnv-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-oepnv-pill:hover {
  opacity: 0.9;
}

.web-oepnv-pill.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

/* Main Container */
.web-oepnv-main-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

/* Map Box */
.web-oepnv-map-box {
  position: relative;
  height: 420px;
  border-radius: 32px;
  overflow: hidden;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #f8fafc;
}

/* Leaflet custom marker reset for Duotone ÖPNV pins */
.web-oepnv-leaflet-marker {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.web-oepnv-map-pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 5px;
  border-radius: 19px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 10, 61, 0.22);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
  pointer-events: auto;
}

.web-oepnv-map-pin:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(45, 10, 61, 0.32);
  border-color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-map-pin.is-active {
  background: var(--duo-accent, #FFE600) !important;
  color: var(--duo-primary, #2D0A3D) !important;
  transform: scale(1.09);
  box-shadow: 0 6px 22px rgba(45, 10, 61, 0.4);
  z-index: 1000 !important;
}

.web-oepnv-map-pin-badge {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600) !important;
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

.web-oepnv-map-pin-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: inherit;
}

.web-oepnv-map-zoom {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  overflow: hidden;
  z-index: 10;
}

.web-oepnv-map-zoom button {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 900 20px 'Inter', sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.web-oepnv-map-zoom button + button {
  border-top: 2px solid var(--duo-primary, #2D0A3D);
}

.web-oepnv-map-attribution {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.9);
  color: var(--duo-primary, #2D0A3D);
  border-radius: 8px;
  padding: 3px 8px;
  z-index: 10;
}

/* Departures Board Box */
.web-oepnv-board-box {
  border-radius: 32px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 28px 30px 18px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}

.web-oepnv-board-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.web-oepnv-board-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-oepnv-board-title {
  margin: 0;
  font: 900 40px 'Inter', sans-serif;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-board-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-live-pill {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.web-oepnv-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-oepnv-fav-btn.is-active {
  background: var(--duo-accent, #FFE600);
}

.web-oepnv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 0 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-oepnv-subfilter-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-oepnv-subfilter-btn.is-active {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

/* Departure Rows */
.web-oepnv-dep-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--duo-primary, #2D0A3D);
  transition: background 0.15s ease;
}

.web-oepnv-badge-tram {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font: 900 26px 'Inter', sans-serif;
}

.web-oepnv-badge-bus {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 26px;
  border: 3px solid var(--duo-primary, #2D0A3D);
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font: 900 24px 'Inter', sans-serif;
}

.web-oepnv-dep-center {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.web-oepnv-dep-headsign {
  font: 900 16.5px 'Inter', sans-serif;
  letter-spacing: -0.015em;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.web-oepnv-dep-subline {
  font-size: 13px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.web-oepnv-dep-countdown-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
  flex-shrink: 0;
  margin-left: 10px;
}

.web-oepnv-countdown-now {
  font: 800 12.5px 'DM Sans', sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border-radius: 8px;
  padding: 3px 8px;
  display: inline-block;
  line-height: 1.25;
}

.web-oepnv-countdown-time {
  font: 800 15px 'DM Sans', sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--duo-primary, #2D0A3D);
  line-height: 1.25;
}

.web-oepnv-dep-plan-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--duo-text-muted, rgba(45, 10, 61, 0.7));
  white-space: nowrap;
}

.web-oepnv-dep-plan-time {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-more-btn {
  align-self: center;
  margin: 18px 0 14px;
  height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-oepnv-more-btn:hover {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

/* Bottom Grid (Liniennetz + App Banner) */
.web-oepnv-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.web-oepnv-lines-card {
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-lines-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.web-oepnv-lines-legend {
  display: flex;
  gap: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.web-oepnv-lines-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-oepnv-line-tram-mini {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font: 900 20px 'Inter', sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.web-oepnv-line-bus-mini {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 3px solid var(--duo-primary, #2D0A3D);
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font: 900 18px 'Inter', sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.web-oepnv-line-tram-mini:hover,
.web-oepnv-line-bus-mini:hover {
  transform: scale(1.08);
}

.web-oepnv-app-card {
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-app-card b {
  font: 900 22px 'Inter', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.web-oepnv-app-card span {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.web-oepnv-app-card-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.web-oepnv-app-btn {
  flex: 1;
  text-align: center;
  border-radius: 20px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 11px 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.web-oepnv-app-btn:hover {
  opacity: 0.9;
}

/* Modus 2: Von A nach B (Routing) */
.web-oepnv-routing-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.web-oepnv-routing-form-card {
  flex: 0 0 440px;
  border-radius: 32px;
  background: var(--duo-accent, #FFE600);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}

.web-oepnv-routing-title {
  margin: 0;
  font: 900 32px 'Inter', sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-field-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-input-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  border-radius: 20px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 0 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  box-sizing: border-box;
  position: relative;
}

.web-oepnv-input-box input {
  border: none;
  outline: none;
  background: transparent;
  flex-grow: 1;
  font: 700 16px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-input-clear {
  border: none;
  background: none;
  font-size: 20px;
  color: var(--duo-primary, #2D0A3D);
  cursor: pointer;
  padding: 0 4px;
}

.web-oepnv-swap-btn {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-oepnv-swap-btn:hover {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-oepnv-quick-dest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-oepnv-quick-dest-pill {
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 18px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-oepnv-quick-dest-pill:hover {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-oepnv-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  border-radius: 20px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
}

.web-oepnv-submit-btn {
  height: 56px;
  border-radius: 28px;
  border: 0;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 17px 'DM Sans', sans-serif;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.2s ease;
}

.web-oepnv-submit-btn:hover {
  opacity: 0.9;
}

/* Routing Results Column */
.web-oepnv-routing-results-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.web-oepnv-routing-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-oepnv-routing-header h2 {
  margin: 0;
  font: 900 30px 'Inter', sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-routing-header span {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-connection-card {
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  transition: transform 0.15s ease;
}

.web-oepnv-connection-card.is-fastest {
  background: var(--duo-accent, #FFE600);
}

.web-oepnv-conn-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.web-oepnv-conn-line-badge-tram {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font: 900 22px 'Inter', sans-serif;
}

.web-oepnv-conn-line-badge-bus {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 3px solid var(--duo-primary, #2D0A3D);
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font: 900 20px 'Inter', sans-serif;
}

.web-oepnv-conn-meta {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.web-oepnv-conn-duration {
  font: 900 26px 'Inter', sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-conn-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-fastest-pill {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.web-oepnv-conn-countdown {
  font: 900 20px 'Inter', sans-serif;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-conn-grid {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 6px 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-conn-grid b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.web-oepnv-stops-toggle {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--duo-primary, #2D0A3D);
  user-select: none;
}

.web-oepnv-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(45, 10, 61, 0.15);
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 6px;
}

.web-oepnv-dropdown-item {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(45, 10, 61, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s ease;
  color: var(--duo-primary, #2D0A3D);
}

.web-oepnv-dropdown-item:hover {
  background: rgba(255, 230, 0, 0.25);
}

/* Media Queries */
@media (max-width: 900px) {
  .web-oepnv-hero-title {
    font-size: 44px;
  }
  .web-oepnv-bottom-grid {
    grid-template-columns: 1fr;
  }
  .web-oepnv-routing-layout {
    flex-direction: column;
  }
  .web-oepnv-routing-form-card {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .web-oepnv-hero-title {
    font-size: 36px;
  }
  .web-oepnv-mode-toggle {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 3px !important;
  }
  .web-oepnv-mode-btn {
    flex: 1 1 0 !important;
    padding: 0 8px !important;
    height: 38px !important;
    font-size: 13px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }
  .web-oepnv-mode-btn span {
    white-space: nowrap !important;
  }
  .web-oepnv-search-bar {
    width: 100%;
  }
  .web-oepnv-board-box {
    padding: 20px 16px;
  }
  .web-oepnv-board-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .web-oepnv-board-header-left {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .web-oepnv-board-title {
    font-size: 26px !important;
    word-break: break-word !important;
  }
  .web-oepnv-fav-btn {
    align-self: flex-start !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .web-oepnv-dep-row {
    gap: 10px !important;
  }
  .web-oepnv-badge-tram,
  .web-oepnv-badge-bus {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }
  .web-oepnv-dep-headsign {
    font-size: 14.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .web-oepnv-dep-subline {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .web-oepnv-countdown-now {
    font-size: 11.5px !important;
    padding: 2px 6px !important;
  }
  .web-oepnv-countdown-time {
    font-size: 13.5px !important;
  }
  .web-oepnv-dep-plan-time {
    font-size: 11px !important;
  }
}

/* ============================================================
   DUOTONE WEB PARKEN SECTION
   ============================================================ */

/* 1. Curved Hero Stage */
.web-parking-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
  box-sizing: border-box;
}

.web-parking-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.web-parking-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-parking-hero-text-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.web-parking-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600) !important;
}

body.theme-duotone .web-parking-hero-title,
.web-parking-hero-stage .web-parking-hero-title,
.web-parking-hero-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 64px;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--duo-accent, #FFE600) !important;
}

.web-parking-hero-desc {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-accent, #FFE600) !important;
}

/* Hero KPI Stat Box */
.web-parking-hero-kpi {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 26px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 18px 24px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.web-parking-hero-kpi-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-hero-kpi-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-hero-kpi-sub {
  font-weight: 500;
  font-size: 13px;
  opacity: 0.85;
}

/* Hero Bottom Bar: Filters & Map Toggle */
.web-parking-hero-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.web-parking-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-parking-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.web-parking-pill:hover {
  background: rgba(255, 230, 0, 0.15);
}

.web-parking-pill.is-active {
  background: var(--duo-accent, #FFE600) !important;
  color: var(--duo-primary, #2D0A3D) !important;
}

.web-parking-map-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.web-parking-map-toggle-btn.is-inactive {
  background: transparent;
  color: var(--duo-accent, #FFE600);
}

/* 2. Map Section */
.web-parking-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.web-parking-map-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.web-parking-map-box {
  position: relative;
  height: 460px;
  border-radius: 32px;
  overflow: hidden;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #fdfae5;
  box-shadow: 0 4px 16px rgba(45, 10, 61, 0.08);
}

.web-parking-map-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
}

/* Custom Leaflet Map Pin for Parking */
.web-parking-leaflet-marker {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.web-parking-map-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-width: 60px;
  padding: 0 14px;
  border-radius: 22px;
  border: 3px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D) !important;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 10, 61, 0.2);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
  pointer-events: auto;
}

.web-parking-map-pin:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(45, 10, 61, 0.3);
}

.web-parking-map-pin.is-selected {
  background: var(--duo-primary, #2D0A3D) !important;
  color: var(--duo-accent, #FFE600) !important;
  transform: scale(1.1);
  box-shadow: 0 6px 22px rgba(45, 10, 61, 0.4);
  z-index: 1000 !important;
}

.web-parking-map-pin-type {
  font-size: 14px;
  font-weight: 900;
  opacity: 0.75;
}

.web-parking-map-pin-capacity {
  font-size: 16px;
  font-weight: 900;
}

/* Custom Zoom Box on Map */
.web-parking-map-zoom {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  overflow: hidden;
  z-index: 10;
}

.web-parking-map-zoom button {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 900 20px 'Inter', sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.web-parking-map-zoom button + button {
  border-top: 2px solid var(--duo-primary, #2D0A3D);
}

.web-parking-map-attribution {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.88);
  color: var(--duo-primary, #2D0A3D);
  border-radius: 8px;
  padding: 2px 8px;
  z-index: 10;
}

/* 3. Parkflächen Section & Grid */
.web-parking-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.web-parking-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-parking-header-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D) !important;
}

.web-parking-header-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Parkkarte */
.web-parking-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  padding: 22px 24px;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.18s ease;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 10, 61, 0.12);
}

.web-parking-card.is-selected {
  background: var(--duo-accent, #FFE600) !important;
  box-shadow: 0 8px 24px rgba(45, 10, 61, 0.18);
}

/* Card Header */
.web-parking-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.web-parking-card-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
}

.web-parking-card-main {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-parking-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.web-parking-badge {
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  padding: 2px 9px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--duo-primary, #2D0A3D);
  background: transparent;
}

.web-parking-badge.is-urgent {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-color: var(--duo-primary, #2D0A3D);
}

.web-parking-card-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-card-addr {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.9;
}

.web-parking-tariff-line,
.web-parking-card-tariff-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(45, 10, 61, 0.07);
  width: fit-content;
  margin-top: 2px;
}

.web-parking-card-fav {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-parking-card-fav:hover {
  transform: scale(1.08);
}

.web-parking-card-fav.is-fav {
  background: var(--duo-accent, #FFE600);
}

.web-parking-card-fav.is-fav svg path {
  fill: currentColor;
}

/* Card Capacity & Progress */
.web-parking-capacity-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.web-parking-cap-num-col {
  display: flex;
  flex-direction: column;
}

.web-parking-cap-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 52px;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-cap-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-progress-wrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}

.web-parking-progress-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-progress-track {
  height: 14px;
  border-radius: 7px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  overflow: hidden;
  display: block;
  background: transparent;
}

.web-parking-progress-bar {
  display: block;
  height: 100%;
  background: var(--duo-primary, #2D0A3D);
  transition: width 0.3s ease;
}

.web-parking-progress-bar.is-striped {
  background: repeating-linear-gradient(135deg, var(--duo-primary, #2D0A3D) 0 5px, var(--duo-accent, #FFE600) 5px 9px) !important;
}

/* Card Action Buttons */
.web-parking-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.web-parking-btn-route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600) !important;
  font: 700 15px 'DM Sans', sans-serif;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.web-parking-btn-route:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.web-parking-btn-details {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.web-parking-btn-details:hover {
  transform: translateY(-1px);
  background: rgba(45, 10, 61, 0.06);
}

/* Empty State */
.web-parking-empty-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}

.web-parking-empty-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 24px;
}

.web-parking-empty-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* 4. Modal Preise & Zeiten */
.web-parking-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 10, 61, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.web-parking-modal-box {
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 28px;
  border: 3px solid var(--duo-primary, #2D0A3D);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 16px 40px rgba(45, 10, 61, 0.3);
  box-sizing: border-box;
}

.web-parking-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.web-parking-modal-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-modal-addr {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #4b5563;
  margin-top: 2px;
}

.web-parking-modal-close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  font: 900 18px 'Inter', sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.web-parking-modal-stat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--duo-accent, #FFE600);
  border-radius: 16px;
  padding: 12px 16px;
}

.web-parking-modal-stat-left {
  display: flex;
  flex-direction: column;
}

.web-parking-modal-fee-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-modal-cap-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--duo-primary, #2D0A3D);
}

.web-parking-modal-hours-badge {
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 12px;
  font-weight: 800;
}

.web-parking-modal-tariffs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px 16px;
}

.web-parking-modal-tariff-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
}

.web-parking-modal-tariff-row b {
  font-weight: 800;
  color: var(--duo-primary, #2D0A3D);
}

/* Media Queries */
@media (max-width: 992px) {
  .web-parking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-parking-hero-title {
    font-size: 48px;
  }
}

@media (max-width: 640px) {
  .web-parking-grid {
    grid-template-columns: 1fr;
  }
  .web-parking-hero-title {
    font-size: 38px;
  }
  .web-parking-hero-kpi {
    width: 100%;
    justify-content: space-between;
  }
  .web-parking-map-box {
    height: 340px;
  }
  .web-parking-capacity-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-parking-progress-wrap {
    width: 100%;
  }
}

/* ==========================================================================
   DUOTONE RELAUNCH: BLITZER SECTION
   ========================================================================== */

/* 1. Curved Hero Stage */
.web-blitzer-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.web-blitzer-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-blitzer-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-blitzer-hero-text-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.web-blitzer-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
}

body.theme-duotone .web-blitzer-hero-title,
.web-blitzer-hero-stage .web-blitzer-hero-title,
.web-blitzer-hero-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 64px !important;
  letter-spacing: -0.045em !important;
  line-height: 0.9 !important;
  color: var(--duo-accent, #FFE600) !important;
}

.web-blitzer-hero-desc {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-accent, #FFE600);
}

/* KPI Box */
.web-blitzer-hero-kpi {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 26px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 18px 24px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.web-blitzer-hero-kpi-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--duo-primary, #2D0A3D);
}

.web-blitzer-hero-kpi-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--duo-primary, #2D0A3D);
}

.web-blitzer-hero-kpi-sub {
  font-weight: 500;
  display: block;
}

/* Filter Bar & StVO Warning */
.web-blitzer-hero-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.web-blitzer-filter-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.web-blitzer-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-blitzer-pill:hover {
  opacity: 0.9;
}

.web-blitzer-pill.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-blitzer-stvo-note {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--duo-accent, #FFE600);
}

/* 2. Main Content & Layout */
.web-blitzer-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  box-sizing: border-box;
  width: 100%;
}

.web-blitzer-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Map Box & Leaflet Custom Controls */
.web-blitzer-map-wrapper {
  width: 100%;
}

.web-blitzer-map-box {
  position: relative;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #f8fafc;
}

.web-blitzer-map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.web-blitzer-map-zoom {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1000;
  border-radius: 16px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.web-blitzer-map-zoom button {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 900 20px 'Inter', sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}

.web-blitzer-map-zoom button:hover {
  background: rgba(45, 10, 61, 0.06);
}

.web-blitzer-map-zoom button + button {
  border-top: 2px solid var(--duo-primary, #2D0A3D);
}

.web-blitzer-map-legend {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1000;
  display: flex;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  padding: 6px 12px;
  color: var(--duo-primary, #2D0A3D);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.web-blitzer-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-blitzer-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: 3px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  box-sizing: border-box;
}

.web-blitzer-legend-dot.is-selected {
  background: var(--duo-accent, #FFE600);
}

.web-blitzer-map-attribution {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 1000;
  font-size: 11px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  padding: 3px 8px;
  color: var(--duo-primary, #2D0A3D);
}

/* Leaflet Custom DivIcon Marker */
.web-blitzer-leaflet-marker {
  background: transparent !important;
  border: 0 !important;
}

.web-blitzer-map-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.web-blitzer-map-pin:hover {
  transform: scale(1.08);
}

.web-blitzer-map-pin-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 6px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.web-blitzer-map-pin.is-selected .web-blitzer-map-pin-circle {
  background: var(--duo-accent, #FFE600);
}

.web-blitzer-map-pin-pill {
  border-radius: 10px;
  padding: 2px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

.web-blitzer-map-pin-pill.is-static {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-blitzer-map-pin-pill.is-mobile {
  background: #FFFFFF;
  border: 2px solid var(--duo-primary, #2D0A3D);
  color: var(--duo-primary, #2D0A3D);
}

/* 3. Messstellen Cards & Grid */
.web-blitzer-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.web-blitzer-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-blitzer-header-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-blitzer-header-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-blitzer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.web-blitzer-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  padding: 24px;
  color: var(--duo-primary, #2D0A3D);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.web-blitzer-card:hover {
  box-shadow: 0 10px 24px rgba(45, 10, 61, 0.06);
}

.web-blitzer-card.is-selected {
  background: var(--duo-accent, #FFE600);
}

.web-blitzer-card-top {
  display: flex;
  gap: 18px;
  align-items: center;
}

.web-blitzer-card-speed {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 8px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 27px;
  letter-spacing: -0.03em;
  box-sizing: border-box;
}

.web-blitzer-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.web-blitzer-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.web-blitzer-type-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.web-blitzer-type-badge.is-static {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 3px 10px;
  border-radius: 10px;
}

.web-blitzer-type-badge.is-mobile {
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 2px 9px;
  border-radius: 10px;
}

.web-blitzer-time-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-blitzer-card-street {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  color: var(--duo-primary, #2D0A3D);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-blitzer-card-city {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.9;
}

.web-blitzer-card-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex: none;
}

.web-blitzer-card-map-btn:hover {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

/* Card Feedback Section */
.web-blitzer-card-feedback {
  border-top: 1px solid var(--duo-primary, #2D0A3D);
  padding-top: 16px;
  margin-top: 2px;
}

.web-blitzer-feedback-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.web-blitzer-feedback-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  margin: 0;
}

.web-blitzer-feedback-btns {
  display: flex;
  gap: 8px;
}

.web-blitzer-vote-yes {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 0;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
}

.web-blitzer-vote-yes:hover {
  opacity: 0.9;
}

.web-blitzer-vote-no {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}

.web-blitzer-vote-no:hover {
  background: rgba(45, 10, 61, 0.08);
}

.web-blitzer-feedback-thanks {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

/* Empty State */
.web-blitzer-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  border: 2.5px dashed var(--duo-primary, #2D0A3D);
  border-radius: 28px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  gap: 12px;
  box-sizing: border-box;
}

.web-blitzer-empty-state h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  margin: 0;
  color: var(--duo-primary, #2D0A3D);
}

.web-blitzer-empty-state p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  margin: 0;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.8;
  max-width: 480px;
}

/* 4. Community Reporting Banner */
.web-blitzer-community-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 28px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 24px 26px;
  margin-top: 8px;
  box-sizing: border-box;
}

.web-blitzer-banner-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
}

.web-blitzer-banner-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
}

.web-blitzer-banner-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--duo-accent, #FFE600);
}

.web-blitzer-banner-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--duo-accent, #FFE600);
  opacity: 0.95;
}

.web-blitzer-banner-btn {
  flex: none;
  height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  border-radius: 24px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.web-blitzer-banner-btn:hover {
  transform: scale(1.02);
  opacity: 0.95;
}

/* 5. Modal Dialog */
.web-blitzer-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.web-blitzer-modal-dialog {
  background: #FFFFFF;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: webBlitzerModalIn 0.2s ease-out;
  box-sizing: border-box;
}

@keyframes webBlitzerModalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.web-blitzer-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid var(--duo-primary, #2D0A3D);
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-blitzer-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  flex: none;
}

.web-blitzer-modal-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 20px;
  margin: 0;
  color: var(--duo-accent, #FFE600);
}

.web-blitzer-modal-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  margin: 2px 0 0 0;
  opacity: 0.9;
  color: var(--duo-accent, #FFE600);
}

.web-blitzer-modal-close {
  border: 0;
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

.web-blitzer-modal-form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.web-blitzer-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-blitzer-form-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-blitzer-form-input,
.web-blitzer-form-select {
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  outline: none;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
  width: 100%;
}

.web-blitzer-form-input:focus,
.web-blitzer-form-select:focus {
  border-color: var(--duo-accent, #FFE600);
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35);
}

.web-blitzer-form-alert {
  padding: 10px 14px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.web-blitzer-form-alert.is-success {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.web-blitzer-form-alert.is-error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.web-blitzer-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.web-blitzer-modal-btn-cancel {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
}

.web-blitzer-modal-btn-submit {
  height: 44px;
  padding: 0 22px;
  border-radius: 22px;
  border: 0;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
}

.web-blitzer-modal-btn-submit:hover {
  opacity: 0.9;
}

/* 6. Media Queries */
@media (max-width: 992px) {
  .web-blitzer-grid {
    grid-template-columns: 1fr;
  }
  .web-blitzer-hero-title {
    font-size: 48px !important;
  }
}

@media (max-width: 640px) {
  .web-blitzer-hero-title {
    font-size: 38px !important;
  }
  .web-blitzer-hero-kpi {
    width: 100%;
    justify-content: space-between;
  }
  .web-blitzer-map-box {
    height: 340px;
  }
  .web-blitzer-card-top {
    flex-wrap: wrap;
  }
  .web-blitzer-community-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   DUOTONE WEB MAGAZIN MODULE (ÜBERSICHT & SINGLE READER)
   Matching Screendesign Resources/Screendesign/Webdesign/Magazin
   ========================================================================== */

/* 1. Magazin Hub Hero Stage */
.web-mag-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
  box-sizing: border-box;
}

.web-mag-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-mag-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-mag-hero-text-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.web-mag-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0.9;
}

body.theme-duotone .web-mag-hero-title,
.web-mag-hero-stage .web-mag-hero-title,
.web-mag-hero-title {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  font-size: 64px;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--duo-accent, #FFE600) !important;
}

.web-mag-hero-desc {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: #FFFFFF;
  opacity: 0.92;
}

.web-mag-kpi,
.web-mag-hero-kpi {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 26px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 18px 24px;
  flex-shrink: 0;
}

.web-mag-kpi-num,
.web-mag-hero-kpi-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-hero-kpi-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-hero-kpi-sub {
  font-weight: 500;
  opacity: 0.85;
}

/* Search bar */
.web-mag-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.web-mag-search-bar,
.web-mag-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 360px;
  max-width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 0 20px;
  box-sizing: border-box;
}

.web-mag-search-input {
  border: 0;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--duo-primary, #2D0A3D);
  flex-grow: 1;
  background: transparent;
  min-width: 0;
}

.web-mag-search-input::placeholder {
  color: rgba(45, 10, 61, 0.55);
}

/* Filter Pills */
.web-mag-pills-row,
.web-mag-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-mag-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.web-mag-pill:hover {
  background: rgba(255, 230, 0, 0.15);
}

.web-mag-pill.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-pill-count {
  opacity: 0.75;
  font-weight: 600;
}

/* 2. Main Articles Area */
.web-mag-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

.web-mag-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.web-mag-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-mag-header-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-header-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

/* Grid & Cards */
.web-mag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.web-mag-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  overflow: hidden;
  background: #FFFFFF;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.web-mag-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(45, 10, 61, 0.08);
}

.web-mag-card-img-wrap {
  position: relative;
  display: block;
  height: 220px;
  background: var(--duo-accent, #FFE600);
  overflow: hidden;
}

.web-mag-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-mag-card-badges {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.web-mag-badge-cat {
  background: #FFFFFF;
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
}

.web-mag-badge-ad {
  background: var(--duo-accent, #FFE600);
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
}

.web-mag-card-time {
  position: absolute;
  right: 14px;
  top: 14px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.web-mag-card-body {
  flex-grow: 1;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.web-mag-card-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--duo-primary, #2D0A3D);
  margin: 0;
  text-decoration: none;
}

.web-mag-card:hover .web-mag-card-title {
  color: #111827;
}

.web-mag-card-teaser {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.9;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.web-mag-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--duo-primary, #2D0A3D);
  display: flex;
  align-items: center;
  gap: 10px;
}

.web-mag-card-author {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 12px;
  overflow: hidden;
}

.web-mag-card-author-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-mag-card-author-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.web-mag-author-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-mag-author-role {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-mag-card-read-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
}

/* Pitch Card (Story Proposal) */
.web-mag-pitch-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 26px;
  min-height: 420px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.web-mag-pitch-card:hover {
  transform: translateY(-3px);
}

.web-mag-pitch-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
}

.web-mag-pitch-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--duo-primary, #2D0A3D);
  margin: 0;
}

.web-mag-pitch-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-pitch-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

/* Load more button & Empty State */
.web-mag-load-more {
  align-self: center;
  margin-top: 12px;
  height: 54px;
  padding: 0 28px;
  border-radius: 27px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-mag-load-more:hover {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-mag-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #FFFFFF;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  color: var(--duo-primary, #2D0A3D);
}

/* Modal styles (Topic pitch) */
.web-mag-modal-overlay,
.web-mag-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45, 10, 61, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.web-mag-modal-card,
.web-mag-modal-dialog {
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  width: 100%;
  max-width: 580px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  box-sizing: border-box;
  animation: duoFadeScale 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.web-mag-modal-header {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.web-mag-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
}

.web-mag-modal-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--duo-accent, #FFE600);
}

.web-mag-modal-sub {
  margin: 2px 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #FFFFFF;
  opacity: 0.85;
}

.web-mag-modal-close {
  background: transparent;
  border: 0;
  color: var(--duo-accent, #FFE600);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

.web-mag-modal-form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.web-mag-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-mag-form-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-form-input,
.web-mag-form-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--duo-primary, #2D0A3D);
  outline: none;
  background: #FFFFFF;
}

.web-mag-form-input:focus,
.web-mag-form-textarea:focus {
  border-color: var(--duo-primary, #2D0A3D);
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.45);
}

.web-mag-form-alert {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

.web-mag-form-alert.is-error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #F87171;
}

.web-mag-form-alert.is-success {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}

.web-mag-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.web-mag-modal-btn-cancel {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.web-mag-modal-btn-submit {
  height: 44px;
  padding: 0 24px;
  border-radius: 22px;
  border: 0;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.web-mag-modal-btn-submit:hover {
  opacity: 0.9;
}

/* ==========================================================================
   3. SINGLE ARTICLE READER (RWebArtikel)
   ========================================================================== */

.web-mag-single-hero {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding-bottom: 180px;
  width: 100%;
  box-sizing: border-box;
}

.web-mag-single-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-mag-single-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.web-mag-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  color: var(--duo-accent, #FFE600);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-mag-back-btn:hover {
  background: rgba(255, 230, 0, 0.15);
}

.web-mag-single-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}

.web-mag-single-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--duo-accent, #FFE600);
}

.web-mag-single-header-main {
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
}

body.theme-duotone .web-mag-single-title,
.web-mag-single-hero .web-mag-single-title,
.web-mag-single-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 72px;
  letter-spacing: -0.05em;
  line-height: 0.94;
  color: var(--duo-accent, #FFE600) !important;
}

.web-mag-single-subtitle {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  color: #FFFFFF;
  opacity: 0.95;
}

.web-mag-single-author-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
}

.web-mag-single-author-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 18px;
  overflow: hidden;
}

.web-mag-single-author-info {
  display: flex;
  flex-direction: column;
}

.web-mag-single-author-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #FFFFFF;
}

.web-mag-single-author-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--duo-accent, #FFE600);
}

/* Floating Hero Image (Overlaps by -150px) */
.web-mag-detail-hero-media,
.web-mag-single-image-wrap {
  max-width: 1280px;
  margin: -150px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.web-mag-single-image-box {
  height: 560px;
  border-radius: 36px;
  overflow: hidden;
  border: 3px solid #FFFFFF;
  background: var(--duo-accent, #FFE600);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.web-mag-single-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-mag-single-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.85;
}

/* Main single article content */
.web-mag-single-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}

.web-mag-single-column {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

/* TOC Box */
.web-mag-toc-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 20px 22px;
  background: #FFFFFF;
}

.web-mag-toc-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--duo-primary, #2D0A3D);
  padding-bottom: 2px;
}

.web-mag-toc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}

.web-mag-toc-item {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.web-mag-toc-item:hover {
  background: rgba(255, 230, 0, 0.35);
}

.web-mag-toc-item.is-active {
  background: var(--duo-accent, #FFE600);
}

.web-mag-toc-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 15px;
  flex: none;
}

/* Lead Teaser Quote */
.web-mag-lead-quote {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.35;
  padding-left: 22px;
  border-left: 6px solid var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

/* Article Body Styles */
.web-mag-article-body {
  display: flex;
  flex-direction: column;
  gap: 36px;
  color: var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
}

.web-mag-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.web-mag-section-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 15px;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-section-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-section-p {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--duo-primary, #2D0A3D);
}

/* Embedded Event Recommendation Card */
.web-mag-event-card {
  display: flex;
  gap: 20px;
  align-items: center;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 16px;
  margin: 10px 0;
  background: #FFFFFF;
  text-decoration: none;
  color: var(--duo-primary, #2D0A3D);
  transition: transform 0.2s ease;
}

.web-mag-event-card:hover {
  transform: translateY(-2px);
}

.web-mag-event-img-wrap {
  flex: none;
  width: 150px;
  height: 110px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--duo-accent, #FFE600);
}

.web-mag-event-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-mag-event-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-mag-event-badges {
  display: flex;
  gap: 6px;
}

.web-mag-event-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-event-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.85;
}

.web-mag-event-date-box {
  flex: none;
  width: 60px;
  height: 64px;
  border-radius: 18px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.web-mag-event-btn {
  flex: none;
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Highlight Tip Box */
.web-mag-tip-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 26px 28px;
  box-sizing: border-box;
}

.web-mag-tip-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* Partner Recommendations Slider / Carousel */
.web-mag-partners-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 36px 0 20px 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.web-mag-partners-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.web-mag-partners-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.web-mag-partners-title {
  font: 900 28px Inter, sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-partners-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.web-mag-slider-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(45, 10, 61, 0.08);
  padding: 0;
}

.web-mag-slider-arrow:hover:not(:disabled) {
  background: var(--duo-accent, #FFE600);
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(45, 10, 61, 0.16);
}

.web-mag-slider-arrow:active:not(:disabled) {
  transform: scale(0.96);
}

.web-mag-slider-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}

.web-mag-partners-track,
.web-mag-partners-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px 14px 2px;
  margin: 0 -2px;
}

.web-mag-partners-track::-webkit-scrollbar,
.web-mag-partners-grid::-webkit-scrollbar {
  display: none;
}

.web-mag-partner-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  overflow: hidden;
  background: #FFFFFF;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: calc((100% - 32px) / 3);
  max-width: calc((100% - 32px) / 3);
  scroll-snap-align: start;
  box-sizing: border-box;
}

.web-mag-partner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(45, 10, 61, 0.12);
}

.web-mag-partner-img-wrap {
  display: block;
  height: 130px;
  background: var(--duo-accent, #FFE600);
  overflow: hidden;
}

.web-mag-partner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-mag-partner-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Share Bar */
.web-mag-share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  border-top: 3px solid var(--duo-primary, #2D0A3D);
  width: 100%;
  box-sizing: border-box;
}

.web-mag-share-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  margin-right: 6px;
}

.web-mag-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-mag-share-btn:hover {
  background: rgba(45, 10, 61, 0.08);
}

.web-mag-share-btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 0;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.web-mag-share-btn-accent:hover {
  opacity: 0.9;
}

/* Author Card */
.web-mag-bio-card,
.web-mag-author-card {
  display: flex;
  gap: 18px;
  align-items: center;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 22px 24px;
  background: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
}

.web-mag-author-card-avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 25px;
  overflow: hidden;
}

.web-mag-author-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-mag-author-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.web-mag-author-card-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-author-card-name {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-author-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.9;
}

/* Related articles */
.web-mag-related-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.web-mag-related-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-mag-related-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-mag-related-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
}

.web-mag-related-link:hover {
  text-decoration: underline;
}

.web-mag-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .web-mag-grid,
  .web-mag-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-mag-partner-card {
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }
}

@media (max-width: 768px) {
  .web-mag-hero-title {
    font-size: 44px !important;
  }
  .web-mag-single-title {
    font-size: 46px !important;
  }
  .web-mag-grid,
  .web-mag-related-grid {
    grid-template-columns: 1fr;
  }
  .web-mag-single-image-box {
    height: 340px;
  }
  .web-mag-single-image-wrap {
    margin-top: -90px;
  }
  .web-mag-single-hero {
    padding-bottom: 120px;
  }
  .web-mag-toc-grid {
    grid-template-columns: 1fr;
  }
  .web-mag-partner-card {
    flex: 0 0 calc(100% - 44px);
    min-width: calc(100% - 44px);
    max-width: calc(100% - 44px);
  }
  .web-mag-partners-header {
    align-items: center;
  }
  .web-mag-slider-arrow {
    width: 38px;
    height: 38px;
  }
  .web-mag-event-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-mag-event-img-wrap {
    width: 100%;
    height: 160px;
  }
  .web-mag-author-card {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .web-mag-hero-top-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-mag-hero-kpi {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
  }
  .web-mag-search-wrap {
    width: 100%;
  }
}

/* ==========================================================================
   DUOTONE HELPER / HELFER MODULE (RELAUNCH)
   ========================================================================== */

.web-helfer-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
  box-sizing: border-box;
}

.web-helfer-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.web-helfer-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-helfer-hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.web-helfer-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
}

.web-helfer-hero-title {
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 64px;
  letter-spacing: -0.045em;
  line-height: .9;
  color: var(--duo-accent, #FFE600);
}

body.theme-duotone .web-helfer-hero-title {
  color: var(--duo-accent, #FFE600) !important;
}

.web-helfer-hero-desc {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-accent, #FFE600);
  opacity: 0.95;
}

.web-helfer-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 420px;
  max-width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 0 20px;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.web-helfer-search-wrap input {
  border: 0;
  outline: none;
  font: 500 16px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  flex-grow: 1;
  background: transparent;
  min-width: 0;
}

.web-helfer-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.web-helfer-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.web-helfer-pill:hover {
  background: rgba(255, 230, 0, 0.15);
}

.web-helfer-pill.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

/* Main Content Area */
.web-helfer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

/* Emergency Box (Im Notfall) */
.web-helfer-emergency-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 32px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 28px 30px;
  box-sizing: border-box;
}

.web-helfer-emergency-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.web-helfer-emergency-title {
  margin: 0;
  font: 900 32px Inter, sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-helfer-emergency-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-helfer-emergency-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.web-helfer-emergency-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 24px;
  padding: 20px 22px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.web-helfer-emergency-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(45, 10, 61, 0.15);
}

.web-helfer-emergency-card.is-dark {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-helfer-emergency-card.is-light {
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  border: 2.5px solid var(--duo-primary, #2D0A3D);
}

.web-helfer-emergency-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.web-helfer-emergency-num {
  font: 900 40px Inter, sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
}

.web-helfer-emergency-num.sm {
  font-size: 28px;
}

.web-helfer-emergency-num.xs {
  font-size: 22px;
}

.web-helfer-emergency-name {
  font-size: 16px;
  font-weight: 700;
}

.web-helfer-emergency-desc {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.9;
}

/* Services Section */
.web-helfer-services-section {
  display: flex;
  flex-direction: column;
}

.web-helfer-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
  margin-bottom: 36px;
}

.web-helfer-section-title {
  margin: 0;
  font: 900 30px Inter, sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-helfer-section-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-helfer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.web-helfer-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 24px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.web-helfer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(45, 10, 61, 0.08);
}

.web-helfer-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.web-helfer-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  flex: none;
}

.web-helfer-fav-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.web-helfer-fav-btn:hover {
  transform: scale(1.08);
}

.web-helfer-fav-btn.is-fav {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-helfer-fav-btn.is-fav svg path {
  fill: currentColor;
}

.web-helfer-badge {
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-block;
  align-self: flex-start;
  color: var(--duo-primary, #2D0A3D);
}

.web-helfer-card-title {
  font: 900 24px Inter, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--duo-primary, #2D0A3D);
  margin: 0;
}

.web-helfer-card-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.9;
  flex-grow: 1;
}

.web-helfer-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

/* Pitch Card: Fehlt ein Dienst? */
.web-helfer-pitch-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  border-radius: 28px;
  border: 3px dashed var(--duo-primary, #2D0A3D);
  padding: 24px;
  min-height: 260px;
  box-sizing: border-box;
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
}

.web-helfer-pitch-title {
  font: 900 24px Inter, sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
}

.web-helfer-pitch-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.web-helfer-pitch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: transform 0.15s ease;
}

.web-helfer-pitch-btn:hover {
  transform: translateY(-2px);
}

/* Empty States */
.web-helfer-empty-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}

.web-helfer-empty-title {
  font: 900 24px Inter, sans-serif;
}

.web-helfer-empty-desc {
  font-size: 16px;
  font-weight: 500;
}

.web-helfer-reset-btn {
  align-self: flex-start;
  margin-top: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 13px 'DM Sans', sans-serif;
  border: none;
  cursor: pointer;
}

/* Modal */
.web-helfer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 10, 61, 0.7);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.web-helfer-modal-card {
  width: 100%;
  max-width: 540px;
  background: #FFFFFF;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  box-sizing: border-box;
}

.web-helfer-modal-header {
  background: var(--duo-accent, #FFE600);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2.5px solid var(--duo-primary, #2D0A3D);
}

.web-helfer-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  flex: none;
}

.web-helfer-modal-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--duo-primary, #2D0A3D);
  cursor: pointer;
  padding: 0 4px;
}

.web-helfer-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.web-helfer-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-helfer-form-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-helfer-form-input,
.web-helfer-form-select,
.web-helfer-form-textarea {
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 14px;
  padding: 10px 14px;
  font: 500 15px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  outline: none;
  box-sizing: border-box;
  background: #FFFFFF;
}

.web-helfer-form-input:focus,
.web-helfer-form-select:focus,
.web-helfer-form-textarea:focus {
  border-color: var(--duo-accent, #FFE600);
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35);
}

.web-helfer-form-row {
  display: flex;
  gap: 14px;
}

.web-helfer-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.web-helfer-btn-secondary {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
}

.web-helfer-btn-primary {
  height: 44px;
  padding: 0 22px;
  border-radius: 22px;
  border: none;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.web-helfer-btn-primary:hover {
  transform: translateY(-2px);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .web-helfer-emergency-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .web-helfer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .web-helfer-hero-title {
    font-size: 44px !important;
  }
  .web-helfer-hero-top-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-helfer-search-wrap {
    width: 100%;
  }
  .web-helfer-emergency-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-helfer-grid {
    grid-template-columns: 1fr;
  }
  .web-helfer-form-row {
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .web-helfer-emergency-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DUOTONE RELAUNCH: VERANSTALTUNGSKALENDER (EVENTS)
   ========================================================================== */

/* 1. Overview Hero Stage */
.web-events-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.web-events-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-events-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-events-hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.web-events-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
}

body.theme-duotone .web-events-hero-title,
body.theme-duotone .web-events-hero-stage h1,
.web-events-hero-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 64px !important;
  letter-spacing: -0.045em !important;
  line-height: .95 !important;
  color: var(--duo-accent, #FFE600) !important;
}

.web-events-hero-desc {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: #FFFFFF;
  opacity: 0.92;
}

.web-events-stats-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 26px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 18px 24px;
  flex-shrink: 0;
}

.web-events-stats-count {
  font: 900 56px/1 'Inter', sans-serif;
  letter-spacing: -0.04em;
}

.web-events-stats-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.web-events-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.web-events-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 360px;
  max-width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 0 20px;
  box-sizing: border-box;
}

.web-events-search-wrap input {
  border: 0;
  outline: none;
  font: 500 16px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  flex-grow: 1;
  background: transparent;
  min-width: 0;
}

.web-events-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.web-events-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.web-events-pill:hover {
  transform: translateY(-1px);
}

.web-events-pill.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-events-pill.is-location {
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
}

.web-events-filter-subgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.web-events-filter-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
  margin-right: 2px;
}

.web-events-segmented-control {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 26px;
  border: 2px solid var(--duo-accent, #FFE600);
}

.web-events-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 0;
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.web-events-seg-btn.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-events-distance-wrap {
  margin-left: auto;
}

.web-events-distance-select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 28px 0 14px;
  border-radius: 18px;
  border: 2px dashed var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFE600' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.web-events-distance-select option {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

/* 2. Overview Main Content Stage */
.web-events-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

#webEventsContainer {
  display: flex !important;
  flex-direction: column !important;
  gap: 80px !important;
}

.web-events-group-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.web-events-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
  margin-bottom: 8px;
}

.web-events-group-title {
  margin: 0;
  font: 900 30px 'Inter', sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-events-group-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* 3. Event Cards */
.web-event-card {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 28px !important;
  border: 2.5px solid var(--duo-primary, #2D0A3D) !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  position: relative;
  text-decoration: none;
  color: var(--duo-primary, #2D0A3D);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.web-event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(45, 10, 61, 0.12);
}

.web-event-card-banner-number {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 180px;
  padding: 18px 20px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  box-sizing: border-box;
}

.web-event-banner-big-num {
  font: 900 96px/0.8 'Inter', sans-serif;
  letter-spacing: -0.06em;
}

.web-event-banner-month-day {
  font: 900 22px/1 'Inter', sans-serif;
  text-align: right;
}

.web-event-banner-month-day span {
  font: 700 14px 'DM Sans', sans-serif;
}

.web-event-card-banner-multiday {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  height: 180px;
  padding: 16px 20px 18px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
  overflow: hidden;
}

/* Title fills the bottom of the banner; long titles get smaller and stop after 3 lines. */
.web-event-banner-multiday-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-width: 100%;
  font: 900 46px/0.9 'Inter', sans-serif;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.web-event-banner-multiday-title.is-long { font-size: 34px; }
.web-event-banner-multiday-title.is-xlong { font-size: 26px; line-height: 0.95; letter-spacing: -0.03em; }

/* Place and dates top left, clear of the heart button on the right. */
.web-event-banner-multiday-meta {
  order: -1;
  max-width: calc(100% - 56px);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-event-card-banner-photo {
  position: relative;
  display: block;
  height: 180px;
  background: var(--duo-accent, #FFE600);
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.web-event-card-banner-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: url(#city-duotone-filter);
  transition: transform 0.3s ease;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

.web-event-card:hover .web-event-card-banner-photo img {
  transform: scale(1.03);
}

.web-event-card-fav-btn {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.web-event-card-fav-btn:hover {
  transform: scale(1.08);
}

.web-event-card-fav-btn.is-fav {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-event-card-body {
  flex-grow: 1;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.web-event-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.web-event-badge-cat {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.web-event-badge-price {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 12px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.web-event-badge-series {
  background: #FFFFFF;
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 12px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.web-event-card-main-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.web-event-date-box {
  flex: none;
  width: 64px;
  height: 70px;
  border-radius: 20px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.web-event-date-box b {
  font: 900 28px 'Inter', sans-serif;
}

.web-event-date-box span {
  font-size: 12px;
  font-weight: 700;
}

.web-event-card-text-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.web-event-card-title {
  margin: 0;
  font: 900 22px/1.1 'Inter', sans-serif;
  letter-spacing: -0.02em;
  color: var(--duo-primary, #2D0A3D);
}

.web-event-card-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-event-card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
}

.web-event-card-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 4. Empty State & Pitch Banner */
.web-events-empty-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-events-empty-title {
  font: 900 24px 'Inter', sans-serif;
}

.web-events-empty-desc {
  font-size: 16px;
  font-weight: 500;
}

.web-events-reset-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 0;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
}

.web-events-pitch-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-radius: 28px;
  border: 3px dashed var(--duo-primary, #2D0A3D);
  padding: 24px 28px;
  box-sizing: border-box;
}

.web-events-pitch-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.web-events-pitch-title {
  font: 900 24px 'Inter', sans-serif;
  letter-spacing: -0.02em;
  color: var(--duo-primary, #2D0A3D);
}

.web-events-pitch-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
}

.web-events-pitch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.web-events-pitch-btn:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   5. SINGLE EVENT DETAIL VIEW (DUOTONE RELAUNCH)
   ========================================================================== */

.web-event-single-hero {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  padding: 28px 24px 44px;
  box-sizing: border-box;
}

.web-event-single-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
}

.web-event-single-back-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-accent, #FFE600);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.web-event-single-back-btn:hover {
  background: rgba(255, 230, 0, 0.15);
  transform: translateX(-2px);
}

.web-event-single-hero-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: center;
}

.web-event-single-hero-info {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.web-event-single-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.web-event-single-badge-cat {
  border: 2px solid var(--duo-accent, #FFE600);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-accent, #FFE600);
}

.web-event-single-badge-price {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

.web-event-single-badge-series {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

body.theme-duotone .web-event-single-title,
body.theme-duotone .web-event-single-hero h1,
.web-event-single-title {
  margin: 0;
  font: 900 68px/0.92 'Inter', sans-serif !important;
  letter-spacing: -0.05em !important;
  color: var(--duo-accent, #FFE600) !important;
  word-break: break-word !important;
}

.web-event-single-title.is-hero-large {
  font-size: 88px;
  color: var(--duo-accent, #FFE600) !important;
}

.web-event-single-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 6px 0;
}

.web-event-single-meta-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.web-event-single-meta-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 2px solid var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  color: var(--duo-accent, #FFE600);
}

.web-event-single-meta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.web-event-single-meta-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
  opacity: 0.9;
}

.web-event-single-meta-val {
  font: 900 20px 'Inter', sans-serif;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.web-event-single-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.web-event-btn-ticket {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 26px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.web-event-btn-ticket:hover {
  transform: translateY(-2px);
}

.web-event-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 24px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.web-event-btn-outline:hover {
  background: rgba(255, 230, 0, 0.15);
  transform: translateY(-2px);
}

.web-event-btn-outline.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-event-btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.web-event-btn-icon:hover {
  background: rgba(255, 230, 0, 0.15);
  transform: scale(1.05);
}

.web-event-single-photo-wrap {
  flex: 0 1 540px;
  min-width: 0;
  position: relative;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--duo-accent, #FFE600);
}

.web-event-single-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#city-duotone-filter);
}

/* 6. Single Event Main Content */
.web-event-single-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

/* Tickets & Admission Box */
.web-event-tickets-box {
  display: flex;
  gap: 28px;
  align-items: stretch;
  border-radius: 32px;
  background: var(--duo-accent, #FFE600);
  padding: 28px 30px;
  box-sizing: border-box;
}

.web-event-tickets-table-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-event-tickets-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--duo-primary, #2D0A3D);
}

.web-event-tickets-table {
  display: flex;
  flex-direction: column;
}

.web-event-tickets-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--duo-primary, #2D0A3D);
  color: var(--duo-primary, #2D0A3D);
}

.web-event-tickets-price-label {
  font-size: 17px;
  font-weight: 700;
}

.web-event-tickets-price-val {
  font: 900 22px 'Inter', sans-serif;
}

.web-event-tickets-card {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  border-radius: 24px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 22px;
  box-sizing: border-box;
}

.web-event-tickets-card-text {
  display: flex;
  flex-direction: column;
}

.web-event-tickets-card-sub {
  font-size: 13px;
  font-weight: 700;
}

.web-event-tickets-card-price {
  font: 900 44px 'Inter', sans-serif;
  letter-spacing: -0.04em;
  line-height: 1;
}

.web-event-tickets-card-btn {
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 25px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.web-event-tickets-card-btn:hover {
  transform: translateY(-2px);
}

.web-event-tickets-card-note {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
}

/* Sections */
.web-event-single-section {
  display: flex;
  flex-direction: column;
}

.web-event-single-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
  margin-bottom: 24px;
}

.web-event-single-section-title {
  margin: 0;
  font: 900 34px 'Inter', sans-serif;
  letter-spacing: -0.035em;
  color: var(--duo-primary, #2D0A3D);
}

.web-event-single-section-note {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-event-single-desc-text {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  max-width: 800px;
  color: var(--duo-primary, #2D0A3D);
}

/* Series upcoming dates list */
.web-event-series-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.web-event-series-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--duo-primary, #2D0A3D);
  color: var(--duo-primary, #2D0A3D);
}

.web-event-series-day-badge {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font: 900 15px 'Inter', sans-serif;
}

.web-event-series-row.is-next .web-event-series-day-badge {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-event-series-date-text {
  flex-grow: 1;
  font: 900 20px 'Inter', sans-serif;
}

.web-event-series-time-text {
  font-size: 15px;
  font-weight: 700;
}

.web-event-series-next-tag {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* 2-Column Info Grid */
.web-event-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.web-event-info-card {
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}

.web-event-info-title {
  font: 900 22px 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.web-event-info-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.web-event-info-name {
  font-size: 17px;
  font-weight: 700;
}

.web-event-info-sub {
  font-size: 15px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.9;
}

.web-event-map-container {
  position: relative;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--duo-primary, #2D0A3D);
  z-index: 1;
}

.web-event-info-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.web-event-btn-action-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.web-event-btn-action-primary:hover {
  transform: translateY(-2px);
}

.web-event-btn-action-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.web-event-btn-action-secondary:hover {
  background: rgba(45, 10, 61, 0.06);
}

/* Organizer */
.web-event-organizer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--duo-primary, #2D0A3D);
}

.web-event-organizer-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font: 900 17px 'Inter', sans-serif;
  overflow: hidden;
}

.web-event-organizer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-event-organizer-text {
  display: flex;
  flex-direction: column;
}

.web-event-organizer-name {
  font-size: 17px;
  font-weight: 700;
}

.web-event-organizer-sub {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
}

.web-event-organizer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.web-event-organizer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.web-event-organizer-link:hover {
  opacity: 0.75;
}

/* Related Recommendations Section */
.web-event-related-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.web-event-related-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
  margin-bottom: 36px;
}

.web-event-related-title {
  margin: 0;
  font: 900 30px 'Inter', sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-event-related-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
}

.web-event-related-link:hover {
  text-decoration: underline;
}

/* 7. Responsive Media Queries for Events */
@media (max-width: 1024px) {
  .web-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-event-single-hero-columns {
    gap: 32px;
  }
  .web-event-single-photo-wrap {
    flex: 1 1 100%;
    height: 360px;
  }
  .web-event-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .web-events-hero-title {
    font-size: 44px;
  }
  .web-events-hero-top-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-events-search-wrap {
    width: 100%;
  }
  .web-events-segmented-control {
    width: 100%;
    overflow-x: auto;
  }
  .web-events-grid {
    grid-template-columns: 1fr;
  }
  .web-events-pitch-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-event-single-title {
    font-size: 44px;
  }
  .web-event-single-title.is-hero-large {
    font-size: 52px;
  }
  .web-event-single-meta-grid {
    grid-template-columns: 1fr;
  }
  .web-event-tickets-box {
    flex-direction: column;
  }
  .web-event-tickets-card {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   DUOTONE RELAUNCH: GASTRONOMIE & PARTNER / UNTERNEHMEN
   ========================================================================== */

/* 1. Hero Stages */
.web-gastro-hero-stage,
.web-partner-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.web-gastro-hero-inner,
.web-partner-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-gastro-hero-top-row,
.web-partner-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-gastro-hero-text,
.web-partner-hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.web-gastro-eyebrow,
.web-partner-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
}

body.theme-duotone .web-gastro-hero-title,
body.theme-duotone .web-partner-hero-title,
body.theme-duotone .web-gastro-hero-stage h1,
body.theme-duotone .web-partner-hero-stage h1,
.web-gastro-hero-title,
.web-partner-hero-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 64px !important;
  letter-spacing: -0.045em !important;
  line-height: .95 !important;
  color: var(--duo-accent, #FFE600) !important;
}

.web-gastro-hero-desc,
.web-partner-hero-desc {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: #FFFFFF;
  opacity: 0.92;
}

.web-partner-stats-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 26px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 18px 24px;
  flex-shrink: 0;
}

.web-partner-stats-count {
  font: 900 56px/1 'Inter', sans-serif;
  letter-spacing: -0.04em;
}

.web-partner-stats-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

/* 2. Filter Rows & Inputs */
.web-gastro-filter-row,
.web-partner-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.web-gastro-search-wrap,
.web-partner-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 380px;
  max-width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 0 20px;
  box-sizing: border-box;
}

.web-gastro-search-wrap input,
.web-partner-search-wrap input {
  border: 0;
  outline: none;
  font: 500 16px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  flex-grow: 1;
  background: transparent;
  min-width: 0;
}

.web-gastro-pills-row,
.web-partner-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.web-duo-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.web-duo-pill:hover {
  opacity: 0.9;
}

.web-duo-pill.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-duo-map-btn.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-gastro-subfilter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.web-partner-subfilter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.web-partner-subfilter-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.web-gastro-filter-label,
.web-partner-filter-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
  margin-right: 6px;
}

.web-duo-filter-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 2px dashed var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 13px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-duo-filter-chip:hover {
  opacity: 0.9;
}

.web-duo-filter-chip.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border-style: solid;
}

/* 3. Main Stage Layout */
.web-gastro-content,
.web-partner-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.web-gastro-section-header,
.web-partner-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-gastro-count-text,
.web-partner-count-text {
  margin: 0;
  font: 900 30px 'Inter', sans-serif;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-gastro-sort-wrap,
.web-partner-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-sort-select {
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  border-radius: 14px;
  padding: 6px 12px;
  font: 700 13px 'DM Sans', sans-serif;
  outline: none;
  cursor: pointer;
}

/* 4. Business Cards Grid */
.web-duo-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.web-duo-business-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  overflow: hidden;
  background: #FFFFFF;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.web-duo-business-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(45, 10, 61, 0.08);
}

.web-duo-card-banner {
  position: relative;
  display: block;
  height: 190px;
  background: var(--duo-accent, #FFE600);
  overflow: visible;
  text-decoration: none;
}

.web-duo-card-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#city-duotone-filter);
  border-radius: 0;
}

.web-duo-card-badge-left {
  position: absolute;
  left: 14px;
  top: 14px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}

.web-duo-card-badge-right {
  position: absolute;
  right: 14px;
  top: 14px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}

.web-duo-card-badge-right.is-closed {
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  border: 2px solid var(--duo-primary, #2D0A3D);
}

.web-duo-card-initials {
  position: absolute;
  left: 16px;
  bottom: -26px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 3px solid #FFFFFF;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font: 900 18px 'Inter', sans-serif;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.web-duo-card-body {
  flex-grow: 1;
  padding: 36px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.web-duo-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.web-duo-card-title {
  font: 900 24px 'Inter', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
}

.web-duo-card-title:hover {
  opacity: 0.85;
}

.web-duo-card-followers {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-card-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-card-address {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-card-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}

.web-duo-diet-tag {
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-card-actions-row {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.web-duo-btn-view {
  flex-grow: 1;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 15px 'DM Sans', sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.web-duo-btn-view:hover {
  opacity: 0.88;
}

.web-duo-btn-icon-round {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.web-duo-btn-icon-round:hover {
  background: rgba(45, 10, 61, 0.05);
}

.web-duo-btn-icon-round.is-favorited {
  background: var(--duo-accent, #FFE600);
}

.web-duo-btn-icon-round.is-favorited svg {
  fill: var(--duo-primary, #2D0A3D);
}

/* 5. Pitch Card ("Dein Betrieb fehlt?") */
.web-duo-pitch-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 28px;
  border: 3px dashed var(--duo-primary, #2D0A3D);
  padding: 26px;
  min-height: 360px;
  text-decoration: none;
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
  transition: background 0.15s ease;
}

.web-duo-pitch-card:hover {
  background: rgba(45, 10, 61, 0.03);
}

.web-duo-pitch-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
}

.web-duo-pitch-title {
  font: 900 28px 'Inter', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.web-duo-pitch-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.web-duo-pitch-link {
  font-size: 15px;
  font-weight: 700;
}

/* 6. Empty State */
.web-duo-empty-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-reset-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 0;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.web-duo-reset-btn:hover {
  opacity: 0.88;
}

/* 7. Single Detail Site (Gastro & Partner) */
.web-duo-detail-container {
  width: 100%;
  box-sizing: border-box;
}

.web-duo-breadcrumbs {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-breadcrumbs a {
  color: inherit;
  text-decoration: underline;
}

.web-duo-detail-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
}

.web-duo-detail-hero {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  height: 540px;
  background: var(--duo-accent, #FFE600);
}

.web-duo-detail-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#city-duotone-filter);
  border-radius: 0;
}

.web-duo-detail-photo-counter {
  position: absolute;
  right: 24px;
  top: 24px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border: 2px solid var(--duo-accent, #FFE600);
  border-radius: 16px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 14px;
  z-index: 5;
}

.web-duo-detail-hero-info {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 700px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 32px 0 0;
  padding: 32px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;
  box-sizing: border-box;
}

body.theme-duotone .web-duo-detail-hero-info h1,
.web-duo-detail-hero-info h1 {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 60px !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  color: var(--duo-accent, #FFE600) !important;
}

.web-duo-detail-hero-info p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: #FFFFFF;
}

.web-duo-quick-action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 18px 22px;
  background: #FFFFFF;
}

.web-duo-action-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 16px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.web-duo-action-btn-pill.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-duo-action-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  font: 700 15px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
  background: transparent;
  transition: all 0.15s ease;
}

.web-duo-action-link-pill:hover {
  background: rgba(45, 10, 61, 0.05);
}

.web-duo-sticky-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 76px;
  background: #FFFFFF;
  z-index: 40;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.web-duo-subnav-item {
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  font: 700 15px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
  background: transparent;
  transition: all 0.15s ease;
}

.web-duo-subnav-item:hover {
  background: rgba(45, 10, 61, 0.05);
}

.web-duo-subnav-item.is-active {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

/* Neuigkeiten Banner */
.web-duo-news-banner {
  display: flex;
  gap: 20px;
  align-items: center;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 18px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.web-duo-news-banner:hover {
  opacity: 0.95;
}

.web-duo-news-banner-thumb {
  flex: none;
  width: 140px;
  height: 104px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--duo-primary, #2D0A3D);
}

.web-duo-news-banner-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#city-duotone-filter);
}

/* Leistungen Card */
.web-duo-services-card {
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.web-duo-services-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
}

.web-duo-services-grid li {
  display: flex;
  gap: 12px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}

.web-duo-service-bullet {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--duo-primary, #2D0A3D);
  margin-top: 8px;
}

/* Speisekarte */
.web-duo-menu-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.web-duo-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-duo-menu-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.web-duo-menu-tabs-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 26px;
  border: 2px solid var(--duo-primary, #2D0A3D);
}

.web-duo-menu-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 0;
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-duo-menu-tab-btn.is-active {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-duo-menu-columns {
  columns: 2;
  column-gap: 40px;
}

.web-duo-menu-category-block {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.web-duo-menu-item-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--duo-primary, #2D0A3D);
}

.web-duo-menu-dotted-leader {
  flex-grow: 1;
  border-bottom: 2px dotted var(--duo-primary, #2D0A3D);
  opacity: .5;
  transform: translateY(-4px);
}

/* 3-Column Bottom Split */
.web-duo-split-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.web-duo-hours-box {
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.web-duo-contact-dark-box {
  border-radius: 28px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.web-duo-contact-dark-box a {
  color: var(--duo-accent, #FFE600);
}

.web-duo-coupon-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  border-radius: 28px;
  border: 3px dashed var(--duo-primary, #2D0A3D);
  padding: 22px 24px;
  text-decoration: none;
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
  transition: background 0.15s ease;
}

.web-duo-coupon-card:hover {
  background: rgba(45, 10, 61, 0.03);
}

.web-duo-consultation-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 22px 24px;
  box-sizing: border-box;
}

/* 2-Column Events & Jobs Split */
.web-duo-split-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.web-duo-events-box,
.web-duo-jobs-box {
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .web-duo-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-duo-split-3col {
    grid-template-columns: 1fr;
  }
  .web-duo-split-2col {
    grid-template-columns: 1fr;
  }
  .web-duo-menu-columns {
    columns: 1;
  }
  .web-duo-services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .web-gastro-hero-title,
  .web-partner-hero-title {
    font-size: 44px;
  }
  .web-gastro-hero-top-row,
  .web-partner-hero-top-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-gastro-search-wrap,
  .web-partner-search-wrap {
    width: 100%;
  }
  .web-duo-cards-grid {
    grid-template-columns: 1fr;
  }
  .web-duo-detail-hero {
    height: 420px;
  }
  .web-duo-detail-hero-info {
    max-width: 100%;
    padding: 24px 20px;
    border-radius: 0;
  }
  .web-duo-detail-hero-info h1 {
    font-size: 40px;
  }
}

/* ============================================================================
   DUOTONE RELAUNCH: LOKALE NACHRICHTEN (NEWS)
   ============================================================================ */

.web-news-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.web-news-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-news-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-news-hero-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.theme-duotone .web-news-hero-title,
body.theme-duotone .web-news-hero-stage h1,
.web-news-hero-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 64px !important;
  letter-spacing: -0.045em !important;
  line-height: .92 !important;
  color: var(--duo-accent, #FFE600) !important;
}

.web-news-hero-desc {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--duo-accent, #FFE600);
  opacity: 0.9;
  max-width: 680px;
}

.web-news-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 420px;
  max-width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 0 20px;
  box-sizing: border-box;
}

.web-news-search-wrap input {
  border: 0;
  outline: none;
  font: 500 16px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  flex-grow: 1;
  background: transparent;
  min-width: 0;
}

.web-news-search-wrap input::placeholder {
  color: rgba(45, 10, 61, 0.6);
}

.web-news-zeitraum-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.web-news-filter-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
}

.web-news-zeitraum-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 24px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  box-sizing: border-box;
}

.web-news-zeitraum-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 0;
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.web-news-zeitraum-btn:hover {
  opacity: 0.9;
}

.web-news-zeitraum-btn.active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-news-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-news-cat-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.web-news-cat-btn:hover {
  opacity: 0.9;
}

.web-news-cat-btn.active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

/* News Main Wrap */
.web-news-main-wrap {
  max-width: 1280px;
  margin: 40px auto 80px;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.web-news-active-filter-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(45, 10, 61, 0.05);
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  border-radius: 16px;
  padding: 12px 20px;
  color: var(--duo-primary, #2D0A3D);
  font-size: 14px;
  font-weight: 600;
  box-sizing: border-box;
}

.web-news-hint-reset-btn {
  background: transparent;
  border: 0;
  color: var(--duo-primary, #2D0A3D);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  text-decoration: underline;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.web-news-hint-reset-btn:hover {
  opacity: 0.8;
}

.web-news-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
  border-radius: 24px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}

.web-news-reset-btn {
  height: 44px;
  padding: 0 22px;
  border-radius: 22px;
  border: 0;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.web-news-reset-btn:hover {
  opacity: 0.9;
}

.web-news-groups-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.web-news-group-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.web-news-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-news-group-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  letter-spacing: -0.03em !important;
  color: var(--duo-primary, #2D0A3D) !important;
}

.web-news-group-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-news-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}

/* News Card */
.web-news-card {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--duo-primary, #2D0A3D);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}

.web-news-card:hover {
  opacity: 0.85;
}

.web-news-card-thumb {
  flex: none;
  width: 150px;
  height: 112px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--duo-accent, #FFE600);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.web-news-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#city-duotone-filter);
  transition: filter 0.2s ease;
}

.web-news-card-thumb-svg {
  width: 64px;
  height: 64px;
  fill: var(--duo-primary, #2D0A3D);
  flex: none;
}

.web-news-card-content {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.web-news-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-news-card-tag {
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  border-radius: 10px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  white-space: nowrap;
}

.web-news-card-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  color: var(--duo-primary, #2D0A3D) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.web-news-card-lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.web-news-card-source {
  font-size: 13px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* App Teaser Banner */
.web-news-app-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  padding: 26px 30px;
  box-sizing: border-box;
  margin-top: 10px;
}

.web-news-app-banner-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--duo-primary, #2D0A3D);
}

.web-news-app-banner-btns {
  flex: none;
  display: flex;
  gap: 10px;
}

.web-news-store-btn {
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.web-news-store-btn:hover {
  opacity: 0.9;
}

/* Duotone Centered News Modal */
.web-news-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 6, 38, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2500;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 24px 40px;
  overflow-y: auto;
  box-sizing: border-box;
}

.web-news-modal-dialog {
  position: relative;
  width: 880px;
  max-width: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  border: 3px solid var(--duo-primary, #2D0A3D);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  margin: auto;
  box-sizing: border-box;
}

.web-news-modal-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 20;
  width: 52px;
  height: 52px;
  border-radius: 26px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  font: 900 22px 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}

.web-news-modal-close:hover {
  transform: scale(1.06);
}

.web-news-modal-hero-img {
  height: 320px;
  width: 100%;
  background: var(--duo-accent, #FFE600);
  overflow: hidden;
  position: relative;
}

.web-news-modal-hero-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#city-duotone-filter);
}

.web-news-modal-content-wrap {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.web-news-modal-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-news-modal-cat-polizei {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
}

.web-news-modal-cat-default {
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-news-modal-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 44px !important;
  letter-spacing: -0.045em !important;
  line-height: .98 !important;
  padding-right: 50px;
  color: var(--duo-primary, #2D0A3D) !important;
}

.web-news-modal-lead {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.015em;
  line-height: 1.35;
  padding-left: 18px;
  border-left: 6px solid var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-news-modal-body {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--duo-primary, #2D0A3D);
}

.web-news-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.web-news-modal-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 24px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  font-size: 15px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  box-sizing: border-box;
}

.web-news-modal-btn-outline:hover {
  background: rgba(45, 10, 61, 0.05);
}

.web-news-modal-source-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(45, 10, 61, 0.05);
  border-left: 4px solid var(--duo-primary, #2D0A3D);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--duo-primary, #2D0A3D);
  margin-top: 4px;
  box-sizing: border-box;
}

.web-news-modal-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--duo-primary, #2D0A3D);
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}

.web-news-modal-btn-primary:hover {
  opacity: 0.9;
}

.web-news-modal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 2px solid var(--duo-primary, #2D0A3D);
  margin-top: 10px;
}

.web-news-modal-nav-btn {
  height: 48px;
  padding: 0 20px;
  border-radius: 24px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  max-width: 48%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.web-news-modal-nav-btn:hover {
  background: rgba(45, 10, 61, 0.05);
}

.web-news-modal-nav-prev {
  justify-content: flex-start;
  text-align: left;
}

.web-news-modal-nav-next {
  justify-content: flex-end;
  text-align: right;
  margin-left: auto;
}

.web-news-modal-nav-arrow {
  flex: none;
  font-size: 16px;
  line-height: 1;
}

.web-news-modal-nav-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Mobile Responsiveness for News */
@media (max-width: 900px) {
  .web-news-grid-2col {
    grid-template-columns: 1fr;
  }

  body.theme-duotone .web-news-hero-title,
  body.theme-duotone .web-news-hero-stage h1,
  .web-news-hero-title {
    font-size: 40px !important;
  }

  .web-news-hero-top-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .web-news-search-wrap {
    width: 100%;
  }

  .web-news-modal-title {
    font-size: 32px !important;
    padding-right: 40px;
  }

  .web-news-modal-content-wrap {
    padding: 24px 20px;
  }

  .web-news-app-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .web-news-modal-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .web-news-modal-nav-btn {
    max-width: 100%;
    width: 100%;
  }

  .web-news-modal-nav-prev,
  .web-news-modal-nav-next {
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .web-news-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .web-news-card-thumb {
    width: 100%;
    height: 180px;
  }
}

/* ==========================================================================
   COUPONS PAGE (DUOTONE RELAUNCH)
   ========================================================================== */

.web-coupons-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
  box-sizing: border-box;
}

.web-coupons-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.web-coupons-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.web-coupons-hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.web-coupons-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--duo-accent, #FFE600);
}

body.theme-duotone .web-coupons-hero-stage h1,
body.theme-duotone .web-coupons-hero-title,
.web-coupons-hero-title {
  margin: 0;
  font-family: Inter, sans-serif !important;
  font-weight: 900 !important;
  font-size: 64px !important;
  letter-spacing: -0.045em !important;
  line-height: 0.9 !important;
  color: var(--duo-accent, #FFE600) !important;
}

.web-coupons-hero-desc {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-accent, #FFE600);
  opacity: 0.95;
}

.web-coupons-stats-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 26px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 18px 24px;
  flex-shrink: 0;
}

.web-coupons-stats-num {
  font: 900 56px Inter, sans-serif;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupons-stats-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupons-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.web-coupons-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-coupons-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.web-coupons-chip:hover {
  background: rgba(255, 230, 0, 0.15);
}

.web-coupons-chip.active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-coupons-sort-hint {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-accent, #FFE600);
  opacity: 0.95;
}

/* Coupons Main Content */
.web-coupons-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

/* App Explainer Banner ("So funktioniert's") */
.web-coupons-app-banner {
  display: flex;
  gap: 40px;
  align-items: center;
  border-radius: 32px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  padding: 32px 36px;
  box-sizing: border-box;
}

.web-coupons-app-info {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.web-coupons-app-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.85;
}

.web-coupons-app-title {
  margin: 0;
  font: 900 40px Inter, sans-serif;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupons-steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.web-coupons-step-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.web-coupons-step-num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font: 900 16px Inter, sans-serif;
}

.web-coupons-step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
}

.web-coupons-step-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupons-step-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.9;
}

.web-coupons-qr-card {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-radius: 28px;
  background: #FFFFFF;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 22px;
  width: 220px;
  box-sizing: border-box;
  text-align: center;
}

.web-coupons-qr-wrap {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupons-qr-img {
  width: 100%;
  height: 100%;
  display: block;
}

.web-coupons-qr-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupons-store-buttons {
  display: flex;
  gap: 8px;
}

.web-coupons-store-btn {
  border-radius: 18px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s ease;
}

.web-coupons-store-btn:hover {
  opacity: 0.9;
}

/* Coupons Grid */
.web-coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
}

/* Coupon Card with Perforated Ticket Design */
.web-coupon-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  overflow: hidden;
  background: #FFFFFF;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.web-coupon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(45, 10, 61, 0.12);
}

.web-coupon-img-wrap {
  position: relative;
  height: 150px;
  background: var(--duo-accent, #FFE600);
  overflow: hidden;
}

.web-coupon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--duo-img-filter, url(#city-duotone-filter));
}

.web-coupon-badges-row {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 6px;
  z-index: 2;
  align-items: center;
}

.web-coupon-company-badge {
  background: #FFFFFF;
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
  transition: background 0.15s ease;
}

.web-coupon-company-badge:hover {
  background: rgba(45, 10, 61, 0.05);
}

.web-coupon-expiring-badge {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

.web-coupon-ticket-header {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.web-coupon-value {
  font: 900 56px Inter, sans-serif;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--duo-accent, #FFE600);
}

.web-coupon-value-sub {
  font: 900 22px Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--duo-accent, #FFE600);
}

/* Punch Holes Perforation Cutouts */
.web-coupon-perforation {
  position: relative;
  height: 0;
  border-top: 3px dashed var(--duo-primary, #2D0A3D);
}

.web-coupon-hole {
  position: absolute;
  top: -15px;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}

.web-coupon-hole.hole-left {
  left: -16px;
}

.web-coupon-hole.hole-right {
  right: -16px;
}

.web-coupon-body {
  flex-grow: 1;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FFFFFF;
}

.web-coupon-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
  min-height: 46px;
}

.web-coupon-expiry {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.85;
}

.web-coupon-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
}

.web-coupon-redeem-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  flex-grow: 1;
  transition: opacity 0.15s ease;
}

.web-coupon-redeem-btn:hover {
  opacity: 0.9;
}

.web-coupon-bookmark-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.web-coupon-bookmark-btn:hover {
  background: rgba(45, 10, 61, 0.05);
}

.web-coupon-bookmark-btn.active {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

/* "Dein Coupon hier?" Partner Card */
.web-coupon-partner-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 28px;
  border: 3px dashed var(--duo-primary, #2D0A3D);
  padding: 26px;
  min-height: 420px;
  text-decoration: none;
  color: var(--duo-primary, #2D0A3D);
  transition: all 0.2s ease;
  box-sizing: border-box;
  background: transparent;
}

.web-coupon-partner-card:hover {
  background: rgba(45, 10, 61, 0.03);
  transform: translateY(-4px);
}

.web-coupon-partner-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
}

.web-coupon-partner-title {
  font: 900 28px Inter, sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupon-partner-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.85;
}

.web-coupon-partner-action {
  font-size: 15px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  margin-top: 4px;
}

/* Empty State */
.web-coupons-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 24px;
  background: rgba(45, 10, 61, 0.03);
  border: 2px dashed var(--duo-primary, #2D0A3D);
  border-radius: 28px;
  text-align: center;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupons-reset-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border: none;
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.web-coupons-reset-btn:hover {
  opacity: 0.9;
}

/* Coupon Modal (App Download Dialog) */
.web-coupon-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(28, 6, 38, 0.66);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 100px 24px 40px;
  overflow-y: auto;
  box-sizing: border-box;
}

.web-coupon-modal-dialog {
  position: relative;
  width: 580px;
  max-width: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  border: 3px solid var(--duo-primary, #2D0A3D);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  padding: 32px 36px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.web-coupon-modal-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  font: 900 18px Inter, sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
}

.web-coupon-modal-close:hover {
  background: rgba(45, 10, 61, 0.05);
}

.web-coupon-modal-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 48px;
}

.web-coupon-modal-badge {
  align-self: flex-start;
  border: 1.5px solid var(--duo-primary, #2D0A3D);
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupon-modal-title {
  margin: 0;
  font: 900 32px Inter, sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupon-modal-subtitle {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.85;
}

.web-coupon-modal-body {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-top: 1.5px solid rgba(45, 10, 61, 0.15);
  border-bottom: 1.5px solid rgba(45, 10, 61, 0.15);
}

.web-coupon-modal-qr-box {
  flex: none;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 20px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  box-sizing: border-box;
}

.web-coupon-modal-qr-img {
  width: 120px;
  height: 120px;
  display: block;
}

.web-coupon-modal-qr-text {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--duo-primary, #2D0A3D);
}

.web-coupon-modal-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.web-coupon-modal-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.web-coupon-modal-step-badge {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font: 900 13px Inter, sans-serif;
}

.web-coupon-modal-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.web-coupon-modal-step-text b {
  font-size: 14px;
  font-weight: 700;
}

.web-coupon-modal-step-text span {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.35;
}

.web-coupon-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.web-coupon-modal-store-btns {
  display: flex;
  gap: 8px;
}

.web-coupon-modal-btn-secondary {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-coupon-modal-btn-secondary:hover {
  background: rgba(45, 10, 61, 0.05);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  body.theme-duotone .web-coupons-hero-title,
  .web-coupons-hero-title {
    font-size: 40px !important;
  }

  .web-coupons-hero-top-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .web-coupons-app-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .web-coupons-qr-card {
    width: 100%;
  }

  .web-coupons-grid {
    grid-template-columns: 1fr;
  }

  .web-coupon-modal-body {
    flex-direction: column;
  }

  .web-coupon-modal-qr-box {
    width: 100%;
  }

  .web-coupon-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .web-coupon-modal-store-btns {
    justify-content: center;
  }
}

/* ==========================================================================
   JOBS MODULE (DUOTONE RELAUNCH: OVERVIEW & SINGLE SITES)
   ========================================================================== */

/* Hero Stage */
.web-jobs-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
}

.web-jobs-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.web-jobs-hero-top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

body.theme-duotone .web-jobs-hero-title,
body.theme-duotone .web-jobs-hero-stage h1,
.web-jobs-hero-title {
  margin: 0;
  font-family: Inter, sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(48px, 6vw, 76px) !important;
  letter-spacing: -0.045em !important;
  line-height: 0.9 !important;
  color: var(--duo-accent, #FFE600) !important;
}

body.theme-duotone .web-job-detail-stage h1,
body.theme-duotone .web-job-detail-left h1,
.web-job-detail-title {
  margin: 0;
  font-family: Inter, sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(32px, 4.5vw, 48px) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: var(--duo-accent, #FFE600) !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.web-jobs-count-pill {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  border-radius: 14px;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.web-jobs-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.web-jobs-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 560px;
  max-width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 0 20px;
  box-sizing: border-box;
}

.web-jobs-search-input {
  border: 0;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--duo-primary, #2D0A3D);
  flex-grow: 1;
  background: transparent;
  min-width: 0;
}

.web-jobs-sort-wrap {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 18px;
  border-radius: 26px;
  border: 2px solid var(--duo-accent, #FFE600);
  font-size: 15px;
  font-weight: 700;
  color: var(--duo-accent, #FFE600);
}

.web-jobs-sort-select {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
}

.web-jobs-sort-select option {
  color: #111827;
  background: #ffffff;
}

.web-jobs-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-jobs-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-jobs-pill:hover {
  background: rgba(255, 230, 0, 0.15);
}

.web-jobs-pill.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

/* Main Jobs Content */
.web-jobs-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
}

.web-jobs-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-jobs-section-title {
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* all cards equally tall */
  gap: 20px;
  align-items: stretch;
}

/* Job Card */
.web-job-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  overflow: hidden;
  background: #FFFFFF;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.web-job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(45, 10, 61, 0.12);
}

.web-job-card.is-top-highlight {
  background: var(--duo-accent, #FFE600);
}

.web-job-card.is-top-highlight .web-job-date-pill {
  background: rgba(45, 10, 61, 0.08);
  border-color: var(--duo-primary, #2D0A3D);
}

.web-job-card-image-wrap {
  position: relative;
  display: block;
  height: 200px;
  background: var(--duo-accent, #FFE600);
  border-bottom: 2px solid var(--duo-primary, #2D0A3D);
  overflow: hidden;
}

.web-job-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.2s ease;
}

body.theme-duotone .web-job-card-image {
  filter: url(#city-duotone-filter);
}

.web-job-top-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  z-index: 2;
}

.web-job-card-body {
  flex-grow: 1;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.web-job-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.web-job-type-pill {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
}

.web-job-date-pill {
  background: #FFFFFF;
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 10px;
  padding: 1px 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-job-fav-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-job-fav-btn:hover {
  transform: scale(1.06);
}

.web-job-fav-btn.is-favorited {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

body.theme-duotone .web-job-card-title,
.web-job-card-title {
  font-family: Inter, sans-serif !important;
  font-weight: 900 !important;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--duo-primary, #2D0A3D) !important;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.15em);
}

.web-job-card-company {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-job-card-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.web-job-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 2px solid var(--duo-primary, #2D0A3D);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.web-job-card-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-job-card-link-btn {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* B2B Personal CTA */
.web-jobs-b2b-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 28px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 24px 30px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.web-jobs-b2b-cta:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.web-jobs-b2b-cta b {
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   SINGLE JOB SITE (VARIATIONS: FOTO, OHNE BILD, KONTAKT)
   ========================================================================== */
.web-job-detail-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  width: 100%;
}

.web-job-detail-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.web-job-back-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-accent, #FFE600);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-job-back-btn:hover {
  background: rgba(255, 230, 0, 0.15);
}

.web-job-detail-split {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: center;
}

.web-job-detail-left {
  flex: 1 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.web-job-detail-right-img {
  flex: 0 1 480px;
  min-width: 0;
  position: relative;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--duo-accent, #FFE600);
}

.web-job-detail-right-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.theme-duotone .web-job-detail-right-img img {
  filter: url(#city-duotone-filter);
}

/* Typographic Card (Without Image Variation) */
.web-job-detail-graphic-card {
  flex: 0 1 480px;
  min-width: 0;
  position: relative;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: flex;
  align-items: flex-end;
  padding: 32px;
  box-sizing: border-box;
}

.web-job-graphic-watermark {
  position: absolute;
  right: -90px;
  top: -70px;
  width: 440px;
  height: 440px;
  fill: var(--duo-primary, #2D0A3D);
  opacity: 0.12;
  pointer-events: none;
}

.web-job-graphic-typo {
  position: relative;
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 84px);
  letter-spacing: -0.04em;
  line-height: 0.86;
  text-transform: uppercase;
}

.web-job-detail-initials {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 26px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 30px;
}

.web-job-detail-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.web-job-meta-box {
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.web-job-meta-box-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

.web-job-meta-box-val {
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.web-job-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.web-job-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.web-job-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 34px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.web-job-btn-primary:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.web-job-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 34px;
  border-radius: 28px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-job-btn-secondary:hover {
  background: rgba(255, 230, 0, 0.15);
}

.web-job-circle-btn {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.web-job-circle-btn:hover {
  transform: scale(1.05);
}

.web-job-circle-btn.is-active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

/* Detail Main Body */
.web-job-detail-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  box-sizing: border-box;
}

.web-job-detail-intro {
  margin: 0;
  max-width: 820px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--duo-primary, #2D0A3D);
}

.web-job-detail-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.web-job-list-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.web-job-col-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.025em;
  color: var(--duo-primary, #2D0A3D);
}

.web-job-check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.web-job-check-item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--duo-primary, #2D0A3D);
}

.web-job-check-circle {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
}

.web-job-benefits-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 32px;
  background: var(--duo-accent, #FFE600);
  padding: 26px 30px;
}

.web-job-benefits-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.025em;
  color: var(--duo-primary, #2D0A3D);
}

.web-job-benefits-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.web-job-benefit-pill {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 21px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  font-size: 16px;
  font-weight: 700;
}

.web-job-bottom-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.web-job-contact-card {
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 22px 26px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #FFFFFF;
}

.web-job-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 17px;
  color: var(--duo-primary, #2D0A3D);
  text-decoration: none;
}

.web-job-contact-row + .web-job-contact-row {
  border-top: 2px solid var(--duo-primary, #2D0A3D);
}

.web-job-company-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 28px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  padding: 24px 26px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.web-job-company-card:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

/* Sticky floating action bar */
.web-job-sticky-bar {
  position: sticky;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 32px;
  background: #FFFFFF;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  padding: 10px 10px 10px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.web-job-sticky-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.web-job-sticky-title {
  font-size: 16px;
  font-weight: 900;
  font-family: Inter, sans-serif;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-job-sticky-company {
  font-size: 13px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.85;
}

.web-job-sticky-btn {
  flex: none;
  height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  border-radius: 28px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .web-jobs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-job-detail-cols {
    grid-template-columns: 1fr;
  }
  .web-job-bottom-boxes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .web-jobs-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .web-jobs-hero-title {
    font-size: 42px !important;
  }
  .web-jobs-hero-top-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-job-detail-split {
    flex-direction: column;
  }
  .web-job-detail-right-img,
  .web-job-detail-graphic-card {
    flex: none;
    width: 100%;
    height: 320px;
  }
  .web-job-detail-boxes {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FINDER RELAUNCH (DUOTONE DESIGN)
   ========================================================================== */

/* 1. HERO STAGE */
.web-finder-hero-stage {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 0 0 40px 40px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.web-finder-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-finder-hero-top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

body.theme-duotone .web-finder-hero-title,
body.theme-duotone .web-finder-hero-stage h1,
.web-finder-hero-title {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 72px !important;
  letter-spacing: -0.045em !important;
  line-height: .9 !important;
  color: var(--duo-accent, #FFE600) !important;
}

.web-finder-hero-map-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  border-radius: 26px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 16px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.web-finder-hero-map-btn.active,
.web-finder-hero-map-btn[aria-pressed="true"] {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-search-label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 640px;
  max-width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  padding: 0 20px;
  box-sizing: border-box;
}

.web-finder-search-input {
  border: 0;
  outline: none;
  font: 500 16px 'DM Sans', sans-serif;
  color: var(--duo-primary, #2D0A3D);
  flex-grow: 1;
  background: transparent;
  min-width: 0;
}

.web-finder-categories-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-finder-cat-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 2px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.web-finder-cat-chip.active {
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

/* 2. MAIN STAGE & FILTERS */
.web-finder-main-stage {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
  width: 100%;
}

.web-finder-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.web-finder-radius-group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.web-finder-radius-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-radius-slider {
  width: 320px;
  max-width: 100%;
  accent-color: var(--duo-primary, #2D0A3D);
  cursor: pointer;
}

.web-finder-radius-value {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--duo-primary, #2D0A3D);
  min-width: 70px;
}

.web-finder-sort-label {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  border-radius: 24px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  font-size: 15px;
  font-weight: 700;
  background: #FFFFFF;
}

.web-finder-sort-select {
  border: 0;
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  font: 700 15px 'DM Sans', sans-serif;
  outline: none;
  cursor: pointer;
}

/* 3. LEAFLET MAP */
.web-finder-map-wrapper {
  position: relative;
  height: 560px;
  border-radius: 32px;
  overflow: hidden;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  box-shadow: 0 8px 24px rgba(45,10,61,0.06);
}

.web-finder-map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.web-finder-map-card {
  position: absolute;
  left: 76px;
  bottom: 16px;
  width: 460px;
  max-width: calc(100% - 100px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 20px;
  border-radius: 24px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  box-sizing: border-box;
}

.web-finder-map-card-info {
  flex-grow: 1;
  min-width: 0;
}

.web-finder-map-card-title {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #FFFFFF;
}

.web-finder-map-card-sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--duo-accent, #FFE600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.web-finder-map-card-btn {
  flex: none;
  height: 46px;
  padding: 0 20px;
  border-radius: 23px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* Custom Leaflet Pin */
.web-finder-pin-container {
  position: relative;
  width: 48px;
  height: 61px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.web-finder-pin-container:hover {
  transform: scale(1.1);
  z-index: 999;
}
.web-finder-pin-container svg.pin-bg {
  position: absolute;
  inset: 0;
  width: 48px;
  height: 61px;
}
.web-finder-pin-icon-inner {
  position: absolute;
  left: 8px;
  top: 7px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}

/* 4. LIST & CARDS */
.web-finder-list-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.web-finder-list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--duo-primary, #2D0A3D);
}

.web-finder-count-heading {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-order-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.web-finder-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.web-finder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(45,10,61,0.08);
}

.web-finder-card-icon-box {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
}
.web-finder-card-icon-box.dark {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
}

.web-finder-card-media {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid var(--duo-primary, #2D0A3D);
  box-sizing: border-box;
}
.web-finder-card-media.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-finder-card-body {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.web-finder-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.web-finder-badge-partner {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
}

.web-finder-badge-category {
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 10px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-finder-card-status {
  font-size: 15px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-finder-card-address {
  font-size: 14px;
  font-weight: 500;
  color: var(--duo-primary, #2D0A3D);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-finder-card-side,
.web-finder-card-aside {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.web-finder-card-name {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--duo-primary, #2D0A3D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.web-finder-card-badge-partner {
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
}
.web-finder-card-badge-cat {
  border: 2px solid var(--duo-primary, #2D0A3D);
  border-radius: 10px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-card-fav-btn {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 2px solid var(--duo-primary, #2D0A3D);
  background: transparent;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.web-finder-card-fav-btn.active {
  background: var(--duo-accent, #FFE600);
}
.web-finder-card-fav-btn svg {
  fill: none;
}
.web-finder-card-fav-btn.active svg {
  fill: var(--duo-primary, #2D0A3D);
}

.web-finder-card-dist {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 18px;
  white-space: nowrap;
  color: var(--duo-primary, #2D0A3D);
}

/* Empty State */
.web-finder-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 32px;
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-empty-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 26px;
}

.web-finder-empty-desc {
  font-size: 17px;
  font-weight: 500;
}

/* 5. MODAL POP-UPS */
.web-finder-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1100;
  background: rgba(28,6,38,.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 24px 60px;
  box-sizing: border-box;
  overflow-y: auto;
}

.web-finder-modal-dialog {
  position: relative;
  width: 880px;
  max-width: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  border: 3px solid var(--duo-primary, #2D0A3D);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  box-sizing: border-box;
  margin: auto 0;
}

.web-finder-modal-dialog.partner-modal {
  width: 1180px;
}

/* Top-right floating controls in modal */
.web-finder-modal-actions {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 10;
  display: flex;
  gap: 10px;
}

.web-finder-modal-fav-btn {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.web-finder-modal-fav-btn.active {
  background: var(--duo-accent, #FFE600);
}
.web-finder-modal-fav-btn svg {
  fill: none;
}
.web-finder-modal-fav-btn.active svg {
  fill: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-close-btn {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  border: 2.5px solid var(--duo-accent, #FFE600);
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font: 900 22px 'Inter', sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease;
  line-height: 1;
}
.web-finder-modal-close-btn:hover {
  transform: scale(1.05);
}

.web-finder-modal-photo {
  position: relative;
  height: 380px;
  background: var(--duo-accent, #FFE600);
  overflow: hidden;
}

.web-finder-modal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--duo-img-filter, url(#city-duotone-filter));
}

.web-finder-modal-icon-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  height: 200px;
  padding: 0 40px 28px;
  box-sizing: border-box;
  background: var(--duo-accent, #FFE600);
}

.web-finder-modal-icon-circle {
  width: 88px;
  height: 88px;
  border-radius: 26px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 32px;
}

.web-finder-modal-body {
  padding: 32px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.web-finder-modal-header-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.web-finder-modal-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -0.045em;
  line-height: .95;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-desc {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-info-box {
  border-radius: 28px;
  background: var(--duo-accent, #FFE600);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-info-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

.web-finder-modal-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.web-finder-modal-info-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #FFFFFF;
  color: var(--duo-primary, #2D0A3D);
  display: grid;
  place-items: center;
}

.web-finder-modal-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 17px;
  font-weight: 500;
  padding-top: 2px;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-info-text b {
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-info-text a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--duo-primary, #2D0A3D);
}

.web-finder-modal-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.web-finder-btn-route {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border-radius: 28px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.web-finder-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border-radius: 28px;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
  color: var(--duo-primary, #2D0A3D);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .web-finder-cards-grid {
    grid-template-columns: 1fr;
  }
  .web-finder-hero-title {
    font-size: 52px !important;
  }
}

@media (max-width: 768px) {
  .web-finder-hero-inner {
    padding: 32px 16px 24px;
  }
  body.theme-duotone .web-finder-hero-title,
  body.theme-duotone .web-finder-hero-stage h1,
  .web-finder-hero-title {
    font-size: 40px !important;
  }
  .web-finder-hero-top-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-finder-map-wrapper {
    height: 400px;
  }
  .web-finder-map-card {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
  .web-finder-modal-overlay {
    padding: 16px 12px;
  }
  .web-finder-modal-dialog {
    border-radius: 24px;
  }
  .web-finder-modal-body {
    padding: 24px 20px 28px;
  }
  .web-finder-modal-title {
    font-size: 32px;
  }
  .web-finder-modal-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   RELAUNCH WEB HEADER, NAVIGATION & DRAWER MENU (.hx-*)
   Source: Resources/Screendesign/Webdesign/Menü Header/
   ========================================================================== */

:root {
  --hx-d: #2D0A3D;
  --hx-l: #FFE600;
}
body:not(.theme-duotone) {
  --hx-d: var(--client-primary, #1e3a8a);
  --hx-l: var(--client-accent, #f59e0b);
}
body.theme-duotone {
  --hx-d: var(--duo-primary, #2D0A3D);
  --hx-l: var(--duo-accent, #FFE600);
}

.hx-bar, .hx-quick, .hx-ov, .hx-pan {
  --d: var(--hx-d);
  --l: var(--hx-l);
  box-sizing: border-box;
}
.hx-bar *, .hx-quick *, .hx-ov *, .hx-pan * {
  box-sizing: border-box;
}

/* Hide legacy utility bar, nav wrapper and old category strip */
.web-utility-bar,
.web-nav-wrapper,
.web-category-strip-wrapper {
  display: none !important;
}

/* --- Sticky Top Header Bar --- */
.hx-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--d);
  color: var(--l);
  width: 100%;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hx-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* --- Header Back-to-Home Button (Subpage navigation) --- */
.hx-back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--l);
  color: var(--d) !important;
  font: 900 13.5px/1 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.hx-back-home-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.hx-back-home-btn svg {
  flex: none;
}

/* --- In-page Subpage Back-to-Home Pill & Breadcrumbs --- */
.web-subpage-back-home-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1.5px solid var(--duo-accent, #FFE600);
  background: transparent;
  color: var(--duo-accent, #FFE600) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  width: fit-content;
  align-self: flex-start;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}
.web-subpage-back-home-pill:hover {
  background: rgba(255, 230, 0, 0.15);
  transform: translateX(-2px);
}
.web-subpage-breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.hx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 900 22px Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--l);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.hx-brand:hover {
  opacity: 0.92;
}
.hx-brand svg {
  flex: none;
  fill: var(--l);
}
.hx-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 24px;
  background: #ffffff;
  color: var(--d);
  padding: 0 18px;
  font: 500 15px 'DM Sans', sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.hx-search svg {
  flex: none;
  color: var(--d);
}
.hx-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: 500 15px 'DM Sans', sans-serif;
  color: var(--d);
  padding: 0;
}
.hx-search input::placeholder {
  color: var(--d);
  opacity: 0.65;
}
.hx-search span {
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-wx {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  border: 2px solid var(--l);
  font: 700 14px 'DM Sans', sans-serif;
  white-space: nowrap;
  color: var(--l);
  text-decoration: none;
  transition: all 0.15s ease;
  user-select: none;
}
.hx-wx:hover {
  background: var(--l);
  color: var(--d);
}
.hx-cta {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--l);
  color: var(--d);
  font: 700 15px 'DM Sans', sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  user-select: none;
}
.hx-cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.hx-burger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px 0 14px;
  border-radius: 24px;
  border: 0;
  background: #ffffff;
  color: var(--d);
  font: 700 15px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  user-select: none;
}
.hx-burger:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}
.hx-burger svg {
  flex: none;
}
.hx-icosearch {
  display: none;
}

/* --- Quicklinks Navigation Bar (.hx-quick) --- */
.hx-quick {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 8px;
  /* Flex instead of a fixed grid: modules switched off in the admin (coupons, blitzer …)
     simply drop out and the remaining icons share the width evenly. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.hx-quick > .hx-q { flex: 1 1 0; min-width: 0; max-width: 96px; }
.hx-quick > .hx-sep { flex: 0 0 2px; margin-left: 10px; margin-right: 10px; }
.hx-q {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: 700 13px 'DM Sans', sans-serif;
  color: var(--d);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.hx-q:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}
.hx-q i {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-style: normal;
  transition: transform 0.15s ease;
}
.hx-q i.dk {
  background: var(--d);
  color: var(--l);
}
.hx-q i.lt {
  background: var(--l);
  color: var(--d);
}
.hx-q i.ol {
  border: 2px solid var(--d);
  color: var(--d);
  background: transparent;
}
.hx-sep {
  width: 2px;
  align-self: stretch;
  margin: 6px auto 22px;
  background: var(--d);
  opacity: 0.15;
}

/* --- Menu Drawer Overlay & Slide-in Panel --- */
.hx-ov {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(20, 6, 28, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.hx-ov.active {
  opacity: 1;
  pointer-events: auto;
  display: block !important;
}
.hx-pan {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  min-width: 560px;
  max-width: 100%;
  background: #ffffff;
  color: var(--d);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-radius: 32px 0 0 32px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.22);
}
.hx-ov.active .hx-pan {
  transform: translateX(0);
}
.hx-ph {
  background: var(--d);
  color: var(--l);
  padding: 22px 24px 24px;
  border-radius: 0 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}
body.theme-duotone .hx-ph h2,
.hx-ph h2 {
  color: var(--hx-l, #FFE600) !important;
  font: 900 40px Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.hx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hx-x {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 0;
  background: var(--l);
  color: var(--d);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.hx-x:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
.hx-ph .hx-search {
  flex: none;
  display: none; /* Desktop hidden, mobile shown */
}
.hx-body {
  flex: 1;
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hx-g h3 {
  margin: 14px 0 10px;
  font: 700 12px 'DM Sans', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d);
  opacity: 0.7;
}
.hx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 1301px) {
  .hx-it {
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left;
    justify-content: space-between;
    gap: 10px;
    min-height: 0;
    height: 108px;
    padding: 12px 14px 12px;
  }
  .hx-n5 .hx-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .hx-pair {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
  }
  .hx-pair .hx-n1 .hx-grid {
    grid-template-columns: 1fr;
  }
  .hx-pair .hx-n2 .hx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hx-pair {
  display: contents;
}
@media (min-width: 1301px) {
  .hx-pair {
    display: grid;
  }
}

@media (max-width: 1300px) {
  .hx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hx-it {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 12px 8px 8px;
  border-radius: 20px;
  border: 2px solid var(--d);
  font: 700 15px 'DM Sans', sans-serif;
  line-height: 1.15;
  color: var(--d);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hx-it:hover {
  transform: translateY(-1px);
}
.hx-it i {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--d);
  color: var(--l);
  font-style: normal;
}
.hx-it small {
  display: none !important;
}
.hx-it.on {
  background: var(--l);
}
.hx-it.lt i {
  background: var(--l);
  color: var(--d);
}

/* --- Drawer Footer & Actions --- */
.hx-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 2px solid var(--d);
  font: 500 13px 'DM Sans', sans-serif;
}
.hx-soc {
  display: flex;
  gap: 6px;
}
.hx-soc a {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 2px solid var(--d);
  display: grid;
  place-items: center;
  font: 700 11px 'DM Sans', sans-serif;
  color: var(--d);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.hx-soc a:hover {
  background: var(--d);
  color: var(--l);
}

/* --- Responsive Media Queries --- */
@media (max-width: 1100px) {
  .hx-wx {
    display: none;
  }
  .hx-quick {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 16px;
  }
  .hx-sep {
    display: none;
  }
}

@media (max-width: 760px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .hx-bar {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .hx-in {
    padding: 12px 16px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .hx-brand {
    font-size: 19px !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .hx-bar .hx-search,
  .hx-bar .hx-cta,
  .hx-bar .hx-wx {
    display: none !important;
  }
  .hx-ph .hx-search {
    display: flex !important;
    height: 46px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hx-icosearch {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 22px !important;
    border: 2px solid var(--l) !important;
    color: var(--l) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }
  .hx-burger {
    height: 44px !important;
    padding: 0 14px 0 12px !important;
    flex-shrink: 0 !important;
  }
  .hx-burger b {
    display: none !important;
  }
  .hx-quick {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 14px 16px 6px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .hx-quick::-webkit-scrollbar {
    display: none !important;
  }
  .hx-q {
    flex: 0 0 76px !important;
    scroll-snap-align: start !important;
    font-size: 12px !important;
  }
  .hx-q i {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
  .hx-pan {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  .hx-ph {
    padding: 18px 16px 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .hx-body {
    padding: 4px 16px 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .hx-grid {
    gap: 6px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  .hx-it {
    min-height: 56px !important;
    font-size: 14px !important;
    border-radius: 18px !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    padding: 8px 12px 8px 8px !important;
    box-sizing: border-box !important;
  }
  .hx-it i {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   DUOTONE LEGAL PAGES SYSTEM (Impressum, Datenschutz, Cookies, KI, Barrierefreiheit)
   ========================================================================== */
.legal-page-section {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 48px 20px 96px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 75vh !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--duo-primary, #2D0A3D) !important;
}

.legal-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
  padding-bottom: 20px !important;
  border-bottom: 2px solid rgba(var(--duo-primary-rgb, 45, 10, 61), 0.15) !important;
}

.legal-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

.legal-breadcrumb a.legal-back-home {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--duo-primary, #2D0A3D) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--duo-primary, #2D0A3D) !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  box-shadow: 2px 2px 0px rgba(var(--duo-primary-rgb, 45, 10, 61), 0.15) !important;
}

.legal-breadcrumb a.legal-back-home:hover {
  background: var(--duo-accent, #FFE600) !important;
  transform: translateX(-2px) !important;
}

.legal-crumb-sep {
  color: rgba(var(--duo-primary-rgb, 45, 10, 61), 0.35) !important;
  font-weight: 700 !important;
}

.legal-crumb-muted {
  color: rgba(var(--duo-primary-rgb, 45, 10, 61), 0.65) !important;
}

.legal-crumb-active {
  color: var(--duo-primary, #2D0A3D) !important;
  font-weight: 800 !important;
}

.legal-nav-pills-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.legal-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 1.5px solid var(--duo-primary, #2D0A3D) !important;
  color: var(--duo-primary, #2D0A3D) !important;
  background-color: #ffffff !important;
  transition: all 0.15s ease !important;
  box-shadow: 2px 2px 0px rgba(var(--duo-primary-rgb, 45, 10, 61), 0.12) !important;
}

.legal-nav-pill:hover {
  background-color: rgba(255, 230, 0, 0.4) !important;
  color: var(--duo-primary, #2D0A3D) !important;
  border-color: var(--duo-primary, #2D0A3D) !important;
  transform: translateY(-1px) !important;
}

.legal-nav-pill.active {
  background-color: var(--duo-accent, #FFE600) !important;
  color: var(--duo-primary, #2D0A3D) !important;
  border: 2px solid var(--duo-primary, #2D0A3D) !important;
  box-shadow: 3px 3px 0px var(--duo-primary, #2D0A3D) !important;
  font-weight: 800 !important;
}

.legal-header {
  margin-bottom: 32px !important;
}

.legal-header h1 {
  font-family: 'Inter', sans-serif !important;
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  color: var(--duo-primary, #2D0A3D) !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.035em !important;
}

.legal-header p {
  color: rgba(var(--duo-primary-rgb, 45, 10, 61), 0.78) !important;
  margin: 0 !important;
  font-size: 1.06rem !important;
  line-height: 1.55 !important;
}

.legal-card {
  background-color: #ffffff !important;
  border: 2px solid var(--duo-primary, #2D0A3D) !important;
  border-radius: 18px !important;
  padding: 40px !important;
  box-shadow: 5px 5px 0px var(--duo-primary, #2D0A3D) !important;
  color: var(--duo-primary, #2D0A3D) !important;
  line-height: 1.68 !important;
  font-size: 0.98rem !important;
}

.legal-card p,
.legal-card li,
.legal-card span {
  color: var(--duo-primary, #2D0A3D) !important;
}

.legal-callout {
  background: rgba(255, 230, 0, 0.16) !important;
  border-left: 5px solid var(--duo-primary, #2D0A3D) !important;
  border-top: 1.5px solid rgba(var(--duo-primary-rgb, 45, 10, 61), 0.15) !important;
  border-right: 1.5px solid rgba(var(--duo-primary-rgb, 45, 10, 61), 0.15) !important;
  border-bottom: 1.5px solid rgba(var(--duo-primary-rgb, 45, 10, 61), 0.15) !important;
  padding: 20px 24px !important;
  border-radius: 0 14px 14px 0 !important;
}

.legal-callout h3,
.legal-card h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
  color: var(--duo-primary, #2D0A3D) !important;
}

/* Legal text stored in the city settings (footer_config.legal.*.customHtml). */
.legal-custom-html-content > :first-child { margin-top: 0 !important; }
.legal-custom-html-content h3 { margin: 28px 0 6px 0 !important; }
.legal-custom-html-content h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  margin: 18px 0 4px 0;
  color: var(--duo-primary, #2D0A3D);
}
.legal-custom-html-content p { margin: 0 0 8px 0; overflow-wrap: anywhere; }
.legal-custom-html-content a { color: var(--duo-primary, #2D0A3D); font-weight: 700; text-decoration: underline; }
.legal-custom-html-content .legal-generator-note { margin-top: 28px; font-size: 0.85rem; opacity: 0.75; }

.legal-subcard {
  border: 1.5px solid rgba(var(--duo-primary-rgb, 45, 10, 61), 0.22) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  background: rgba(var(--duo-primary-rgb, 45, 10, 61), 0.02) !important;
}

.legal-subcard > div:first-child {
  color: var(--duo-primary, #2D0A3D) !important;
}

.legal-btn-duo {
  padding: 10px 22px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  background-color: var(--duo-accent, #FFE600) !important;
  color: var(--duo-primary, #2D0A3D) !important;
  border: 2px solid var(--duo-primary, #2D0A3D) !important;
  box-shadow: 3px 3px 0px var(--duo-primary, #2D0A3D) !important;
  transition: all 0.15s ease !important;
  font-family: 'DM Sans', sans-serif !important;
}

.legal-btn-duo:hover {
  transform: translateY(-2px) !important;
  box-shadow: 4px 4px 0px var(--duo-primary, #2D0A3D) !important;
}

.legal-table-container table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1.5px solid var(--duo-primary, #2D0A3D) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.legal-table-container th {
  background: var(--duo-primary, #2D0A3D) !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
  text-align: left !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
}

.legal-table-container td {
  padding: 12px 14px !important;
  border-top: 1px solid rgba(var(--duo-primary-rgb, 45, 10, 61), 0.15) !important;
  font-size: 0.88rem !important;
  color: var(--duo-primary, #2D0A3D) !important;
}

.legal-table-container tr:nth-child(even) td {
  background: rgba(var(--duo-primary-rgb, 45, 10, 61), 0.03) !important;
}

.cookie-cat-badge {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  border: 1.5px solid var(--duo-primary, #2D0A3D) !important;
  background: var(--duo-accent, #FFE600) !important;
  color: var(--duo-primary, #2D0A3D) !important;
}

@media (max-width: 768px) {
  .legal-page-section {
    padding: 24px 16px 64px !important;
  }
  .legal-card {
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }
  .legal-header h1 {
    font-size: 1.85rem !important;
  }
  .legal-nav-pills-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
  .legal-nav-pill {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   20. UNIFIED RESPONSIVE SYSTEM (TABLET & MOBILE PHONE SEPARATION)
   ========================================================================== */

/* --- 20.0 GLOBAL OVERFLOW & RELATIVE BASE RULES --- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

input, button, select, textarea {
  min-width: 0;
  max-width: 100%;
}

/* Fluid Headline Hyphenation & Word-Break for Long German Words */
h1, h2, h3, h4, h5, h6, .brand-heading, p {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* ==========================================================================
   20.1 TABLET BREAKPOINT (641px <= width <= 1024px)
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Section Padding & Containers */
  .web-home-section,
  .web-projects-section,
  .web-split-hero,
  body.theme-duotone .web-home-section,
  body.theme-duotone .web-projects-section,
  body.theme-duotone #webHomeEventsSection,
  body.theme-duotone #webHomeSocialSection,
  body.theme-duotone #webHomeHelperTeaser,
  body.theme-duotone #webHomePartnersSection,
  body.theme-duotone #webHomePartnerTippSection,
  body.theme-duotone #webHomeGastroSection,
  body.theme-duotone #webHomeJobsSection,
  body.theme-duotone #webHomeCouponsSection,
  body.theme-duotone #webHomeFinderSection,
  body.theme-duotone #webHomeNewsSection,
  body.theme-duotone #webHomeTransitTeaser,
  body.theme-duotone #webHomeServiceSection,
  body.theme-duotone #webHomeWeatherBlitzerSection,
  body.theme-duotone #webHomeRouletteSection,
  body.theme-duotone #webHomeMagazineSection {
    padding: clamp(40px, 5vw, 64px) clamp(16px, 3vw, 32px) 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .web-section-container,
  .web-projects-inner {
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header & Navigation */
  .hx-in {
    padding: 12px 20px !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
  .hx-brand {
    font-size: 20px !important;
  }
  .hx-search {
    max-width: 320px !important;
    height: 44px !important;
  }
  .hx-search input {
    font-size: 14px !important;
  }
  .hx-wx {
    display: none !important;
  }
  .hx-cta {
    padding: 0 14px !important;
    font-size: 14px !important;
    height: 42px !important;
  }
  .hx-burger {
    height: 44px !important;
    padding: 0 14px 0 12px !important;
  }
  .hx-quick {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    row-gap: 14px !important;
    column-gap: 8px !important;
    padding: 16px 20px 8px !important;
    max-width: 100% !important;
  }
  .hx-sep {
    display: none !important;
  }
  .hx-q i {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }

  /* Hero Stage */
  .duo-hero-stage,
  body.theme-duotone .duo-hero-stage {
    min-height: 480px !important;
    border-radius: 32px !important;
  }
  .duo-hero-dark-block {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(540px, 75%) !important;
    border-radius: 0 32px 0 0 !important;
    padding: 30px 32px !important;
    gap: 12px !important;
  }
  .duo-hero-title {
    font-size: clamp(32px, 4.5vw, 48px) !important;
    line-height: 0.95 !important;
  }
  .duo-hero-text {
    font-size: 14.5px !important;
    max-width: 46ch !important;
  }
  .duo-hero-slider-card {
    position: absolute !important;
    right: 20px !important;
    bottom: 20px !important;
    max-width: 300px !important;
    width: calc(100% - 40px) !important;
    padding: 18px 20px !important;
    margin: 0 !important;
  }
  .web-hero-search-wrapper,
  body.theme-duotone .web-hero-search-wrapper {
    max-width: 100% !important;
    margin: 20px auto 0 !important;
  }

  /* Events Teaser Split: 2 balanced columns */
  .web-home-events-split {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: stretch !important;
  }
  #webHomeEventsFeatured .client-card {
    height: 100% !important;
  }

  /* Social Cards: 3 columns */
  .web-social-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .social-hover-card {
    padding: 18px 16px !important;
    gap: 12px !important;
  }

  /* Helper Teaser */
  #webHomeHelperTeaser > div > div {
    padding: 36px 32px !important;
    border-radius: 28px !important;
  }

  /* Bento Grids (Wetter, Blitzer, Parken, Roulette) */
  .web-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .web-bento-grid > .duo-section-header-wrap,
  .web-bento-grid > .web-section-header {
    grid-column: 1 / -1 !important;
  }
  .web-bento-grid > div:not(.web-section-header) {
    grid-column: span 1 !important;
  }

  /* Transit (ÖPNV) */
  .duo-transit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* 2-Column Grids for Tablet Ergonomics */
  #webHomeCouponsGrid,
  .web-coupons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  #webHomeJobsList,
  #webHomeJobsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  #webGastroTeaserGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  #webHomeCompaniesGrid,
  .web-companies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .web-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  #webHomeNewsScrollContainer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    overflow: visible !important;
  }
  .web-home-services-grid,
  #webHomeServicesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  #webHomeMagazineGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Finder Card */
  .duo-finder-card {
    padding: 36px 32px !important;
    border-radius: 28px !important;
  }
  .duo-finder-search-row {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .duo-finder-search-bar {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Footer */
  .web-rich-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
    padding: 48px 24px 32px !important;
  }
}

/* ==========================================================================
   20.2 MOBILE PHONE BREAKPOINT (width <= 640px)
   ========================================================================== */
@media (max-width: 640px) {
  /* Section Padding & Container Margins */
  .web-home-section,
  .web-projects-section,
  .web-split-hero,
  body.theme-duotone .web-home-section,
  body.theme-duotone .web-projects-section,
  body.theme-duotone #webHomeEventsSection,
  body.theme-duotone #webHomeSocialSection,
  body.theme-duotone #webHomeHelperTeaser,
  body.theme-duotone #webHomePartnersSection,
  body.theme-duotone #webHomePartnerTippSection,
  body.theme-duotone #webHomeGastroSection,
  body.theme-duotone #webHomeJobsSection,
  body.theme-duotone #webHomeCouponsSection,
  body.theme-duotone #webHomeFinderSection,
  body.theme-duotone #webHomeNewsSection,
  body.theme-duotone #webHomeTransitTeaser,
  body.theme-duotone #webHomeServiceSection,
  body.theme-duotone #webHomeWeatherBlitzerSection,
  body.theme-duotone #webHomeRouletteSection,
  body.theme-duotone #webHomeMagazineSection {
    padding: 32px 14px 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .web-section-container,
  .web-projects-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Typography Fluid Scaling */
  body.theme-duotone h1,
  h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
  body.theme-duotone h2,
  .web-section-header h2,
  h2 {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
  }
  body.theme-duotone h3,
  h3 {
    font-size: clamp(17px, 5vw, 21px) !important;
    line-height: 1.25 !important;
  }
  body.theme-duotone p,
  p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  .web-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }

  /* Header (.hx-bar & .hx-in) */
  body.theme-duotone .hx-bar,
  .hx-bar {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }
  body.theme-duotone .hx-in,
  .hx-in {
    padding: 10px 14px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body.theme-duotone .hx-burger,
  .hx-burger {
    order: 1 !important;
    margin-right: 10px !important;
    margin-left: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 20px !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    color: var(--d) !important;
    border: none !important;
    cursor: pointer !important;
  }
  body.theme-duotone .hx-burger b,
  .hx-burger b {
    display: none !important;
  }
  body.theme-duotone .hx-brand,
  .hx-brand {
    order: 2 !important;
    font-size: 18px !important;
    max-width: calc(100% - 100px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }
  body.theme-duotone .hx-brand svg,
  .hx-brand svg {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  body.theme-duotone .hx-bar .hx-search,
  body.theme-duotone .hx-bar .hx-cta,
  body.theme-duotone .hx-bar .hx-wx,
  .hx-bar .hx-search,
  .hx-bar .hx-cta,
  .hx-bar .hx-wx {
    display: none !important;
  }
  body.theme-duotone .hx-icosearch,
  .hx-icosearch {
    order: 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 20px !important;
    border: 2px solid var(--l) !important;
    color: var(--l) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
  }

  /* Quicklinks Swipeable Ribbon */
  .hx-quick {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 12px 14px 6px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .hx-quick::-webkit-scrollbar {
    display: none !important;
  }
  .hx-q {
    flex: 0 0 66px !important;
    scroll-snap-align: start !important;
    font-size: 11px !important;
    gap: 4px !important;
    text-decoration: none !important;
  }
  .hx-q i {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }
  .hx-q i svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Hero Stage */
  .duo-hero-stage,
  body.theme-duotone .duo-hero-stage {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(45, 10, 61, 0.08) !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .duo-hero-bg,
  body.theme-duotone .duo-hero-bg {
    position: relative !important;
    inset: auto !important;
    height: 200px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .duo-hero-fav,
  body.theme-duotone .duo-hero-fav {
    right: 12px !important;
    top: 12px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 19px !important;
  }
  .duo-hero-dark-block,
  body.theme-duotone .duo-hero-dark-block {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 22px 16px 18px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  .duo-hero-title,
  body.theme-duotone .duo-hero-title {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
  .duo-hero-text,
  body.theme-duotone .duo-hero-text {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }
  .duo-hero-actions,
  body.theme-duotone .duo-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }
  .duo-hero-actions .duo-btn-accent,
  .duo-hero-actions .duo-btn-outline,
  body.theme-duotone .duo-hero-actions .duo-btn-accent,
  body.theme-duotone .duo-hero-actions .duo-btn-outline {
    width: 100% !important;
    text-align: center !important;
    height: 46px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14.5px !important;
    border-radius: 23px !important;
    box-sizing: border-box !important;
  }
  .duo-hero-actions .duo-btn-circle,
  body.theme-duotone .duo-hero-actions .duo-btn-circle {
    display: none !important;
  }
  .duo-hero-slider-card,
  body.theme-duotone .duo-hero-slider-card {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 12px 14px 14px 14px !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  .duo-slider-title {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
  .duo-slider-desc {
    font-size: 12.5px !important;
  }

  /* Hero Search Bar */
  .web-hero-search-wrapper,
  body.theme-duotone .web-hero-search-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 5px !important;
    border-radius: 28px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  .web-hero-search-inner-box,
  body.theme-duotone .web-hero-search-inner-box {
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: 22px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
  }
  .web-hero-search-inner-box svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  .web-hero-search-inner-box input,
  body.theme-duotone .web-hero-search-inner-box input {
    font-size: 13px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .web-hero-search-btn,
  body.theme-duotone .web-hero-search-btn {
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    border-radius: 22px !important;
    flex-shrink: 0 !important;
  }

  /* Partner Stories */
  body.theme-duotone #webPartnerStoriesStrip {
    padding: 32px 14px 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .web-stories-list {
    padding: 4px 0 !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .web-story-item {
    width: 62px !important;
    font-size: 10.5px !important;
  }
  .web-story-avatar-ring {
    width: 58px !important;
    height: 58px !important;
  }

  /* Kommende Veranstaltungen */
  .web-home-events-split {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }
  #webHomeEventsFeatured .client-card > div:first-child {
    height: 170px !important;
  }
  #webHomeEventsFeatured .client-card > div:nth-child(2) {
    padding: 16px 18px 20px !important;
  }
  body.theme-duotone #webHomeEventsList .client-card {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }
  body.theme-duotone #webHomeEventsList .client-card > div:first-child,
  body.theme-duotone #webHomeEventsList .web-home-event-date-badge {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 14px !important;
  }
  body.theme-duotone #webHomeEventsList .web-home-event-date-badge b {
    font-size: 18px !important;
  }
  body.theme-duotone #webHomeEventsList .web-home-event-date-badge span {
    font-size: 10px !important;
  }
  body.theme-duotone #webHomeEventsList .client-card h4 {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  body.theme-duotone #webHomeEventsList .client-card p {
    font-size: 12px !important;
  }
  body.theme-duotone .duo-events-all-btn,
  body.theme-duotone #webHomeEventsList > button {
    height: 46px !important;
    padding: 12px !important;
    border-radius: 23px !important;
    font-size: 14.5px !important;
  }

  /* Social Media Banner */
  .web-social-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.theme-duotone .social-hover-card {
    padding: 14px 16px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }
  body.theme-duotone .social-hover-card > div:first-child {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  /* Helper Teaser */
  body.theme-duotone #webHomeHelperTeaser > div > div {
    padding: 22px 16px !important;
    border-radius: 22px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  body.theme-duotone .duo-helper-bg-svg,
  .duo-helper-bg-svg,
  body.theme-duotone #webHomeHelperTeaser svg[viewBox="0 0 24 24"] {
    display: none !important;
  }
  body.theme-duotone #webHomeHelperTeaser .duo-helper-search-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.theme-duotone #webHomeHelperTeaser .duo-helper-search-bar {
    width: 100% !important;
    height: 44px !important;
    border-radius: 22px !important;
  }
  body.theme-duotone #webHomeHelperTeaser .duo-helper-search-btn {
    width: 100% !important;
    height: 44px !important;
    border-radius: 22px !important;
  }

  /* Premium Partner Logos */
  body.theme-duotone #webHomePartnersSection > div > div:nth-child(2) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Lieblingsbetrieb vorschlagen */
  body.theme-duotone #webHomePartnerTippSection > div > div,
  .duo-recommendation-card {
    padding: 22px 16px !important;
    border-radius: 22px !important;
    gap: 14px !important;
    overflow: hidden !important;
  }
  body.theme-duotone #webHomePartnerTippSection button,
  .duo-recommendation-card button {
    width: 100% !important;
    height: 46px !important;
    border-radius: 23px !important;
  }

  /* Bento Grids (Wetter, Radar, Parkplätze, Roulette) */
  body.theme-duotone .web-bento-grid,
  .web-bento-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.theme-duotone .web-bento-grid > div,
  .web-bento-grid > div,
  body.theme-duotone .web-bento-grid > .client-card,
  .web-bento-grid > .client-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ÖPNV Transit Grid */
  body.theme-duotone .duo-transit-grid,
  .duo-transit-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Single Column Content Teasers (Gastro, Jobs, Betriebe, Magazin) */
  #webGastroTeaserGrid,
  #webHomeJobsList,
  #webHomeJobsGrid,
  #webHomeCompaniesGrid,
  #webHomeMagazineGrid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* Full-Width Buttons */
  #webHomeGastroSection button,
  #webHomeJobsSection a[href*="#jobs"],
  #webHomeCompaniesSection a[href*="#companies"],
  #webHomeCouponsSection button.client-btn-outline,
  #webHomeMagazineSection a[href*="#magazin"],
  #webHomeMagazineSection button {
    width: 100% !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 23px !important;
    font-size: 14.5px !important;
    box-sizing: border-box !important;
  }

  /* Spar-Coupons Ticket Cards */
  #webHomeCouponsGrid,
  .web-coupons-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .ticket-coupon-card {
    padding: 18px 16px 16px !important;
    border-radius: 22px !important;
    min-height: 195px !important;
    box-sizing: border-box !important;
  }
  .ticket-discount-headline {
    font-size: 1.55rem !important;
    margin: 8px 0 4px !important;
  }
  .ticket-subtext {
    font-size: 0.84rem !important;
    min-height: auto !important;
  }
  .ticket-notch-divider {
    margin: 14px -16px 12px !important;
  }
  .ticket-notch-divider::before,
  .ticket-notch-divider::after {
    top: -10px !important;
    width: 20px !important;
    height: 20px !important;
  }
  .ticket-notch-divider::before {
    left: -11px !important;
  }
  .ticket-notch-divider::after {
    right: -11px !important;
  }
  .ticket-coupon-code-box {
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    gap: 6px !important;
  }
  .ticket-coupon-code-btn {
    padding: 5px 9px !important;
    font-size: 0.68rem !important;
  }

  /* Finder Teaser */
  body.theme-duotone .duo-finder-card,
  body.theme-duotone #webHomeFinderSection > div > div,
  .duo-finder-card {
    padding: 22px 16px !important;
    border-radius: 22px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  body.theme-duotone .duo-finder-headline,
  body.theme-duotone #webHomeFinderSection h2,
  .duo-finder-headline {
    font-size: 24px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  .duo-finder-bg-svg,
  body.theme-duotone .duo-finder-bg-svg,
  body.theme-duotone #webHomeFinderSection div[style*="opacity: 0.15"] {
    display: none !important;
  }
  .duo-finder-search-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .duo-finder-search-bar {
    width: 100% !important;
    height: 44px !important;
    border-radius: 22px !important;
  }
  body.theme-duotone #webHomeFinderSection button {
    width: 100% !important;
    height: 46px !important;
    border-radius: 23px !important;
  }

  /* News Teaser */
  #webHomeNewsScrollContainer {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: visible !important;
    width: 100% !important;
  }
  #webHomeNewsScrollContainer > a {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }
  #btnWebHomeNewsScrollNext {
    display: none !important;
  }

  /* Services Grid (Wetter, Blitzer, Parken) */
  .web-home-services-grid,
  #webHomeServicesGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Footer */
  .web-rich-footer {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 32px 14px 24px !important;
  }
  .web-footer-store-btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .web-store-badge-link {
    width: 100% !important;
    justify-content: center !important;
    height: 46px !important;
  }
  .web-footer-bottom-inner {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* Subpages System Responsive (News, Events, Single Event, Finder, Gastro, Jobs, Partner, Coupons, Helfer, Wetter, Blitzer, Parken, ÖPNV, Magazin) */
  .web-events-hero-stage,
  .web-companies-hero-stage,
  .web-coupons-hero-stage,
  .web-jobs-hero-stage,
  .web-finder-hero-stage,
  .web-news-hero-stage,
  .web-gastro-hero-stage,
  .web-partner-hero-stage,
  .web-helfer-hero-stage,
  .web-wetter-hero-stage,
  .web-blitzer-hero-stage,
  .web-parking-hero-stage,
  .web-oepnv-hero-stage,
  .web-mag-hero-stage,
  .web-event-single-hero,
  .web-job-detail-stage {
    padding: 14px 14px 16px !important;
    border-radius: 0 0 24px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .web-events-hero-inner,
  .web-companies-hero-inner,
  .web-coupons-hero-inner,
  .web-jobs-hero-inner,
  .web-finder-hero-inner,
  .web-news-hero-inner,
  .web-gastro-hero-inner,
  .web-partner-hero-inner,
  .web-helfer-hero-inner,
  .web-wetter-hero-inner,
  .web-blitzer-hero-inner,
  .web-parking-hero-inner,
  .web-oepnv-hero-inner,
  .web-mag-hero-inner,
  .web-event-single-hero-inner,
  .web-job-detail-inner {
    padding: 0 !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .web-events-hero-top-row,
  .web-companies-hero-top-row,
  .web-coupons-hero-top-row,
  .web-jobs-hero-top-row,
  .web-finder-hero-top-row,
  .web-news-hero-top-row,
  .web-gastro-hero-top-row,
  .web-partner-hero-top-row,
  .web-helfer-hero-top-row,
  .web-blitzer-hero-top-row,
  .web-parking-hero-top-row,
  .web-oepnv-hero-top-row,
  .web-mag-hero-top-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
    width: 100% !important;
  }

  /* Compact Headlines - avoid multi-line word breaks */
  .web-events-hero-title,
  .web-companies-hero-title,
  .web-coupons-hero-title,
  .web-jobs-hero-title,
  .web-finder-hero-title,
  .web-news-hero-title,
  .web-gastro-hero-title,
  .web-partner-hero-title,
  .web-helfer-hero-title,
  .web-blitzer-hero-title,
  .web-parking-hero-title,
  .web-oepnv-hero-title,
  .web-mag-hero-title,
  .web-event-single-title,
  .web-job-detail-stage h1,
  body.theme-duotone .web-event-single-hero h1,
  body.theme-duotone .web-events-hero-stage h1,
  body.theme-duotone .web-news-hero-stage h1,
  body.theme-duotone .web-finder-hero-stage h1,
  body.theme-duotone .web-partner-hero-stage h1,
  body.theme-duotone .web-gastro-hero-stage h1,
  body.theme-duotone .web-jobs-hero-stage h1,
  body.theme-duotone .web-coupons-hero-stage h1,
  body.theme-duotone .web-helfer-hero-stage h1,
  body.theme-duotone .web-mag-hero-stage h1 {
    font-size: clamp(22px, 5.5vw, 26px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    word-break: normal !important;
    hyphens: auto !important;
    margin: 0 !important;
  }

  /* Hide long intro descriptions in hero stages on mobile to save space */
  .web-events-hero-desc,
  .web-companies-hero-desc,
  .web-coupons-hero-desc,
  .web-finder-hero-desc,
  .web-news-hero-desc,
  .web-gastro-hero-desc,
  .web-partner-hero-desc,
  .web-helfer-hero-desc,
  .web-blitzer-hero-desc,
  .web-parking-hero-desc,
  .web-oepnv-hero-desc,
  .web-mag-hero-desc {
    display: none !important;
  }

  /* Compact KPI & stats badges */
  .web-coupons-stats-badge,
  .web-events-stats-pill,
  .web-partner-stats-pill,
  .web-mag-hero-kpi,
  .web-parking-hero-kpi,
  .web-blitzer-hero-kpi {
    display: none !important;
  }

  /* Compact search wraps */
  .web-news-search-wrap,
  .web-events-search-wrap,
  .web-finder-search-label,
  .web-gastro-search-wrap,
  .web-helfer-search-wrap,
  .web-jobs-search-wrap,
  .web-mag-search-wrap,
  .web-oepnv-search-bar {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 20px !important;
    margin: 2px 0 !important;
    box-sizing: border-box !important;
  }
  .web-news-search-wrap input,
  .web-events-search-wrap input,
  .web-finder-search-input,
  .web-gastro-search-wrap input,
  .web-helfer-search-wrap input,
  .web-jobs-search-input,
  .web-mag-search-wrap input {
    height: 100% !important;
    font-size: 13.5px !important;
    padding: 0 14px 0 38px !important;
    box-sizing: border-box !important;
  }

  /* Horizontal Filter Ribbons */
  .web-coupons-chips,
  .web-company-chips-row,
  .web-events-cat-pills,
  .web-events-pills-row,
  .web-gastro-tabs-row,
  .web-finder-categories-row,
  .web-helfer-pills-row,
  .web-news-cat-pills {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 2px 0 !important;
    scrollbar-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .web-coupons-chips::-webkit-scrollbar,
  .web-company-chips-row::-webkit-scrollbar,
  .web-events-cat-pills::-webkit-scrollbar,
  .web-events-pills-row::-webkit-scrollbar,
  .web-gastro-tabs-row::-webkit-scrollbar,
  .web-finder-categories-row::-webkit-scrollbar,
  .web-helfer-pills-row::-webkit-scrollbar,
  .web-news-cat-pills::-webkit-scrollbar {
    display: none !important;
  }
  .web-coupons-chip,
  .web-company-chip,
  .web-event-cat-pill,
  .web-events-cat-btn,
  .web-gastro-tab-btn,
  .web-finder-chip,
  .web-news-cat-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    border-radius: 16px !important;
  }

  /* --- 1. LOKALE NACHRICHTEN MOBILE & MODAL --- */
  .web-news-zeitraum-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    margin-top: 2px !important;
  }
  .web-news-filter-label {
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
    color: var(--duo-accent, #FFE600) !important;
  }
  .web-news-zeitraum-group {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .web-news-zeitraum-btn {
    height: 30px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    border-radius: 15px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .web-news-main-wrap {
    padding: 16px 14px 40px !important;
    gap: 18px !important;
  }
  .web-news-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .web-news-card {
    flex-direction: column !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .web-news-card-thumb {
    width: 100% !important;
    height: 160px !important;
  }
  .web-news-card-body {
    padding: 14px 16px 16px !important;
    gap: 8px !important;
  }
  .web-news-card-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  /* News Modal Fixes: Touch scroll & proper close icon size */
  .web-news-modal-overlay {
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  .web-news-modal-overlay[style*="display: none"] {
    display: none !important;
  }
  .web-news-modal-dialog {
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: auto 0 !important;
  }
  .web-news-modal-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    top: 10px !important;
    right: 10px !important;
    border-width: 2px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  }
  .web-news-modal-hero-img {
    height: 180px !important;
  }
  .web-news-modal-content-wrap {
    padding: 16px 14px !important;
    gap: 12px !important;
  }
  .web-news-modal-title {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.15 !important;
    padding-right: 38px !important;
  }
  .web-news-modal-lead {
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    padding-left: 10px !important;
    border-left-width: 4px !important;
  }
  .web-news-modal-body {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* --- 2. FINDER CARDS & OVERFLOW FIXES --- */
  .web-finder-main-stage {
    padding: 16px 14px 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .web-finder-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .web-finder-radius-group {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .web-finder-radius-label {
    font-size: 13.5px !important;
  }
  .web-finder-radius-value {
    font-size: 15px !important;
    min-width: auto !important;
    text-align: right !important;
  }
  .web-finder-radius-slider {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    order: 3 !important;
    margin: 4px 0 0 0 !important;
  }
  .web-finder-sort-label {
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
  .web-finder-sort-select {
    width: 100% !important;
    font-size: 13.5px !important;
  }
  .web-finder-map-wrapper {
    height: 240px !important;
    border-radius: 18px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .web-finder-cards-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  .web-finder-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .web-finder-card-media {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 15px !important;
  }
  .web-finder-card-name,
  .web-finder-card-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  .web-finder-card-status {
    font-size: 13px !important;
  }
  .web-finder-card-address {
    font-size: 12px !important;
  }
  .web-finder-card-fav-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 19px !important;
  }
  .web-finder-card-dist {
    font-size: 13.5px !important;
  }
  .web-finder-modal-overlay {
    padding: 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  .web-finder-modal-overlay[style*="display: none"] {
    display: none !important;
  }
  .web-finder-modal-dialog {
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: auto 0 !important;
  }
  .web-finder-modal-actions {
    top: 10px !important;
    right: 10px !important;
    gap: 6px !important;
  }
  .web-finder-modal-close-btn,
  .web-finder-modal-fav-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  /* --- 3. EVENTS FILTER & SINGLE PAGE FIXES --- */
  .web-events-filter-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .web-events-filter-subgroup {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .web-events-segmented-control {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 4px !important;
    padding: 3px !important;
    border-radius: 20px !important;
  }
  .web-events-segmented-control::-webkit-scrollbar {
    display: none !important;
  }
  .web-events-seg-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    border-radius: 17px !important;
  }
  .web-events-distance-wrap {
    width: 100% !important;
    margin: 4px 0 0 0 !important;
    display: block !important;
  }
  .web-events-distance-select {
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    border-radius: 19px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }
  .web-events-content {
    padding: 16px 14px 40px !important;
    gap: 24px !important;
  }
  #webEventsContainer {
    gap: 28px !important;
  }
  .web-event-single-hero {
    padding: 14px 14px 20px !important;
    border-radius: 0 0 24px 24px !important;
  }
  .web-event-single-hero-inner {
    gap: 12px !important;
  }
  .web-event-single-hero-columns {
    gap: 12px !important;
  }
  .web-event-single-hero-info {
    gap: 12px !important;
  }
  body.theme-duotone .web-event-single-title,
  .web-event-single-title,
  .web-event-single-title.is-hero-large {
    font-size: clamp(22px, 5.5vw, 26px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 4px 0 !important;
    word-break: normal !important;
    hyphens: auto !important;
  }
  .web-event-single-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }
  .web-event-single-meta-item {
    padding: 8px 12px !important;
    border-radius: 12px !important;
    gap: 10px !important;
    background: rgba(255, 230, 0, 0.08) !important;
    border: 1.5px solid rgba(255, 230, 0, 0.25) !important;
  }
  .web-event-single-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .web-event-btn-ticket,
  .web-event-btn-outline {
    width: 100% !important;
    height: 42px !important;
    border-radius: 21px !important;
    font-size: 13.5px !important;
    justify-content: center !important;
  }
  .web-event-single-photo-wrap {
    height: 190px !important;
    border-radius: 16px !important;
    margin-top: 10px !important;
  }

  /* --- 4. HEADER BACK BUTTON & RESPONSIVE FIXES --- */
  .hx-back-home-btn {
    display: none !important; /* On mobile, subpage in-page breadcrumb is used to avoid duplicate Startseite buttons */
  }
  .web-events-grid,
  .web-companies-grid,
  .web-jobs-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* Slide-Out Drawer Dialog (Mobile: Slide in from Left) */
  .hx-pan {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  .hx-ov.active .hx-pan {
    transform: translateX(0) !important;
  }
  .hx-ph {
    padding: 14px 14px 16px !important;
  }
  .hx-body {
    padding: 4px 14px 24px !important;
  }
  .hx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .hx-it {
    min-height: 50px !important;
    padding: 6px 8px 6px 6px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
  }
  .hx-it i {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  .hx-it span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

}

/* ==========================================================================
   20.3 EXTRA SMALL MOBILE PHONES (width <= 380px)
   ========================================================================== */
@media (max-width: 380px) {
  .web-home-section,
  .web-projects-section,
  .web-split-hero,
  body.theme-duotone .web-home-section,
  body.theme-duotone .web-projects-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .hx-in {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .hx-brand {
    font-size: 16px !important;
  }
  .hx-back-home-btn {
    display: none !important;
  }
  .hx-q {
    flex: 0 0 58px !important;
    font-size: 10px !important;
  }
  .hx-q i {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }
  .duo-hero-title {
    font-size: 22px !important;
  }
  .ticket-discount-headline {
    font-size: 1.35rem !important;
  }
}



/* Glättemonitor (black ice sensors) */
.web-ice-box { gap: 14px; }
.web-ice-title { margin: 0; font: 900 24px/1.1 'Inter', sans-serif; color: var(--duo-primary, #2D0A3D); }
.web-ice-stand { font-size: 13px; font-weight: 700; color: var(--duo-primary, #2D0A3D); opacity: 0.75; }
.web-ice-headline { border-radius: 14px; padding: 12px 14px; font-weight: 800; font-size: 15px; color: var(--duo-primary, #2D0A3D); background: rgba(45, 10, 61, 0.07); }
.web-ice-headline[data-level="risk"] { background: #dc2626; color: #ffffff; }
.web-ice-headline[data-level="watch"] { background: #f59e0b; color: #1f2937; }
.web-ice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 24px; }
.web-ice-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(45, 10, 61, 0.12); font-size: 14px; color: var(--duo-primary, #2D0A3D); min-width: 0; }
.web-ice-row span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-ice-row b { font-weight: 800; }
.web-ice-tag { font-size: 11px; font-weight: 800; border-radius: 8px; padding: 2px 6px; }
.web-ice-tag.is-risk { background: #dc2626; color: #ffffff; }
.web-ice-tag.is-watch { background: #f59e0b; color: #1f2937; }
.web-ice-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--duo-primary, #2D0A3D); opacity: 0.8; }
.web-ice-note a { color: inherit; font-weight: 700; }

.web-ice-alert { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #dc2626; color: #ffffff; text-decoration: none; font-size: 15px; line-height: 1.35; box-sizing: border-box; }
.web-ice-alert[hidden] { display: none; }
.web-ice-alert b { display: block; font-weight: 900; font-size: 16px; }
.web-ice-alert > span:nth-child(2) { flex: 1; min-width: 0; }
.web-ice-alert-more { flex: none; font-weight: 800; text-decoration: underline; white-space: nowrap; }
@media (max-width: 600px) { .web-ice-alert-more { display: none; } }

/* Special spaces (e-charging, family, disabled) in car parks */
.web-parking-special-line { font-size: 13px; font-weight: 700; color: var(--duo-primary, #2D0A3D); line-height: 1.4; }
.web-parking-special-line span { font-weight: 500; opacity: 0.75; }

/* Parking cards share one row grid (subgrid), so badges, titles, capacity and buttons line up
   across all cards in a row, whatever the length of the texts. */
@supports (grid-template-rows: subgrid) {
  .web-parking-grid { row-gap: 16px; }
  .web-parking-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    grid-row: span 7;
    grid-template-rows: subgrid;
    column-gap: 14px;
    row-gap: 6px;
  }
  .web-parking-card-head,
  .web-parking-card-main { display: contents; }
  .web-parking-card-icon { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .web-parking-card-fav { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
  .web-parking-card-main > .web-parking-badges { grid-column: 2; grid-row: 1; min-height: 22px; align-self: end; }
  .web-parking-card-main > .web-parking-card-title { grid-column: 2; grid-row: 2; align-self: start; }
  .web-parking-card-main > .web-parking-card-addr { grid-column: 2; grid-row: 3; align-self: start; }
  .web-parking-card-main > .web-parking-tariff-line { grid-column: 2; grid-row: 4; align-self: start; justify-self: start; }
  .web-parking-card-capacity { grid-column: 1 / -1; grid-row: 5; align-self: end; margin-top: 12px; }
  .web-parking-card-special { grid-column: 1 / -1; grid-row: 6; align-self: start; }
  .web-parking-card > .web-parking-actions { grid-column: 1 / -1; grid-row: 7; align-self: end; margin-top: 12px; }
}

.web-parking-hero-kpi[hidden] { display: none !important; }

/* "Weitere anzeigen" below the finder cards */
.web-finder-more-btn { grid-column: 1 / -1; justify-self: center; margin-top: 8px; padding: 0 24px; height: 46px; border-radius: 23px; border: 2.5px solid var(--duo-primary, #2D0A3D); background: #FFFFFF; color: var(--duo-primary, #2D0A3D); font: 800 15px 'DM Sans', sans-serif; cursor: pointer; }
.web-finder-more-btn:hover { background: var(--duo-accent, #FFE600); }

/* Symbol photo overlay for feed news: kicker (section, place) and keyword from the headline */
.web-news-symbol { container-type: inline-size; --max: 17px; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 10px 12px; box-sizing: border-box; pointer-events: none;
  background: linear-gradient(180deg, rgba(45, 10, 61, 0) 20%, rgba(45, 10, 61, 0.85) 100%); color: var(--duo-accent, #FFE600); }
.web-news-symbol small { font: 800 9px/1.15 'DM Sans', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; opacity: 0.92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-news-symbol b { font: 900 clamp(10px, calc((100cqw - 24px) / (var(--len) * 0.88)), var(--max))/1.2 'Inter', sans-serif; padding-top: 0.08em; letter-spacing: -0.01em; text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.web-news-symbol--md { --max: 24px; }
.web-news-symbol--md small { font-size: 11px; }
.web-news-symbol--lg { padding: 22px 28px; gap: 6px; }
.web-news-symbol--lg { --max: 60px; }
.web-news-symbol--lg small { font-size: 14px; }

/* ==========================================
   Light entries (real businesses from OpenStreetMap, no partner contract)
   ========================================== */
.web-light-card { border-style: dashed; }
.web-light-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 18px 0; text-decoration: none; color: var(--duo-primary, #2D0A3D);
}
.web-light-card-initials {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--duo-primary, #2D0A3D) 8%, #FFFFFF);
  color: var(--duo-primary, #2D0A3D); display: grid; place-items: center;
  font: 900 14px 'Inter', sans-serif;
}
.web-light-card-kicker { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; opacity: .8; }
.web-light-card-note { font-size: 12.5px; font-weight: 600; color: var(--duo-primary, #2D0A3D); opacity: .6; }
.web-light-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 8px 0 4px; }
.web-light-more .web-duo-btn-view { border: none; cursor: pointer; font: inherit; font-weight: 800; }

.web-light-detail { display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 48px; max-width: 980px; margin: 0 auto; box-sizing: border-box; color: var(--duo-primary, #2D0A3D); }
.web-light-back { font-weight: 700; color: var(--duo-primary, #2D0A3D); text-decoration: none; }
.web-light-hero {
  border-radius: 28px; background: var(--duo-primary, #2D0A3D); color: #FFFFFF;
  padding: 32px; display: flex; flex-direction: column; gap: 12px;
}
.web-light-hero-kicker { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; color: var(--duo-accent, #FFE600); }
.web-light-hero .web-light-card-initials { background: var(--duo-accent, #FFE600); }
.web-light-hero h1 { margin: 0; font: 900 clamp(32px, 6vw, 48px)/1 'Inter', sans-serif; letter-spacing: -0.03em; color: var(--duo-accent, #FFE600) !important; overflow-wrap: anywhere; }
.web-light-hero p { margin: 0; font-size: 16px; line-height: 1.45; }
.web-light-hero-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.web-light-badge {
  border: 1.5px solid rgba(255,255,255,.7); color: #FFFFFF; border-radius: 12px;
  padding: 3px 10px; font-size: 12px; font-weight: 700;
}
.web-light-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.web-light-box { border: 2.5px solid var(--duo-primary, #2D0A3D); border-radius: 24px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.web-light-box h2, .web-light-cta h2, .web-light-owner h2 { margin: 0 0 4px; font: 900 20px/1.2 'Inter', sans-serif; color: var(--duo-primary, #2D0A3D); }
.web-light-line { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; overflow-wrap: anywhere; }
.web-light-line a, .web-light-source a { color: var(--duo-primary, #2D0A3D); font-weight: 700; }
.web-light-hours { margin: 0; font-size: 15px; font-weight: 600; }
.web-light-muted { margin: 0; font-size: 15px; opacity: .65; }
.web-light-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.web-light-facts span { border-radius: 12px; padding: 4px 10px; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--duo-primary, #2D0A3D) 8%, #FFFFFF); }
.web-light-cta {
  display: flex; gap: 16px; align-items: flex-start; border-radius: 28px; padding: 24px;
  background: var(--duo-accent, #FFE600); color: var(--duo-primary, #2D0A3D);
}
.web-light-cta-icon { flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--duo-primary, #2D0A3D); color: var(--duo-accent, #FFE600); display: grid; place-items: center; }
.web-light-cta p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.5; }
.web-light-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.web-light-btn-primary, .web-light-btn-secondary {
  border-radius: 999px; padding: 11px 20px; font: 800 15px 'Inter', sans-serif; cursor: pointer; text-decoration: none;
  border: 2.5px solid var(--duo-primary, #2D0A3D);
}
.web-light-btn-primary { background: var(--duo-primary, #2D0A3D); color: var(--duo-accent, #FFE600); }
.web-light-btn-secondary { background: transparent; color: var(--duo-primary, #2D0A3D); }
.web-light-owner {
  display: flex; gap: 16px; align-items: flex-start; border-radius: 28px; padding: 24px;
  border: 2.5px solid var(--duo-primary, #2D0A3D); background: #FFFFFF; color: var(--duo-primary, #2D0A3D);
}
.web-light-owner p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; }
.web-light-owner-list { margin: 0 0 16px; padding-left: 20px; font-size: 15.5px; line-height: 1.5; }
.web-light-owner-list li { margin: 2px 0; }
.web-light-divider {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 12px 2px 0; border-top: 2px dashed var(--duo-primary, #2D0A3D); color: var(--duo-primary, #2D0A3D);
}
.web-light-divider strong { font: 900 20px 'Inter', sans-serif; }
.web-light-divider span { font-size: 14px; font-weight: 600; opacity: .7; }
.web-light-actions { display: flex; gap: 10px; }
.web-light-source { margin: 0; font-size: 13px; line-height: 1.5; opacity: .75; }
@media (max-width: 600px) {
  .web-light-hero { padding: 24px 20px; }
  .web-light-cta, .web-light-owner { flex-direction: column; padding: 20px; }
}
.web-light-detail .web-light-box h2 { font-size: 19px !important; line-height: 1.2 !important; letter-spacing: -0.01em; }
.web-light-detail .web-light-cta h2, .web-light-detail .web-light-owner h2 { font-size: 22px !important; line-height: 1.2 !important; letter-spacing: -0.01em; }

/* ==========================================================================
   SEARCH POP-UP (webSearchModal) – duotone, grouped results, keyboard navigation
   ========================================================================== */
#webSearchModal {
  position: fixed; inset: 0; z-index: 3000; display: none; align-items: flex-start; justify-content: center;
  padding: 7vh 16px 24px; box-sizing: border-box; overflow-y: auto;
  background: rgba(20, 6, 28, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ws-dialog {
  --ws-p: var(--duo-primary, #2D0A3D); --ws-a: var(--duo-accent, #FFE600); --ws-soft: #F3EFF5; --ws-line: #E9E2EE;
  width: 100%; max-width: 760px; max-height: calc(100vh - 7vh - 24px); display: flex; flex-direction: column;
  background: #FFFFFF; color: var(--ws-p); border: 2.5px solid var(--ws-p); border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); font-family: 'DM Sans', 'Inter', sans-serif;
}
.ws-head { background: var(--ws-p); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.ws-head-row { display: flex; align-items: center; gap: 10px; }
.ws-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: #FFFFFF; border-radius: 999px;
  padding: 0 8px 0 18px; height: 54px; box-shadow: 0 0 0 3px transparent; transition: box-shadow .15s ease;
}
.ws-field:focus-within { box-shadow: 0 0 0 3px var(--ws-a); }
.ws-field svg { flex: none; color: var(--ws-p); }
#webModalSearchInput {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ws-p);
  font: 600 17px 'DM Sans', 'Inter', sans-serif; padding: 0;
}
#webModalSearchInput::placeholder { color: var(--ws-p); opacity: .55; }
.ws-clear {
  flex: none; display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--ws-soft); color: var(--ws-p); cursor: pointer; font: 700 20px/1 sans-serif;
}
.ws-close {
  flex: none; height: 46px; padding: 0 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.35);
  background: transparent; color: #FFFFFF; font: 700 14px 'DM Sans', sans-serif; cursor: pointer;
}
.ws-close:hover { border-color: var(--ws-a); color: var(--ws-a); }
.ws-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ws-tabs:empty { display: none; }
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35); background: transparent; color: #FFFFFF; cursor: pointer;
  font: 700 13.5px 'DM Sans', sans-serif; white-space: nowrap;
}
.ws-tab b { font-weight: 800; opacity: .75; }
.ws-tab.is-active { background: var(--ws-a); border-color: var(--ws-a); color: var(--ws-p); }
.ws-tab.is-active b { opacity: 1; }
.ws-body { flex: 1; overflow-y: auto; padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 22px; }
.ws-label { margin: 0 0 10px; font: 800 12.5px 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .65; display: flex; justify-content: space-between; align-items: center; }
.ws-label button { border: none; background: none; color: var(--ws-p); font: 700 12.5px 'DM Sans', sans-serif; text-transform: none; letter-spacing: 0; cursor: pointer; text-decoration: underline; opacity: .9; }
.ws-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ws-tile {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; border: 2px solid var(--ws-line);
  background: #FFFFFF; color: var(--ws-p); text-decoration: none; font: 700 14.5px 'DM Sans', sans-serif; transition: border-color .15s, background .15s;
}
.ws-tile:hover, .ws-tile:focus-visible { border-color: var(--ws-p); background: var(--ws-soft); outline: none; }
.ws-tile-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--ws-p); color: var(--ws-a); display: grid; place-items: center; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--ws-p); background: #FFFFFF; color: var(--ws-p); font: 700 14px 'DM Sans', sans-serif; cursor: pointer;
}
.ws-chip:hover { background: var(--ws-a); }
.ws-chip.is-recent { border-style: dashed; }
.ws-section { display: flex; flex-direction: column; gap: 8px; }
.ws-section-head { display: flex; align-items: center; gap: 10px; }
.ws-section-head h3 { margin: 0; font: 900 18px 'Inter', 'DM Sans', sans-serif !important; letter-spacing: -0.01em; color: var(--ws-p) !important; }
.ws-section-head span { min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ws-soft); font: 800 12.5px/22px 'DM Sans', sans-serif; text-align: center; }
.ws-list { display: flex; flex-direction: column; border: 2px solid var(--ws-line); border-radius: 20px; overflow: hidden; }
.ws-hit {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #FFFFFF; cursor: pointer;
  border: none; border-top: 1px solid var(--ws-line); text-align: left; width: 100%; color: var(--ws-p); font: inherit;
}
.ws-list .ws-hit:first-child { border-top: none; }
.ws-hit:hover, .ws-hit.is-selected { background: var(--ws-soft); }
.ws-hit.is-selected { box-shadow: inset 4px 0 0 var(--ws-p); }
.ws-thumb { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--ws-soft) center/cover no-repeat; display: grid; place-items: center; color: var(--ws-p); }
.ws-hit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-hit-title { font: 800 15.5px/1.3 'DM Sans', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hit-meta { font-size: 13px; line-height: 1.35; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hit mark { background: var(--ws-a); color: inherit; border-radius: 3px; padding: 0 1px; }
.ws-hit-snippet { margin-top: 4px; font-size: 13px; line-height: 1.4; white-space: normal; opacity: .85; }
.ws-pdf { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--ws-a); font: 800 11.5px 'DM Sans', sans-serif; vertical-align: 2px; }
.ws-pdf-link { flex: none; font: 700 13px 'DM Sans', sans-serif; color: var(--ws-p); text-decoration: underline; padding: 6px; }
.ws-arrow { flex: none; opacity: .45; }
.ws-more {
  align-self: flex-start; border: none; background: none; color: var(--ws-p); cursor: pointer; padding: 4px 2px;
  font: 800 14px 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px;
}
.ws-empty { text-align: center; padding: 28px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ws-empty h3 { margin: 0; font: 900 20px 'Inter', sans-serif !important; color: var(--ws-p) !important; }
.ws-empty p { margin: 0; font-size: 15px; line-height: 1.5; opacity: .8; max-width: 440px; }
.ws-empty-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--ws-soft); display: grid; place-items: center; }
.ws-skel { height: 70px; border-radius: 16px; background: linear-gradient(90deg, var(--ws-soft) 0%, #FBF9FC 50%, var(--ws-soft) 100%); background-size: 200% 100%; animation: wsShimmer 1.1s linear infinite; }
@keyframes wsShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ws-foot {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 18px;
  border-top: 2px solid var(--ws-line); font-size: 12.5px; color: var(--ws-p);
}
.ws-foot span { opacity: .7; }
.ws-keys { display: flex; gap: 12px; align-items: center; opacity: .75; white-space: nowrap; }
.ws-keys kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 6px; border: 1.5px solid var(--ws-line); background: #FFFFFF; font: 700 11.5px 'DM Sans', sans-serif; text-align: center; margin-right: 3px; }
@media (max-width: 640px) {
  #webSearchModal { padding: 0; }
  .ws-dialog { max-width: none; max-height: none; height: 100%; border: none; border-radius: 0; }
  .ws-head { padding: 14px 12px 12px; padding-top: max(14px, env(safe-area-inset-top)); }
  .ws-field { height: 50px; padding-left: 14px; }
  #webModalSearchInput { font-size: 16px; }
  .ws-close { height: 42px; padding: 0 12px; }
  .ws-body { padding: 16px 12px 20px; }
  .ws-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-keys { display: none; }
}

/* Temporary partner promo banner below the partner teaser on the homepage */
.web-partner-promo-banner {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  border-radius: 28px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.web-partner-promo-banner:hover { transform: translateY(-2px); }
.web-partner-promo-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.web-partner-promo-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.web-partner-promo-text strong { font-family: Inter, sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
.web-partner-promo-text span:last-child { font-size: 15px; line-height: 1.45; color: #FFFFFF; opacity: 0.9; }
.web-partner-promo-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--duo-accent, #FFE600);
  color: var(--duo-primary, #2D0A3D);
  font-weight: 800;
  font-size: 15px;
}
@media (max-width: 700px) {
  .web-partner-promo-banner { flex-direction: column; align-items: flex-start; padding: 22px; }
  .web-partner-promo-text strong { font-size: 22px; }
}

/* Temporary promo banner for gastro partners (left side of the homepage gastro teaser) */
.web-gastro-promo-banner {
  flex: 1 1 460px;
  min-height: 400px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 34px 32px;
  border-radius: 32px;
  background: var(--duo-primary, #2D0A3D);
  color: var(--duo-accent, #FFE600);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.web-gastro-promo-banner:hover { transform: translateY(-2px); }
.web-gastro-promo-banner strong { font-family: Inter, sans-serif; font-weight: 900; font-size: 30px; letter-spacing: -0.02em; line-height: 1.12; }
.web-gastro-promo-banner ul { margin: 0; padding-left: 20px; color: #FFFFFF; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.web-gastro-promo-banner .web-partner-promo-btn { align-self: flex-start; margin-top: 6px; }
.web-gastro-teaser-light { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) {
  .web-gastro-promo-banner { min-height: 0; padding: 24px; }
  .web-gastro-promo-banner strong { font-size: 24px; }
  .web-gastro-teaser-light { grid-template-columns: 1fr; }
}

/* Premium partner strip stays hidden until there is at least one partner */
#webHomePremiumPartnersSection.is-empty { display: none !important; }

/* Global "Anzeige" notice in the header bar */
.hx-ad-note {
  flex: none;
  align-self: center;
  margin-left: -4px;
  padding: 1px 7px;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  font: 700 10px/1.5 'DM Sans', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--l);
  opacity: 0.75;
  white-space: nowrap;
  cursor: default;
}
@media (max-width: 760px) {
  .hx-ad-note { order: 2; margin-left: 0; }
}

/* Cookie banner title: the duotone heading colour made it unreadable on the dark banner */
body.theme-duotone .cityapp-cookie-banner-title, .cityapp-cookie-banner-title { color: #ffffff !important; }