Archived
Florian Otto
@@ -1,110 +1,454 @@
|
||||
@charset "utf-8";
|
||||
/* Einfache fließende Medien
|
||||
Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
|
||||
http://www.alistapart.com/articles/fluid-images/
|
||||
*/
|
||||
img, object, embed, video {
|
||||
max-width: 100%;
|
||||
}
|
||||
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
|
||||
.ie6 img {
|
||||
width:100%;
|
||||
/* ==========================================================================
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
Dreamweaver-Eigenschaften für fließende Raster
|
||||
----------------------------------
|
||||
dw-num-cols-mobile: 5;
|
||||
dw-num-cols-tablet: 8;
|
||||
dw-num-cols-desktop: 10;
|
||||
dw-gutter-percentage: 25;
|
||||
|
||||
Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte
|
||||
http://www.alistapart.com/articles/responsive-web-design
|
||||
|
||||
und "Golden Grid System" von Joni Korpi
|
||||
http://goldengridsystem.com/
|
||||
*/
|
||||
/* ==========================================================================
|
||||
2. Basis Reset & Normierung
|
||||
========================================================================== */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; /* Verhindert, dass Padding/Border die Breite verändern */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Layout für Mobilgeräte: 480 px oder weniger. */
|
||||
html {
|
||||
font-size: var(--font-size-base);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.gridContainer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 87.36%;
|
||||
padding-left: 1.82%;
|
||||
padding-right: 1.82%;
|
||||
}
|
||||
#LayoutDiv1 {
|
||||
clear: both;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
#footer {
|
||||
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;
|
||||
width: 100%;
|
||||
margin-top: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zeroMargin_mobile {
|
||||
margin-left: 0;
|
||||
}
|
||||
.hide_mobile {
|
||||
display: none;
|
||||
footer a {
|
||||
text-decoration: none;
|
||||
color: var(--color-tertiary);
|
||||
}
|
||||
|
||||
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
|
||||
|
||||
@media only screen and (min-width: 481px) {
|
||||
.gridContainer {
|
||||
width: 90.675%;
|
||||
padding-left: 1.1625%;
|
||||
padding-right: 1.1625%;
|
||||
}
|
||||
#LayoutDiv1 {
|
||||
clear: both;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
#footer {
|
||||
}
|
||||
.hide_tablet {
|
||||
display: none;
|
||||
}
|
||||
.zeroMargin_tablet {
|
||||
margin-left: 0;
|
||||
}
|
||||
/* Responsives Verhalten für Medien */
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
|
||||
/* ==========================================================================
|
||||
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);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) {
|
||||
.gridContainer {
|
||||
width: 88.2%;
|
||||
max-width: 1232px;
|
||||
padding-left: 0.9%;
|
||||
padding-right: 0.9%;
|
||||
margin: auto;
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.2;
|
||||
color: var(--color-primary);
|
||||
text-align: left;
|
||||
}
|
||||
#LayoutDiv1 {
|
||||
clear: both;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
#footer {
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.zeroMargin_desktop {
|
||||
margin-left: 0;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.hide_desktop {
|
||||
display: none;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.container-impressum {
|
||||
width: 100%;
|
||||
padding: var(--spacing-lg);
|
||||
margin: var(--spacing-md) 0;
|
||||
background-color: var(--color-tertiary);
|
||||
}
|
||||
|
||||
/* 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. Kontaktdaten verschleiern (Bidi-Text) - Optional, kann entfernt werden
|
||||
========================================================================== */
|
||||
span.rev { unicode-bidi:bidi-override; direction:rtl }
|
||||
span.rev.email:before { content:"ed.renhcer" }
|
||||
span.rev.email:after { content:"@retsambew :liaM-E" }
|
||||
span.rev.phone:before { content:"962 9119 " }
|
||||
span.rev.phone:after { content:" 94+ :nofeleT" }
|
||||
span.rev.fax:before { content:"402 9119 " }
|
||||
span.rev.fax:after { content:" 94+ :xaF" }
|
||||
|
||||
/* ==========================================================================
|
||||
8. 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 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 920px) {
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user