/* index */
/* Page-specific additions to design system */
    .hero-services {
      min-height: auto;
      padding-top: calc(var(--header-height-mobile) + var(--space-xl));
      padding-bottom: var(--space-xl);
    }
    
    @media (min-width: 768px) {
      .hero-services {
        padding-top: calc(var(--header-height) + var(--space-2xl));
        padding-bottom: var(--space-2xl);
      }
    }
    
    .service-card-detailed {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      transition: all var(--transition-base);
      height: 100%;
    }
    
    .service-card-detailed:hover {
      border-color: var(--color-border-hover);
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
    
    .service-card-detailed h3 {
      color: var(--color-primary);
      font-size: var(--font-size-lg);
      font-weight: var(--font-bold);
      margin-bottom: var(--space-sm);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .service-card-detailed p {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
      margin-bottom: var(--space-md);
    }
    
    .service-card-detailed ul {
      list-style: none;
      font-size: var(--font-size-sm);
      color: var(--color-text-dim);
    }
    
    .service-card-detailed li {
      padding-left: var(--space-md);
      position: relative;
      margin-bottom: var(--space-xs);
    }
    
    .service-card-detailed li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 0.7rem;
      height: 1px;
      background: var(--color-primary);
    }
    
    .pricing-section {
      padding: var(--space-2xl) 0;
      background: rgba(10, 18, 32, 0.5);
      border-top: 1px solid var(--color-border);
    }
    
    .price-card {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      text-align: center;
      transition: all var(--transition-base);
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      display: block;
    }
    
    .price-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
    
    .price-card__title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-bold);
      color: var(--color-primary);
      margin-bottom: var(--space-sm);
    }
    
    .price-card__price {
      font-size: var(--font-size-3xl);
      font-weight: var(--font-extrabold);
      color: var(--color-text);
      margin-bottom: var(--space-sm);
    }
    
    .price-card__desc {
      font-size: var(--font-size-sm);
      color: var(--color-text-muted);
      margin-bottom: var(--space-md);
    }
    
    .price-card__features {
      list-style: none;
      font-size: var(--font-size-sm);
      color: var(--color-text-dim);
      text-align: left;
    }
    
    .price-card__features li {
      padding: var(--space-xs) 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .price-card__features li:last-child {
      border-bottom: none;
    }
    
    .section-badge {
      display: inline-block;
      padding: var(--space-xs) var(--space-md);
      background: rgba(74, 144, 226, 0.15);
      border: 1px solid var(--color-border);
      border-radius: 50px;
      font-size: var(--font-size-xs);
      font-weight: var(--font-semibold);
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: var(--space-md);
    }
    
    .highlight-box {
      background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(0, 255, 136, 0.05));
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      margin: var(--space-xl) 0;
    }

/* fernwartung */
.fw-cards {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-lg);
      margin-bottom: var(--space-2xl);
      align-items: stretch;
    }
    .fw-card {
      flex: 1;
      min-width: 260px;
      background: var(--color-bg-card);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: border-color var(--transition-base), transform var(--transition-base);
    }
    .fw-card:hover {
      border-color: var(--color-border-hover);
      transform: translateY(-3px);
    }
    .fw-card--featured {
      border-color: var(--color-primary);
    }
    .fw-card__badge {
      position: absolute;
      top: -12px;
      left: var(--space-lg);
      background: var(--color-primary);
      color: #fff;
      font-size: var(--font-size-xs);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 2px 10px;
      border-radius: 50px;
    }
    .fw-card__icon {
      width: 56px;
      height: 56px;
      margin-bottom: var(--space-md);
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .fw-card__icon img {
      width: 56px;
      height: 56px;
      object-fit: contain;
      border-radius: 10px;
    }
    .fw-card__icon-badge {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: #fff;
      font-weight: 700;
    }
    .fw-card__icon-badge--anydesk { background: #ef4f4f; }
    .fw-card__icon-badge--teamviewer { background: #0e5ae0; }
    .btn--anydesk {
      background: #ef4f4f;
      color: #fff;
      border: none;
    }
    .btn--anydesk:hover {
      background: #d93c3c;
      color: #fff;
    }
    .btn--teamviewer {
      background: #0e5ae0;
      color: #fff;
      border: none;
    }
    .btn--teamviewer:hover {
      background: #0a47c0;
      color: #fff;
    }
    .fw-card__title {
      font-size: var(--font-size-xl);
      font-weight: var(--font-bold);
      margin-bottom: var(--space-sm);
      color: var(--color-text);
    }
    .fw-card__desc {
      font-size: var(--font-size-sm);
      color: var(--color-text-muted);
      margin-bottom: var(--space-lg);
      flex-grow: 1;
    }
    .fw-card__list {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-lg) 0;
      font-size: var(--font-size-sm);
      color: var(--color-text-dim);
    }
    .fw-card__list li {
      padding: 4px 0 4px 1.2em;
      position: relative;
    }
    .fw-card__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 0.7rem;
      height: 1px;
      background: var(--color-primary);
      font-weight: bold;
    }
    .fw-card__btn {
      width: 100%;
      text-align: center;
      display: block;
      margin-top: auto;
    }

/* rambuddy */
.rb-hero{text-align:center;padding:calc(var(--header-height-mobile) + var(--space-3xl)) var(--container-padding) var(--space-2xl)}
    @media(min-width:768px){.rb-hero{padding-top:calc(var(--header-height) + var(--space-3xl))}}
    .rb-title{font-size:clamp(2.7rem,8vw,5rem);font-weight:var(--font-extrabold);line-height:1.05;margin:0}
    .rb-tagline{font-size:var(--font-size-lg);color:var(--color-text-muted);max-width:720px;margin:var(--space-md) auto var(--space-xl);line-height:1.7}
    .rb-badges{display:flex;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-xl)}
    .rb-badge{padding:6px 14px;background:rgba(96,165,250,.1);border:1px solid var(--color-border-hover);border-radius:50px;font-size:var(--font-size-sm);font-weight:var(--font-semibold);color:var(--color-primary-light)}
    .rb-download{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-xl);border-radius:var(--radius-lg);font-weight:var(--font-bold);font-size:var(--font-size-lg)}
    .rb-meta{margin-top:var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-dim);overflow-wrap:anywhere}
    .rb-card{height:100%;padding:var(--space-xl);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
    .rb-card h3{margin-bottom:var(--space-sm);color:var(--color-primary-light)}
    .rb-card p,.rb-card li{color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:1.7}
    .rb-card ul{padding-left:1.2rem;margin-top:var(--space-sm)}
    .rb-notice{max-width:850px;margin:var(--space-xl) auto 0;padding:var(--space-lg);border:1px solid var(--color-border-hover);border-radius:var(--radius-md);color:var(--color-text-muted);line-height:1.7}

/* webermizer */
:root {
      --wm-green: #4CAF50;
      --wm-green-light: #66BB6A;
      --wm-green-dim: rgba(76, 175, 80, 0.25);
    }

    /* Hero */
    .wm-hero {
      text-align: center;
      padding: calc(var(--header-height-mobile) + var(--space-3xl)) var(--container-padding) var(--space-2xl);
    }
    @media (min-width: 768px) {
      .wm-hero { padding-top: calc(var(--header-height) + var(--space-3xl)); }
    }
    .wm-title {
      font-size: clamp(3rem, 8vw, 5.5rem);
      font-weight: var(--font-extrabold);
      line-height: 1;
      margin-bottom: var(--space-md);
    }
    .wm-title-white { color: #fff; }
    .wm-title-green {
      color: var(--wm-green);
      filter: drop-shadow(0 0 30px rgba(76,175,80,0.5));
    }
    .wm-tagline {
      font-size: var(--font-size-xl);
      color: var(--color-text-muted);
      max-width: 560px;
      margin: 0 auto var(--space-xl);
      line-height: 1.6;
    }

    /* Badges row */
    .wm-badges {
      display: flex;
      justify-content: center;
      gap: var(--space-sm);
      flex-wrap: wrap;
      margin-bottom: var(--space-2xl);
    }
    .wm-badge {
      padding: 6px 14px;
      background: rgba(76,175,80,0.1);
      border: 1px solid var(--wm-green-dim);
      border-radius: 50px;
      font-size: var(--font-size-sm);
      font-weight: var(--font-semibold);
      color: var(--wm-green-light);
    }

    /* Download button */
    .wm-download-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-md);
      padding: var(--space-md) var(--space-2xl);
      background: linear-gradient(135deg, var(--wm-green), var(--wm-green-light));
      color: #000;
      font-size: var(--font-size-lg);
      font-weight: var(--font-extrabold);
      border-radius: var(--radius-lg);
      text-decoration: none;
      box-shadow: 0 6px 24px rgba(76,175,80,0.45);
      transition: all var(--transition-base);
    }
    .wm-download-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(76,175,80,0.55);
      color: #000;
    }
    .wm-download-btn__icon { font-size: 1.5rem; }
    .wm-download-btn__text { text-align: left; }
    .wm-download-btn__label { display: block; font-size: var(--font-size-xs); font-weight: var(--font-normal); opacity: 0.7; }
    .wm-download-meta {
      display: flex;
      justify-content: center;
      gap: var(--space-lg);
      margin-top: var(--space-md);
      font-size: var(--font-size-xs);
      color: var(--color-text-dim);
    }
    .wm-download-meta span::before { content: '· '; }
    .wm-download-meta span:first-child::before { content: ''; }

    /* Features */
    .wm-feature {
      background: var(--color-bg-card);
      border: 1px solid var(--wm-green-dim);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      transition: all var(--transition-base);
    }
    .wm-feature:hover {
      border-color: var(--wm-green);
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(76,175,80,0.15);
    }
    .wm-feature__icon {
      font-size: 2rem;
      margin-bottom: var(--space-md);
      filter: drop-shadow(0 0 10px rgba(76,175,80,0.4));
    }
    .wm-feature h3 {
      color: var(--wm-green);
      font-size: var(--font-size-lg);
      font-weight: var(--font-bold);
      margin-bottom: var(--space-xs);
    }
    .wm-feature > p {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
      line-height: 1.6;
      margin-bottom: var(--space-md);
    }
    .wm-feature ul {
      list-style: none;
      font-size: var(--font-size-sm);
      color: var(--color-text-dim);
    }
    .wm-feature li {
      padding: 5px 0 5px var(--space-md);
      position: relative;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .wm-feature li:last-child { border-bottom: none; }
    .wm-feature li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 0.7rem;
      height: 1px;
      background: var(--color-primary);
    }

    /* Requirements */
    .wm-requirements {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--space-md);
      max-width: 700px;
      margin: 0 auto;
    }
    .wm-req {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-md) var(--space-lg);
      text-align: center;
    }
    .wm-req__label {
      font-size: var(--font-size-xs);
      color: var(--color-text-dim);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 4px;
    }
    .wm-req__value {
      font-size: var(--font-size-sm);
      font-weight: var(--font-semibold);
      color: var(--color-text);
    }

    /* CTA section */
    .wm-cta {
      text-align: center;
      padding: var(--space-3xl) var(--container-padding);
      background: linear-gradient(180deg, transparent, rgba(76,175,80,0.04));
      border-top: 1px solid var(--wm-green-dim);
    }

/* webertool */
.wt-hero{text-align:center;padding:calc(var(--header-height-mobile) + var(--space-3xl)) var(--container-padding) var(--space-2xl)}
    @media(min-width:768px){.wt-hero{padding-top:calc(var(--header-height) + var(--space-3xl))}}
    .wt-brand{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-md)}
    .wt-mark{font-size:clamp(5rem,12vw,8rem);font-weight:var(--font-extrabold);line-height:.8;color:var(--color-primary);letter-spacing:-.08em}
    .wt-title{font-size:clamp(2.7rem,8vw,5rem);font-weight:var(--font-extrabold);line-height:1.05;margin:0}
    .wt-tagline{font-size:var(--font-size-lg);color:var(--color-text-muted);max-width:680px;margin:0 auto var(--space-xl);line-height:1.7}
    .wt-badges{display:flex;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-xl)}
    .wt-badge{padding:6px 14px;background:rgba(96,165,250,.1);border:1px solid var(--color-border-hover);border-radius:50px;font-size:var(--font-size-sm);font-weight:var(--font-semibold);color:var(--color-primary-light)}
    .wt-download{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-xl);border-radius:var(--radius-lg);font-weight:var(--font-bold);font-size:var(--font-size-lg)}
    .wt-meta{margin-top:var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-dim)}
    .wt-card{height:100%;padding:var(--space-xl);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
    .wt-card h3{margin-bottom:var(--space-sm);color:var(--color-primary-light)}
    .wt-card p,.wt-card li{color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:1.7}
    .wt-card ul{padding-left:1.2rem;margin-top:var(--space-sm)}
    .wt-note{max-width:800px;margin:var(--space-xl) auto 0;padding:var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted)}
    .wt-list{max-width:800px;margin:0 auto}
    .wt-list li{margin:0 0 var(--space-md);color:var(--color-text-muted);line-height:1.7}
    .wt-cta{text-align:center;padding:var(--space-3xl) var(--container-padding);border-top:1px solid var(--color-border)}
