/* ubuntu-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Globale Stile und Schriftart */
body {
    font-family: 'Ubuntu', sans-serif;
    background-color: #56585d;
    font-style: normal;
    font-weight: 400;
    font-size: 16px; /* Basis-Schriftgröße für rem-Einheiten */
    margin: 0;
    color: #56585d;
}

/* Hauptcontainer für den Inhalt */
.content {
    background-color: #E6E6E6;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden; /* Verhindert horizontales Scrollen durch übergroße Elemente */
}

/* Header mit Logo und Firmenname */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5%;
}

.head-link {
  color: inherit;          /* übernimmt die Textfarbe vom Elternelement */
  text-decoration: none;   /* entfernt die Unterstreichung */
  cursor: pointer;         /* Mauszeiger bleibt wie beim normalen Text */
}

.head-link:hover,
.head-link:focus,
.head-link:active {
  color: inherit;          /* keine Farbänderung bei Hover etc. */
  text-decoration: none;   /* keine Unterstreichung bei Hover etc. */
  background: none;        /* kein Hintergrundeffekt */
  outline: none;           /* kein Fokus-Rahmen */
  /* Falls Effekte von woanders kommen: */
  box-shadow: none;
  filter: none;
}

.logo img {
    width: 125px;
    height: auto;
}

.logo-name {
    text-align: right;
}

h1, h2, h3 {
    margin: 0;
}

h1 {
    font-size: 2.75rem;
    margin-bottom: 0.9rem;
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Bild-Container, der als Referenz für die Buttons dient */
.image-container {
    position: relative; /* Wichtig für die Positionierung der Buttons */
    width: 100%;
}

.image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* Container für die Kontakt-Buttons */
.contact-buttons {
    position: absolute;
    bottom: 90px;
    right: 0px;
    display: flex;
    flex-direction: column; /* Buttons untereinander anordnen */
    gap: 7px; /* Abstand zwischen den Buttons */
}

/* Allgemeines Button-Styling */
.btn {
    padding: 13px 20px;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Button */
}

/* Spezifisches Styling für Telefon-Button */
.btn-phone {
    background-color: #81956e;
    color: #ffffff;
}

.btn-phone:hover {
    background-color: #6a7c5b; /* Leichter Hover-Effekt */
}

/* Spezifisches Styling für E-Mail-Button */
.btn-mail {
    background-color: #bfd785;
    color: #81956e;
}

.btn-mail:hover {
    background-color: #acc56c; /* Leichter Hover-Effekt */
}

/* Text- und Footer-Bereich */
.text-content {
    padding-right: 5%;
    padding-left: 5%;
    text-align: center;
}

/* --- Impressum + Dateschnutz --- */
.solo-content {
	padding-top: 12%;
	padding-right: 5%;
    padding-left: 5%;
	padding-bottom: 12%;
    text-align: left;
}

.solo-content a {
    color: #56585d;
    text-decoration: none;
}

.solo-content a:hover {
    color: #a0b67a;
}

.footer {
	background-color: #56585d;
	color: #aaaaaa;
    padding: 20px 5% 5px;
    text-align: center;
    font-size: 0.9rem;
}

.footer a {
    color: #aaaaaa;
    text-decoration: none;
}

.footer a:hover {
    color: #a0b67a;
}

address {
    font-style: normal;
    margin-bottom: 1rem;
}



/* --- ANPASSUNGEN FÜR MOBILE GERÄTE (FLUID DESIGN) --- */
@media (max-width: 600px) {
    .header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .logo img {
        /* Logo skaliert mit der Bildschirmbreite, aber nicht größer als 125px */
        width: 25vw;
        max-width: 125px; 
    }
	
	.logo-name {
        text-align: center;
    }

    /* Fluid Typography mit clamp(MIN, BEVORZUGT, MAX) */
    h1 {
        font-size: clamp(0.1rem, 9vw, 2.75rem);
    }

    h2 {
        font-size: clamp(.075rem, 6vw, 1.8rem);
    }

    h3 {
        font-size: clamp(0.05rem, 4vw, 1.25rem);
    }
    
    .contact-buttons {
        /* Position und Abstand skalieren mit der Bildschirmbreite */
        bottom: 15vw; 
        right: 0px;
        gap: 2vw;
    }

    .btn {
        /* Button-Padding und Schriftgröße skalieren flüssig */
        padding: clamp(8px, 2.5vw, 13px) clamp(15px, 4vw, 20px);
        font-size: clamp(0.075rem, 6vw, 1.8rem);
    }
}