@charset "utf-8";
/* CSS Document - Stand: 2026 */

/* 1. GRUNDLEGENDE FORMATIERUNGEN */
html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
}

/* 2. HEADER & LOGO */
header {
    background-color: #333;
    color: #fff;
    padding: 2rem 0;
    text-align: center; 
}

.header-logo {
    display: inline-block;
    margin-bottom: 1rem;
}

.header-text-container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
    text-align: left;
}

/* 3. TYPOGRAFIE (RESPONSIV) */
h1 { 
    font-size: clamp(1.5rem, 8vw, 2.5rem); 
    color: white;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    word-wrap: break-word;
}

h2 {
    font-size: clamp(1.3rem, 6vw, 2rem); 
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* 4. NAVIGATION (OBEN) */
nav {
    background-color: #444;
    padding: 10px 0;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 60rem;
    justify-content: flex-start;
    box-sizing: border-box;
}

nav ul li {
    margin: 10px 30px 10px 0;
}

/* 5. LINK-STYLING (NAV & FOOTER) */
nav ul a, 
.footer-block a {
    color: white !important;
    text-decoration: none;
    transition: color 0.2s;
}

nav ul a:hover, 
nav ul a:focus, 
nav ul a:active,
.footer-block a:hover, 
.footer-block a:focus, 
.footer-block a:active {
    color: aquamarine !important;
    text-decoration: underline;
}

nav ul a.current {
    color: aquamarine !important;
    text-decoration: underline;
}
/* 6. HAUPTINHALT (MAIN) */
main {
    max-width: 60rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
    
    /* Löst das Problem der vertikalen Zentrierung: */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}
main span a {
	color: darkorchid;
	text-decoration: none;
}
/* Färbt den Punkt NUR, wenn ein Link (a) im li enthalten ist */
main li:has(a)::marker {
    color: darkorchid;
}

/* Formatierung für den Text des Links */
main li a {
    color: darkorchid;
    text-decoration: none;
}

/* Listenpunkte ohne Link bleiben automatisch in der Standardfarbe (z.B. Schwarz) */

main img {
    max-width: 100%; 
    height: auto !important; 
    display: block;
    margin: 1rem 0;
}

/* 7. FORMULAR-STYLING */
form[name="eingabe"] {
    max-width: 40rem;
    margin-top: 2rem;
}

form[name="eingabe"] div {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

form[name="eingabe"] label {
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

form[name="eingabe"] input[type="text"],
form[name="eingabe"] input[type="email"],
form[name="eingabe"] input[type="number"],
form[name="eingabe"] textarea {
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.checkbox-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px;
    margin-top: 1rem;
}

.checkbox-container input[type="checkbox"] {
    width: auto;
    margin-top: 4px;
    flex-shrink: 0;
}

.checkbox-container label {
    font-weight: normal;
    font-size: 0.9rem;
    cursor: pointer;
}

form[name="eingabe"] button {
    background-color: #333;
    color: white;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

form[name="eingabe"] button:hover {
    background-color: #444;
    color: aquamarine;
}

.hidden-honeypot {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
    overflow: hidden;
}
/* Container für die Vorschaubilder */
.thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Styling der Vorschau-Links */
.thumbnails a {
    display: block;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

/* Hover-Effekt für die Vorschau */
.thumbnails a:hover {
    border-color: darkred;
}

/* Styling der Vorschau-Bilder selbst */
.thumbnails img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1.4142; /* Macht die Vorschauen rechteckig im DIN-Format */
    object-fit: cover;   /* Schneidet Bilder sauber zu */
    image-rendering: high-quality; 
	border: 1px solid #e0e0e0; /* Sehr zartes Grau */
	border-radius: 4px;        /* Minimale Rundung für Modernität */
	box-sizing: border-box;       
}

.carousel {
	margin: auto;
	max-inline-size: 30rem;
	
	font-size: 1rem;
	display: flex; /* Bilder nebeneinander ohne Scrollbalken */
	gap: 1rem;
	overflow-x: auto;
	scrollbar-width: none; 
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scroll-marker-group: after; /* Erstellen einer Scrollmarker-Gruppe */
	anchor-name: --ankh; /* Positionierungsanker ist das carousel-Element */
	anchor-scope: --ankh; /* nur im .carousel-Element gueltig */
    height: auto;          /* Erlaubt flexible Höhe */
    position: relative;    /* Wichtig für die korrekte Positionierung der Punkte/Buttons */
}

.carousel figure {
	position: relative;
	scroll-snap-align: center;
	inline-size: 100%;
	flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    
    /* NEU: Ein kleiner Puffer, damit der Schatten des Bildes Platz hat */
    padding: 10px; 
}
.carousel img {
	inline-size: 100%;
	block-size: auto;
    max-block-size: 70vh; /* Nutzt maximal 70% der Bildschirmhöhe */
    object-fit: contain;  /* Verhindert Verzerrungen beim Verkleinern */
	order: 1;
	box-sizing: border-box;
    border: none;
   /* 0 0 bedeutet: Keine Verschiebung nach rechts oder unten. Der Schatten strahlt perfekt zentriert nach außen ab. */
   box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1); 
   border-radius: 8px;
}
.carousel figcaption {
  margin-top: 2rem;
	position: relative;
  inline-size: 100%; 
  box-sizing: border-box;
	margin: 0; 
    padding: 0.8rem;
    color: black; 
    text-align: center;
    order: 2;
    margin-bottom: 2rem;
	
}
.carousel::scroll-marker-group, /* scroll marker group (für die Bildwahlpunkte) */
.carousel::scroll-button(*) { /* scroll buttons  (zum Vor- und Zurückblaettern) */
	position: absolute;
	position-anchor: --ankh;
	position-area: center; /* Ankerpositionierung im Ankerbereich */	
	font-size: .8em;
	margin: 1em; /* Abstand zum Rand des Ankers */
	background-color: #d1dbe5;
	border-radius: 1lh; /* Abrundung in Zeilenhoehe */		
}

/* **************************** SCROLL BUTTONS **************************** */

.carousel::scroll-button(*) {
	padding-block: .5em;
	border: none;
}
.carousel::scroll-button(*):enabled {
	cursor: pointer;
}
.carousel::scroll-button(inline-start) {
	content: "◄" / "zurückblättern";
	padding-inline: .5em .7em;
	justify-self: start;		
}
.carousel::scroll-button(inline-end) {
	content: "►" / "weiterblättern";
	padding-inline: .7em .5em;
	justify-self: end;
}
aside {
	border-top: 1px solid;
}
/* 8. FOOTER */
footer {
    background-color: #333;
    color: #fff;
    padding: 3rem 0;
    margin-top: auto; /* Schiebt Footer nach unten */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
    gap: 2rem;
}

.footer-block {
    flex: 1;
    min-width: 250px;
}

.footer-block nav {
    background-color: transparent;
    padding: 0;
}

/* 9. RESPONSIVE DESIGN (MEDIA QUERIES) */

/* Desktop-Optimierung */
@media (min-width: 601px) {
    .footer-block:last-child {
        padding-left: 4rem;
    }
}

/* Mobile Ansicht */
@media (max-width: 600px) {
    .header-text-container, 
    nav ul, 
    main, 
    .footer-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 8px 0;
    }

    .footer-block {
        min-width: 100%;
        padding-left: 0 !important;
        margin-bottom: 1.5rem;
    }
}
	/* Mobil (bis 420px) */
@media (max-width: 420px) {
    .gallery-grid {
        display: block;
        padding: 10px;
    }

    .gallery-item {
        margin-bottom: 20px;
    }
    
    .gallery-item:last-child {
        margin-bottom: 0;
    }

    .bild {
        height: 250px !important;   /* Auf dem Smartphone etwas flacher, damit es besser passt */
    }
/* Druck-Layout */
@media print {
    nav, footer { display: none; }
    main { padding: 0; }
}