/* Auto-generated component styles */

/* Component: main-image */

    .main-image-component { display: block; }


    .main-image-component /* TODO: Add your styles here */
    /* You can now use Tailwind classes in your HTML template! */
    /* Example: <div class="bg-primary text-white p-4 rounded-lg"> */

    /* Or use CSS variables from design tokens: */
    .container { padding: var(--spacing-4, 1rem);
      font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
      color: var(--color-text-body, #374151); }

  

/* Component: tasso-herosection */

    .tasso-herosection-component { display: block;
      font-family: 'Inter', system-ui, -apple-system, sans-serif; }


    .tasso-herosection-component * { box-sizing: border-box;
      margin: 0;
      padding: 0; }


    .tasso-herosection-component .hero { position: relative;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      overflow: hidden; }


    .tasso-herosection-component .hero--with-image { background: none; }


    .tasso-herosection-component .background-image { position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1; }


    .tasso-herosection-component .overlay { position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2; }


    .tasso-herosection-component .container { position: relative;
      z-index: 3;
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      padding: 4rem 2rem; }


    .tasso-herosection-component .content { max-width: 800px;
      color: white; }


    .tasso-herosection-component .content--left { margin-right: auto;
      text-align: left; }


    .tasso-herosection-component .content--center { margin: 0 auto;
      text-align: center; }


    .tasso-herosection-component .content--right { margin-left: auto;
      text-align: right; }


    .tasso-herosection-component h1 { font-size: 3rem;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 1.5rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      color: red !important; /* TEST: Rote Schrift zum Verifizieren der neuen Version */ }


    @media (max-width: 768px) {
      .tasso-herosection-component h1 { font-size: 2rem; }

    }

    .tasso-herosection-component .subtitle { font-size: 1.25rem;
      line-height: 1.6;
      margin-bottom: 2rem;
      opacity: 0.95;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }


    @media (max-width: 768px) {
      .tasso-herosection-component .subtitle { font-size: 1rem; }

    }

    .tasso-herosection-component .button { display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.875rem 2rem;
      font-size: 1.125rem;
      font-weight: 600;
      text-decoration: none;
      color: white;
      background: #ea580c;
      border-radius: 0.375rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }


    .tasso-herosection-component .button:hover { background: #c2410c;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }


    .tasso-herosection-component .button-icon { width: 20px;
      height: 20px;
      fill: currentColor; }


    .tasso-herosection-component .button:focus { outline: none;
      box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.5); }


    @media (max-width: 768px) {
      .tasso-herosection-component .hero { min-height: 400px; }


      .tasso-herosection-component .container { padding: 3rem 1.5rem; }


      .tasso-herosection-component .button { font-size: 1rem;
        padding: 0.75rem 1.5rem; }

    }
  

/* Component: tasso-teaser */

    .tasso-teaser-component * { box-sizing: border-box; }


    .tasso-teaser-component .inter { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }


    .tasso-teaser-component .tcms-comp-teaser { padding-bottom: 2rem; }


    @media (min-width: 1024px) {
      .tasso-teaser-component .tcms-comp-teaser { padding-bottom: 4rem; }

    }

    .tasso-teaser-component .bg-gray { background-color: #f8fafc;
      padding-top: 2.25rem;
      padding-bottom: 2.25rem; }


    @media (min-width: 1280px) {
      .tasso-teaser-component .bg-gray { padding-top: 4rem;
        padding-bottom: 4rem; }

    }

    .tasso-teaser-component .container { margin-left: auto;
      margin-right: auto; }


    @media (min-width: 1024px) {
      .tasso-teaser-component .container { padding-left: 0;
        padding-right: 0; }

    }

    .tasso-teaser-component .max-w-5xl { max-width: 64rem; }


    .tasso-teaser-component .max-w-7xl { max-width: 80rem; }


    .tasso-teaser-component .grid-container { margin-left: auto;
      margin-right: auto;
      display: grid;
      max-width: 48rem;
      gap: 1rem; }


    @media (min-width: 640px) {
      .tasso-teaser-component .grid-container { gap: 1.5rem; }

    }

    @media (min-width: 1280px) {
      .tasso-teaser-component .grid-container { gap: 3rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
        max-width: none; }

    }

    .tasso-teaser-component .teaser-item { list-style: none; }


    .tasso-teaser-component .teaser-link { padding: 1rem;
      border-radius: 0.75rem;
      transition: all 0.2s;
      height: 100%;
      display: block;
      text-decoration: none;
      color: inherit; }


    .tasso-teaser-component .teaser-link:hover { background-color: #f1f5f9; }


    @media (min-width: 1280px) {
      .tasso-teaser-component .teaser-link { margin-left: -1rem;
        margin-right: -1rem; }

    }

    .tasso-teaser-component .teaser-content { display: flex;
      flex-direction: row;
      gap: 1.25rem; }


    .tasso-teaser-component .image-container { width: 6rem;
      flex: none;
      padding-top: 0.25rem; }


    @media (min-width: 640px) {
      .tasso-teaser-component .image-container { width: 8rem; }

    }

    @media (min-width: 1280px) {
      .tasso-teaser-component .image-container { width: 13rem; }

    }

    .tasso-teaser-component .image-container img { aspect-ratio: 4/5;
      width: 100%;
      object-fit: cover;
      border-radius: 0.5rem; }


    .tasso-teaser-component .text-container { flex: 1 1 0%; }


    .tasso-teaser-component .subtitle { font-size: 1rem;
      font-weight: 500;
      color: #dc2626;
      margin-bottom: 0.5rem; }


    .tasso-teaser-component .teaser-link:hover .subtitle { color: #b91c1c; }


    .tasso-teaser-component .item-title { font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.025em;
      color: #0f172a; }


    .tasso-teaser-component .date { font-size: 1rem;
      font-weight: 500;
      color: #64748b;
      margin-top: 0.5rem; }


    .tasso-teaser-component .date-relative { font-size: 0.875rem;
      font-weight: 400;
      color: #94a3b8;
      font-style: italic; }


    .tasso-teaser-component .text { margin-top: 1.25rem;
      font-size: 1rem;
      color: #64748b; }


    .tasso-teaser-component .text-mobile { display: block;
      margin-top: 0.5rem;
      font-size: 1rem;
      color: #64748b; }


    @media (min-width: 640px) {
      .tasso-teaser-component .text { display: block; }

      .tasso-teaser-component .text-mobile { display: none; }

    }

    @media (max-width: 639px) {
      .tasso-teaser-component .text { display: none; }

    }