diff --git a/src/components/Cart.svelte b/src/components/Cart.svelte
index 8ae3a8421ab952ff5a20dd8492a10a3ce5d81ce5..6d596229a97050c7952bfdebd3397191b3d26ae8 100644
--- a/src/components/Cart.svelte
+++ b/src/components/Cart.svelte
@@ -109,7 +109,7 @@
 				{/each}
 			</table>
 		</div>
-		<div class="price {premiums ? "has_premium" : "no_premium"}">
+		<div class="price" class:has_premium={premiums>0} class:no_premium={premiums==0}>
 			{#if premiums}
 				<div class="price__total">Summe: {(total/100).toFixed(2)}€</div>
 				<div class="price__premium">Zuschlag: {(premiums/100).toFixed(2)}€</div>
diff --git a/src/components/CategoryNavigation.svelte b/src/components/CategoryNavigation.svelte
index 42d65b84332e2829fa4a9ba0075718b3cb878aa3..c24c7c00cabbfdc03328ae4ac2f140b7448b1089 100644
--- a/src/components/CategoryNavigation.svelte
+++ b/src/components/CategoryNavigation.svelte
@@ -30,7 +30,7 @@
 
 <div class="container">
 	{#each elements as {element, name}, index}
-		<div class="element {index === activeIndex ? 'active' : ''}" on:click={()=>onClick(element)}>
+		<div class="element" class:active={index===activeIndex} on:click={()=>onClick(element)}>
 			{name}
 		</div>
 	{/each}
diff --git a/src/components/PinCodeInput.svelte b/src/components/PinCodeInput.svelte
index 84c43876110bfbc10977cfdb383e81936172de30..5f8397cc417814b5b65c436b1fbf332ee7d23081 100644
--- a/src/components/PinCodeInput.svelte
+++ b/src/components/PinCodeInput.svelte
@@ -80,16 +80,16 @@
 </style>
 
 <div class="pad">
-	<div class="input {disabled ? "disabled": ""}" on:click={clear}>{#if showLast}{"*".repeat(code.length-1)}{code[code.length-1]}{:else}{"*".repeat(code.length)}{/if}</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("1")}>1</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("2")}>2</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("3")}>3</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("4")}>4</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("5")}>5</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("6")}>6</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("7")}>7</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("8")}>8</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("9")}>9</div>
-	<div class="button two-col {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("0")}>0</div>
-	<div class="button {code && !disabled ? "" : "disabled"}" on:click={()=>(disabled||(code&&submit(code),clear()))}>Login</div>
+	<div class="input" class:disabled on:click={clear}>{#if showLast}{"*".repeat(code.length-1)}{code[code.length-1]}{:else}{"*".repeat(code.length)}{/if}</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("1")}>1</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("2")}>2</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("3")}>3</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("4")}>4</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("5")}>5</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("6")}>6</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("7")}>7</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("8")}>8</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("9")}>9</div>
+	<div class="button two-col" class:disabled on:click={()=>disabled||onPress("0")}>0</div>
+	<div class="button" class:disabled={!code||disabled} on:click={()=>(disabled||(code&&submit(code),clear()))}>Login</div>
 </div>