/* ---------------------------------
   Vano Design System
   very agile – no overhead
---------------------------------- */

/* === Font Import === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');

/* === Farbvariablen === */
:root {
  /* Hauptfarbwelt */
  --color-ivory:     #f5f2ed;
  --color-stone:     #bcafa7;
  --color-clay:      #897e76;
  --color-walnut:    #3f332a;
  --color-chocolate: #211b17;
  --color-coal:      #0c0c0c;

  /* Kontrastfarben */
  --color-crimson: #c7363d;
  --color-teal:    #218a86;
  --color-amber:   #da7b27;

  /* UI-Signalfarben */
  --color-error:     #c24040;
  --color-warning:   #e47e2d;
  --color-notice:    #f2c94c;
  --color-success:   #519c3f;
  --color-info:      #2f80ed;

  /* Semantische Kurzformen */
  --bg:              var(--color-ivory);
  --text-primary:    var(--color-chocolate);
  --text-strong:     var(--color-walnut);
  --text-contrast:   var(--color-coal);
  --border:          var(--color-stone);
}

/* === Basislayout === */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  background-color: var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* === Layout-Rahmen === */

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

section {
  padding: 2rem;
}

/* === Typografie === */

h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0.5em 0em;
}

h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 0.4em;
}

p {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 1em;
}

small {
  font-size: 15px;
  font-style: italic;
  color: var(--color-clay);
}

nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  margin-right: 1.5em;
}

/* === Footer === */

.footer-bar {
  width: 100%;
  padding: 1.5rem 2rem;
  background-color: var(--color-ivory);
  border-top: 1px solid var(--border);
  color: var(--color-clay);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-spacer {
  flex: 1;
}

.footer-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-text {
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
}

.footer-logo {
  height: 32px;
  opacity: 0.9;
  position: relative;
  top: -2px;
}

.footer-background {
  position: relative;
  z-index: 0;
  font-size: 128px;
  font-weight: 600;
  color: black;
  opacity: 0.025;
  text-align: left;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
  padding: 0 2rem;
  overflow: hidden;
  pointer-events: none;

}

/* === Utility-Klassen === */

.text-error   { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-notice  { color: var(--color-notice); }
.text-success { color: var(--color-success); }
.text-info    { color: var(--color-info); }

.bg-error     { background-color: var(--color-error); color: white; }
.bg-warning   { background-color: var(--color-warning); color: white; }
.bg-notice    { background-color: var(--color-notice); color: black; }
.bg-success   { background-color: var(--color-success); color: white; }
.bg-info      { background-color: var(--color-info); color: white; }