Archived
Florian OttoandCopilot
7e74f8843e
Deploy Website / deploy (push) Successful in 4s
Co-authored-by: Copilot <copilot@github.com>
431 lines
11 KiB
CSS
431 lines
11 KiB
CSS
/* ==========================================================================
|
|
1. CSS Variablen (Custom Properties)
|
|
========================================================================== */
|
|
:root {
|
|
/* Farben */
|
|
--color-primary: #222222;
|
|
--color-secondary: #eb3526;
|
|
--color-tertiary: #f7c66d;
|
|
--color-background: #7a381e;
|
|
--color-text: #333333;
|
|
--color-text-light: #666666;
|
|
--color-text-white: #ffffff;
|
|
|
|
/* Typografie */
|
|
--font-family-base: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-size-base: 16px;
|
|
--font-size-title: 54px;
|
|
--line-height-base: 1.5;
|
|
|
|
/* Abstände (Spacing) */
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 2rem;
|
|
|
|
/* Radien */
|
|
--border-radius: 4px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
2. Basis Reset & Normierung
|
|
========================================================================== */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box; /* Verhindert, dass Padding/Border die Breite verändern */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: var(--font-size-base);
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-base);
|
|
color: var(--color-text);
|
|
background-color: var(--color-background);
|
|
line-height: var(--line-height-base);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
footer a {
|
|
text-decoration: none;
|
|
color: var(--color-tertiary);
|
|
}
|
|
|
|
/* Responsives Verhalten für Medien */
|
|
img,
|
|
picture,
|
|
video,
|
|
canvas,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
3. Grundlegende Typografie
|
|
========================================================================== */
|
|
h1 {
|
|
margin-bottom: var(--spacing-sm);
|
|
line-height: 1.2;
|
|
color: var(--color-primary);
|
|
text-align: center;
|
|
font-size: var(--font-size-title);
|
|
}
|
|
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom: var(--spacing-md);
|
|
line-height: 1.2;
|
|
color: var(--color-primary);
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: var(--spacing-sm);
|
|
font-weight: bold;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
nav {
|
|
display: block;
|
|
}
|
|
|
|
.span-dark {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.span-red {
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
.slogan {
|
|
color: var(--color-text-light);
|
|
font-style: italic;
|
|
font-size: small;
|
|
text-align: center;
|
|
margin-top: 0;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.disclaimer {
|
|
color: var(--color-text);
|
|
background: var(--color-tertiary);
|
|
font-style: italic;
|
|
font-size: small;
|
|
text-align: center;
|
|
margin-top: 0;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.value-display {
|
|
color: var(--color-secondary);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.result {
|
|
margin-top: var(--spacing-lg);
|
|
padding: var(--spacing-md);
|
|
background-color: var(--color-tertiary);
|
|
border-radius: var(--border-radius);
|
|
color: var(--color-primary);
|
|
font-size: 1.25rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.werbung-title {
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
margin-top: var(--spacing-lg);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--border-radius);
|
|
color: var(--color-text);
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.werbung-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
4. Layout Buttons, Forms & Slider
|
|
========================================================================== */
|
|
.button-calc {
|
|
display: block;
|
|
margin: 0 auto;
|
|
padding: 0.6em 2em;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
color: var(--color-text);
|
|
background: var(--color-tertiary);
|
|
font-size: large;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 0;
|
|
border-radius: var(--border-radius);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.button-calc:before {
|
|
content: "";
|
|
background: linear-gradient(
|
|
45deg,
|
|
var(--color-background),
|
|
var(--color-secondary),
|
|
var(--color-tertiary),
|
|
var(--color-text-white)
|
|
);
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
background-size: 400%;
|
|
z-index: -1;
|
|
-webkit-filter: blur(5px);
|
|
filter: blur(5px);
|
|
width: calc(100% + 4px);
|
|
height: calc(100% + 4px);
|
|
animation: glowing-button-calc 20s linear infinite;
|
|
transition: opacity 0.5s ease-in-out;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
@keyframes glowing-button-calc {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
50% {
|
|
background-position: 400% 0;
|
|
}
|
|
100% {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
.button-calc:after {
|
|
z-index: -1;
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--color-tertiary);
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.button-calc:hover {
|
|
background: var(--color-tertiary);
|
|
color: var(--color-secondary);
|
|
border: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.button-mett {
|
|
display: block;
|
|
margin: 0 auto;
|
|
padding: 0.6em 2em;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
color: #fffae8;
|
|
background: #cd7569;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 0;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.button-mett:hover {
|
|
color: #cd7569;
|
|
background-color: #fffae8;
|
|
border: 1px solid #fffae8;
|
|
}
|
|
|
|
.button-nudeln {
|
|
display: block;
|
|
margin: 0 auto;
|
|
padding: 0.6em 2em;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
color: #fdbf5b;
|
|
background: #182132;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 0;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.button-nudeln:hover {
|
|
color: #182132;
|
|
background-color: #fdbf5b;
|
|
border: 1px solid #182132;
|
|
}
|
|
|
|
.button-burger {
|
|
display: block;
|
|
margin: 0 auto;
|
|
padding: 0.6em 2em;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
color: orange;
|
|
background: #221600;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 0;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.button-burger:hover {
|
|
color: #221600;
|
|
background-color: orange;
|
|
border: 1px solid #221600;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
input[type="range"] {
|
|
margin: 0 5%;
|
|
width: 90%;
|
|
accent-color: var(--color-secondary);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
5. Layout Listen
|
|
========================================================================== */
|
|
ul,
|
|
ol {
|
|
margin: 1em 0;
|
|
padding: 0 0 0 40px;
|
|
}
|
|
|
|
dd {
|
|
margin: 0 0 0 40px;
|
|
}
|
|
|
|
nav ul,
|
|
nav ol {
|
|
list-style: none;
|
|
list-style-image: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
6. Layout Container
|
|
========================================================================== */
|
|
.container {
|
|
width: 100%;
|
|
height: 776px;
|
|
padding-top: 100px;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-top: var(--spacing-md);
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
background-image: url('data:image/svg+xml,<svg width="809px" height="776px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-45.984221,-27.910785)"><g transform="matrix(0.481893,0,0,0.481893,-154.520299,-91.445084)"><path d="M1589.216,391.728C1607.444,417.316 1636.92,432.509 1668.337,432.509C1750.341,432.521 1891.324,432.521 1891.324,432.521C1997.956,432.521 2084.528,519.093 2084.528,625.725L2084.528,1655.427C2084.528,1762.059 1997.956,1848.631 1891.324,1848.631L617.613,1848.631C510.981,1848.631 424.41,1762.059 424.41,1655.427L424.41,625.725C424.41,519.093 510.981,432.521 617.613,432.521L840.601,432.521C872.021,432.521 901.501,417.326 919.731,391.735C976.466,311.833 1105.066,256.014 1254.469,256.014C1403.872,256.014 1532.471,311.833 1589.216,391.728Z" style="fill:white;stroke:%23512717;stroke-width:16.67px;" /></g><g transform="matrix(1.09499,0,0,1.09499,-31.67058,-10.50163)"><path d="M420.762,122.374C401.388,108.228 404.796,89.046 413.697,81.751C419.644,76.877 428.043,77.309 433.737,88.093L433.767,88.151C457.895,70.697 474.397,112.278 420.762,122.374Z" style="fill:%23B67552;stroke:%23512717;stroke-width:3.32px;" /><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M425.963,160.799C426.698,156.554 432.005,132.702 439.288,126.938" style="fill:none;stroke:%23512717;stroke-width:2.05px;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M418.898,120.176C415.841,116.806 419.38,102.644 429.47,100.355C429.991,100.236 431.091,100.583 431.193,100.718C433.444,103.723 429.734,109.731 429.55,110.465C429.728,109.931 430.024,109.291 430.352,108.589C432.859,104.28 439.468,100.322 441.191,102.402C442.798,104.342 440.406,111.42 440.155,112.164C438.538,116.185 436.257,120.029 435.391,121.411C430.106,115.764 423.702,116.239 418.898,120.176Z" style="fill:%239CB751;stroke:%23512717;stroke-width:1.9px;stroke-miterlimit:5;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M454.479,110.032C453.404,111.58 452.768,112.546 452.768,112.546C452.768,112.546 453.518,111.635 454.479,110.032C460.173,101.833 476.409,86.263 478.066,89.219C481.04,94.525 462.686,116.738 462.076,116.379C462.83,115.78 471.499,108.896 471.499,108.896C483.568,101.179 474.141,123.565 461.044,130.053C458.675,122.625 449.556,118.917 438.968,126.576L438.938,126.518C437.843,124.445 436.649,122.755 435.391,121.411C436.476,119.678 437.945,114.745 446.198,103.541C455.369,91.091 457.483,92.918 458.101,93.972C458.96,95.437 458.455,103.402 454.479,110.032Z" style="fill:%239CB751;stroke:%23512717;stroke-width:2.21px;stroke-miterlimit:5;" /></g></g></g></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: center top;
|
|
}
|
|
|
|
/* Grid-Beispiel (Flexbox) */
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.col {
|
|
flex: 1 0 100%; /* Nimmt auf Mobilgeräten die volle Breite ein */
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
7. Media Queries (Mobile First)
|
|
========================================================================== */
|
|
|
|
/* --- Kleine Geräte (Smartphones im Querformat, ab 576px) --- */
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 809px;
|
|
}
|
|
}
|
|
|
|
/* --- Mittlere Geräte (Tablets, ab 768px) --- */
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 809px;
|
|
}
|
|
|
|
/* Beispiel: Spalten stehen nebeneinander ab Tablet-Größe */
|
|
.col {
|
|
flex: 1 0 50%; /* Zwei Spalten nebeneinander */
|
|
}
|
|
}
|
|
|
|
/* --- Große Geräte (Desktops, ab 992px) --- */
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 809px;
|
|
}
|
|
|
|
.col {
|
|
flex: 1; /* Alle Spalten verteilen sich gleichmäßig */
|
|
}
|
|
}
|
|
|
|
/* --- Sehr große Geräte (Große Desktops, ab 1200px) --- */
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 809px;
|
|
}
|
|
}
|
|
|
|
/* --- Extra große Geräte (Ultrawide, ab 1400px) --- */
|
|
@media (min-width: 1400px) {
|
|
.container {
|
|
max-width: 809px;
|
|
}
|
|
}
|