/* layout/variables.css – zentrale Farb- und Layout-Definitionen */

:root {
    --primary-bg: #ffffff;
    --secondary-bg: #f4f4f4;
    --accent-color: #3db7dd;
    --accent-hover: #2aa5c9;
    --secondary-accent: #ff9800;
    --text-color: #333333;
    --border-radius: 8px;
    --box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


body {
    margin: 0;
   font-family: 'Nunito', Arial, sans-serif;
     font-weight: 400;
    background-color: var(--secondary-bg);
    color: var(--text-color);
}
 .logo {
     max-width: 360px;
     width: 80vw;
     height: auto;
     margin: 2rem auto 1.2rem auto;
     display: block;
 }

/* Montserrat einbinden (Google Fonts) */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Caveat:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito:400,900&display=swap');


.logo-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* für vertikale Mitte des Containers */
    height: 120px;
    /* Beispielwert, nach Bedarf anpassen */
}

.logo-text {
    display: inline-block;
    /* kein weiteres Flex, damit Baseline funktioniert! */
}

.catch,
.compass {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 2.5rem;
    vertical-align: baseline;
    /* individuelle Styles siehe unten */
}

.catch {
    font-weight: 900;
    color: var(--accent-color);
    letter-spacing: -0.03em;
}

.compass {
    font-weight: 700;
    color: var(--secondary-accent);
    letter-spacing: -0.06em;
}

.logo-claim {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: #444;
  margin-top: 0.5em;
  text-align: center;
}