/* ==========================================================================
   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%;
  margin-top: var(--spacing-lg);
  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: left;
}

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;
}

.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;
  }
}