@charset "utf-8";

.big_button, .btn-back, .modern-paypal-button {
    text-decoration: none !important; /* Verhindert Unterstreichung aus formate.css */
}

/* Verhindert, dass externe Icons IN den Buttons erscheinen */
.big_button:after, .btn-back:after, .modern-paypal-button:after {
    display: none !important;
    content: "" !important;
}

/* Verhindert Farbumschläge durch globale a:active Regeln */
.big_button:active, .btn-back:active, .modern-paypal-button:active {
    background-image: none !important;
}


/* --- 2. KLEINE BUTTONS (Back-Button & Standard-Buttons) --- */
.back-button-container { margin: 20px 0; text-align: right; }

.btn-back {
    display: inline-block;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.1s ease;
    font-size: 11px;
    padding: 5px 10px;
    background-color: #5d608e;
    color: #ffffff !important;
    box-shadow: 0 2px 0 0 #3e4166, 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: relative; 
    top: 0;
}

.btn-back:active { top: 2px; box-shadow: 0 0 0 0 #3e4166; filter: brightness(0.9); }


/* --- 3. BIG BUTTONS (Download / Checkout) --- */

.big_button {
    /* 1. Mechanik (Der "Druck-Effekt") */
    position: relative;
    top: 0;
    cursor: pointer;
    transition: background-color 0.2s, top 0.05s, box-shadow 0.05s;
    backface-visibility: hidden;
    display: inline-block;
    border-left: none;
    border-right: none;

    /* 2. Maße & Ausrichtung */
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 1.8rem 0 18px 0;

    /* 3. Design & Farben */
    background: #6ba64a;
    color: #fff !important;
    border-top: 2px solid #83d04d;
    border-bottom: 2px solid #2c5e15;
    border-radius: 5px;
    
    /* 4. Schrift - Synchronisiert mit Montserrat-Headlines */
    font-family: 'montserrat_bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;      /* Wie in deiner h1-h6 Definition */
    font-size: 1.2em;      /* Montserrat wirkt oft größer, daher etwas angepasst */
    line-height: 50px;     /* Perfekte vertikale Zentrierung im 50px Button */
    letter-spacing: 0.5px; /* Wie bei deinen Überschriften */
    text-transform: uppercase; /* Behalten wir bei, für den "Button-Look" */
    

    /* 5. Schatten */
    box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.4);
    -webkit-appearance: none; /* Wichtig für iPhones, damit der Button nicht rundgelutscht wird */
}

/* Der Hover- und Klick-Effekt */
.big_button:hover {
    top: 1px; /* Sinkt 1px beim Drüberfahren */
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.4);
}

.big_button:active {
    top: 2px !important; /* Sinkt 2px beim Klicken */
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(0.9);
}



/* --- PAYPAL BUTTONS (Zentrale Einheit) --- */
.paypal-security-note {
    float: right;
    clear: both; /* Wichtig: schiebt den Text unter den schwebenden Button */
    margin-top: 4px;
    font-size: 10px; /* Klein und dezent */
    color: #888;
    font-family: Arial, sans-serif;
    line-height: 1.2;
}

/* Das Schloss-Icon (dezent grau) */
.paypal-security-note::before {
    content: "\1F512"; /* Schloss-Symbol */
    margin-right: 1px;
    font-size: 11px;
    opacity: 0.5;
}

/* Gemeinsame Basis-Stile */
.modern-paypal-button {   
	/* Floating: Wenn der Text unter dem Button komisch aussieht, 
	 * füge nach dem Button im HTML einfach dies ein: 
	 * <div style="clear:both;"></div> */
    float: right;
    margin-top: 10px;
    xxmargin-bottom: 18px;
    padding: 8px 20px;
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    position: relative;
    top: 0;
    /* Wir machen die Transition für top extrem kurz (0.05s) oder löschen sie */
    transition: background-color 0.3s, top 0.05s ease-out, box-shadow 0.05s ease-out;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}
/* Entfernt den blauen Standard-Rahmen beim Anklicken */
.modern-paypal-button:focus {outline: none !important;}

/* Optional: Ein subtilerer Fokus-Effekt für Tastatur-Nutzer (Barrierefreiheit) */
.modern-paypal-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 196, 57, 0.5); /* Sanfter gelber Schein statt blauem Rahmen */
}

/* Der PayPal-Schriftzug (für beide gleich) */
.modern-paypal-button span {
    color: #003087; /* Das PayPal-Blau */
    font-style: italic;
    font-weight: bold;
}

/* 2. VERSION 1: MODERN 3D (Wie Back-Button) */
.paypal-v1-3d {
    background-color: #ffc439;
    color: #2c2e2f !important;
    border-radius: 4px;
    box-shadow: 0 2px 0 0 #d9a321, 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.paypal-v1-3d:hover { background-color: #f2ba36; }

.paypal-v1-3d:active {
    top: 2px;
    box-shadow: 0 0 0 0 #d9a321;
    filter: brightness(0.9);
}

/* 3. VERSION 2: CLASSIC BIG (Dein Favorit mit Rahmen) */
.paypal-v2-classic {
    background-color: #ffc439;
    color: #2c2e2f !important;
    border-radius: 5px;
    /* Harte Rahmen-Linien */
    border-top: 2px solid #ffe199 !important;
    border-bottom: 2px solid #b38927 !important;
    border-left: none;
    border-right: none;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
    box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.2);
}

.paypal-v2-classic:hover { top:1px; background-color: #f2ba36; box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3);}

.paypal-v2-classic:active {
    top: 2px; /* Drückt sich gegen den Schatten */
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    /* leichter Helligkeits-Verlust für Realismus*/
    filter: brightness(0.95);
    /* Verhindert, dass der Text "nachschwingt" */
    transform: none !important; 
}