/* Kissel + Wolf Design System 2025
   Component: Buttons (Automatik-Variante)
*/

:root {
    /* Diese Variablen sollten idealerweise in deiner main.css stehen, 
       hier zur Sicherheit für die Buttons definiert */
    --bs-primary: #333333;
    --bs-light: #e9e9e9;
    --bs-dark: #313131;
    --kiwo-cta-circle-hover: #4d4d4d;
    --kiwo-transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. STANDARD-PILL (Primary) */
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #fff !important;
    color: var(--bs-primary) !important;
    border: 0.04rem solid var(--bs-secondary) !important;
    border-radius: 10em;
    padding: 0.7em 2.2em 0.7em 2.8em !important;
    text-transform: uppercase;
    font-weight: 400;
	font-family: 'Roboto Mono', monospace;
	font-size: 0.75rem;
    letter-spacing: 0.00375rem;
    transition: var(--kiwo-transition);
    overflow: hidden;
    white-space: nowrap;
}

.btn-primary:hover {
    background-color: var(--bs-dark) !important;
    color: #fff !important;
    border-color: var(--bs-dark) !important;
}

/* Automatischer Pfeil für Primary */
.btn-primary::before {
    content: "";
    position: absolute;
    left: 1.1em;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask: url('../svg/arrow.svg') no-repeat center / contain;
    mask: url('../svg/arrow.svg') no-repeat center / contain;
}

/* 2. CTA-BUTTON (Secondary) */
.btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #fff !important;
    color: var(--bs-primary) !important;
    border: 0.04rem solid var(--bs-primary) !important; /* Angleichung an die feine Linie */
    border-radius: 10em;
    /* Padding links erhöht, damit der Text nicht in den Kreis läuft */
    padding: 0.8em 2.2em 0.8em 4.2em !important; 
    text-transform: uppercase;
    font-weight: 400; /* Auf 400 für den sauberen Mono-Look */
    font-family: 'Roboto Mono', monospace !important;
    font-size: 1rem;
    letter-spacing: 0.08rem;
    overflow: hidden;
    z-index: 1;
    transition: var(--kiwo-transition);
    white-space: nowrap;
}

/* Das Bullauge (Der Kreis) */
.btn-secondary::before {
    content: "";
    position: absolute;
    top: 50%; 
    left: 0.6em; /* Leicht eingerückt vom Rand */
    transform: translateY(-50%);
    
    /* Schritt 2: Größe fixieren.  */
    /* 2.6em bei 1rem Schriftgröße sollte edel wirken */
    width: 2.6rem;  
    height: 2.6rem;
    
    background-color: var(--bs-light);
    border-radius: 50%;
    z-index: -1;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Der Pfeil im Bullauge */
.btn-secondary::after {
    content: "";
    position: absolute;
    /* Den Pfeil exakt über die Mitte des 2.6rem Kreises legen */
    /* (left: 0.6em + halbe Breite des Kreises - halbe Breite Pfeil) */
    left: 1.35rem; 
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    background-color: currentColor;
    -webkit-mask: url('../svg/arrow.svg') no-repeat center / contain;
    mask: url('../svg/arrow.svg') no-repeat center / contain;
    z-index: 2;
}

/* HOVER-LOGIK */
.btn-secondary:hover {
    background-color: var(--bs-dark) !important;
    color: #fff !important;
    border-color: var(--bs-dark) !important;
}

.btn-secondary:hover::before {
    background-color: var(--kiwo-cta-circle-hover);
    /* Das Bullauge wächst im Hover nur leicht, um edel zu bleiben */
    width: 5em; 
    height: 5em;
    left: -0.2em; /* Position leicht korrigieren beim Wachsen */
}

/* --- 3. EXTERN-BUTTON (Nutzt die Info-Klasse) --- */
.btn-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #fff !important;
    color: var(--bs-primary) !important;
    /* Nutze hier auch die feine 0.04rem Linie für die Konsistenz */
    border: 0.04rem solid var(--bs-primary) !important; 
    border-radius: 10em;
    /* Padding leicht angepasst für das quadratische Icon */
    padding: 0.7em 2.2em 0.7em 2.8em !important; 
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.00375rem;
    transition: var(--kiwo-transition);
    overflow: hidden;
    white-space: nowrap;
}

.btn-info:hover {
    background-color: var(--bs-dark) !important;
    color: #fff !important;
    border-color: var(--bs-dark) !important;
}

/* Das automatische Extern-Icon (Pfeil schräg oben) */
.btn-info::before {
    content: "";
    position: absolute;
    left: 1.0em; /* Gleicher Abstand wie beim Primary-Pfeil */
    width: 1.35em;
    height: 1.35em;
    background-color: currentColor;
    -webkit-mask: url('../svg/external.svg') no-repeat center / contain;
    mask: url('../svg/external.svg') no-repeat center / contain;
	top: 50%;
    transform: translateY(-50%);
}