/* styles.css */

:root {
  --bg: #f7f7fb;
  --fg: #222;
  --muted: #5a5a5a;
  --brand: #0f766e; /* teal */
  --brand-2: #16a34a; /* green */
  --card: #fff;
  --border: #e6e6ef;
  --shadow: 0 8px 24px rgba(0,0,0,0.12);
  --radius: 16px;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
html, body {
  margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  line-height: 1.6;
  background: url("https://tdms-run.de/Schermuetzelsee2_web.jpeg") center/cover no-repeat fixed, var(--bg);
  
}
header {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
.wrapper { max-width: min(1100px, 92vw); margin: 0 auto; padding: clamp(0.75rem, 2.5vw, 1.25rem); }
.brand {
  display: flex; gap: clamp(1rem, 4vw, 2rem); align-items: center;
}
.brand img { 
	height: clamp(120px, 18vw, 240px); /* erzwingt wieder die gewünschte Höhe */
	width: auto;                        /* Breite proportional */ 
	display: block;                     /* keine Inline-Lücke */
	max-width: none;                    /* überschreibt das globale max-width:100% */
}
.brand a {
  display: inline-block;  /* verhindert Inline-Schrägheiten */
  line-height: 0;         /* eliminiert Lücke unter Bildern */
  text-decoration: none;  /* kein Unterstrich am Bild */
  border: 0;              /* falls ein Browser noch Rahmen malt */
}
.brand a:focus-visible {
  outline: 2px solid #555;   /* barrierefreundlicher Fokus */
  outline-offset: 2px;
}
.brand-text { display: flex; flex-direction: column; justify-content: center; }
.brand-text h1 { font-size: clamp(1.8rem, 3vw + 1rem, 3.4rem); margin: 0; line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.brand-text p { margin: 0; color: #fff; font-weight: 600; font-size: clamp(1.05rem, 0.9vw + 1rem, 1.35rem); max-width: 60ch; text-shadow: 0 2px 4px rgba(0,0,0,.6); }

main { margin-top: clamp(1rem, 2vw, 1.5rem); }
p, ul { margin-block-start: 0.5em; margin-block-end: 0.5em;}

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.6rem, 2vw, 1rem); margin-bottom: clamp(1.5rem, 3.5vw, 3rem); }
.route { grid-column: span 12; background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1rem, 2.2vw, 1.25rem); display: grid; gap: .5rem; backdrop-filter: blur(12px) saturate(150%); }
@media (min-width: 700px) { .route { grid-column: span 6; } }
@media (min-width: 980px) { .route { grid-column: span 4; } }
.route h3 { margin: 0; font-size: clamp(1.05rem, .6vw + .9rem, 1.25rem); }
.route .meta { color: var(--muted); font-size: clamp(.9rem, .4vw + .85rem, .95rem); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; font-weight: 600; padding: clamp(.55rem, .7vw + .3rem, .7rem) clamp(.9rem, 1.3vw + .5rem, 1.1rem); border-radius: 12px; border: 1px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.9); color: #111; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all .2s ease; }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: none; }
.btn:hover { background: rgba(255,255,255,1); color: #000; }
.btn.primary:hover { filter: brightness(1.1); }
.btn:focus { outline: 2px solid var(--brand); outline-offset: 2px; }

.event { margin-bottom: clamp(1.5rem, 3.5vw, 3rem); }

footer { margin: clamp(1.5rem, 2.5vw, 2rem) 0 clamp(2rem, 4vw, 3rem); color: var(--muted); font-size: clamp(.9rem, .4vw + .85rem, .95rem); background: rgba(255,255,255,0.7); border-radius: var(--radius); backdrop-filter: blur(8px); padding: 1rem; }
footer a { color: inherit; }
li a { color: inherit; }

/* ===== Galerie-Styles ===== */
/*
.gallery-section {
  grid-column: span 12;
  margin-top: 2rem;
}
.gallery-section h3 {
  margin-bottom: .75rem;
}
*/
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten auf breiten Bildschirmen */
  gap: 12px;
}
.gallery a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.gallery a:focus img,
.gallery a:hover img {
  transform: scale(1.03);
}
/* Responsiv: 2 Spalten auf Tablets, 1 Spalte auf Smartphones */
@media (max-width: 1024px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
}


/* Anpassung der Abstände für h2-Überschriften */
h2 {
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  font-size: 1.3rem;
}

@media (max-width: 520px) {
  .brand { flex-direction: column; align-items: flex-start; gap: clamp(1rem, 3vw, 1.5rem); }
  .brand img { height: clamp(110px, 28vw, 160px); }
  .brand-text h1 { font-size: clamp(1.8rem, 6vw + 1rem, 2.6rem); }
  .brand-text p { font-size: clamp(1rem, 2vw + .9rem, 1.2rem); max-width: 100%; }
}

/* Sehr kleine Geräte (Handy) */
@media (max-width: 400px) {
  /* Brand-Block zentrieren */
  .brand {
    align-items: center;                 /* Logo + Text zentriert */
    gap: clamp(0.8rem, 3vw, 1.2rem);
  }

  /* Logo: etwas größer und mittig */
  .brand img {
    height: clamp(140px, 36vw, 200px);   /* größer als im 520px-Breakpoint */
    width: auto;
    display: block;
    margin: 0 auto;                      /* zentriert */
  }

  /* Textblock zentrieren */
  .brand-text {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Headline: etwas kleiner, mit mehr Abstand nach unten */
  .brand-text h1 {
    font-size: clamp(1.6rem, 5vw + 0.8rem, 2.2rem);
    line-height: 1.15;
    margin-bottom: clamp(0.6rem, 2vw, 1rem); /* etwas mehr Luft zur Subline */
  }

  /* Untertitel: kleiner und gut lesbar */
  .brand-text p {
    font-size: clamp(0.95rem, 1.8vw + 0.8rem, 1.1rem);
    line-height: 1.35;
    margin-top: 0; /* vermeidet Doppelabstände */
  }
  
  /* Datenschutzerklärung wird z.B. zu breit auf einem Handy */
  h1 {
    font-size: 1.5rem; /* passt sich dynamisch an kleinere Screens an */
    line-height: 1.2;
  }  

	/* --- Textüberlauf in Boxen verhindern --- */
	.route {
	  overflow-wrap: anywhere;   /* bricht sehr lange Wörter/Links */
	  word-break: break-word;    /* Fallback für ältere Browser */
	}
	.route h1,
	.route h2,
	.route p,
	.route li,
	.route a {
	  hyphens: auto;             /* automatische Silbentrennung (lang="de" ist gesetzt) */
	}
	
  /* Listen: ohne Punkte und ohne Einrückung (nur in .route) */
  .route ul,
  .route ol {
    list-style: none;   /* keine Punkte/Zahlen */
    padding-left: 0;    /* keine Einrückung */
    margin-left: 0;     /* keine Einrückung */
  }
  .route li {
    margin-left: 0;
    margin-bottom: 0.35rem; /* etwas Luft zwischen Items */
  }
}