/**
 * Theme Name:     Kubio Child
 * Author:         Extend Themes
 * Template:       kubio
 * Text Domain:	   kubio-child
 * Description:    Kubio is an innovative, easily customizable, multi-purpose theme, focused on empowering users to build astonishing WordPress websites. Kubio is mainly designed for small businesses, startups, or personal portfolio websites and works perfectly with Kubio Page Builder which enriches the WordPress block editor with a variety of new blocks and advanced styling options to give you full design freedom.
 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background: transparent;
            margin: 0;
        }

        .scale-container {
            padding: 15px 20px;
            text-align: center;
        }

        .scale {
            position: relative;
            width: 280px;
            height: 24px;
            background: linear-gradient(to right, 
                #dc2626 0%,     /* Dezentes Rot */
                #ea580c 25%,    /* Orange */
                #eab308 50%,    /* Gedämpftes Gelb */
                #65a30d 75%,    /* Olivgrün */
                #16a34a 100%    /* Professionelles Grün */
            );
            border-radius: 12px;
            border: 1px solid #d1d5db;
            margin: 10px 0;
        }

        .scale-numbers {
            display: flex;
            justify-content: space-between;
            width: 280px;
            margin-top: 6px;
            font-weight: 500;
            color: #6b7280;
            font-size: 0.75em;
        }

        .arrow {
            position: absolute;
            top: -8px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 10px solid #374151;
            transform: translateX(-50%);
            left: 61.11%; /* Fixiert auf Position 2 */
        }

        .difficulty-display {
            font-size: 0.95em;
            font-weight: 600;
            color: #dc2626; /* Rot für "Sehr schwer" */
            margin-top: 12px;
        }

        .difficulty-text {
            font-size: 0.85em;
            margin-top: 4px;
            color: #6b7280;
            font-weight: 500;
        }