/* wangerland.live — das Portal über Gästeservice, Stellenportal und Forum.
   Baut auf style.css und app.css auf (gleiche Farben, Schriften, Kacheln),
   ist aber breiter: 1080 statt 640 px, damit die drei Türen nebeneinander
   passen. Kopf und Inhalt teilen wieder dieselben Kanten. */

.wl-seite .app-kopf__innen { max-width: 1080px; }
.wl-kopf__domain { text-transform: none; letter-spacing: .02em; font-size: .92rem; }

/* ------------------------------------------------------------ Band
   Die Impressionen über die ganze Breite, auf Marine wie ein Diakasten. Das
   aktuelle Foto steht in der Mitte, links und rechts schauen die Nachbarn
   herein. Die Fotos sind nur 900 px breit und werden nie beschnitten (CC BY-SA),
   deshalb kein randloses Bild, sondern ein Streifen. */
.wl-band {
  position: relative;
  background: var(--app-marine);
  color: #fff;
  padding: 28px 0 0;
  overflow: hidden;
}
.wl-band::before {
  content: ""; position: absolute; inset: 0;
  background: var(--app-korn); background-size: 180px 180px; opacity: .16; pointer-events: none;
}
.wl-band::after { content: ""; display: block; height: 6px; margin-top: 20px; background: var(--app-tau); position: relative; }
.wl-band__kopf {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto 18px; padding: 0 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.wl-seite .wl-band h1 { color: #fff; font-size: clamp(2.3rem, 5.4vw, 3.6rem); margin: 0 0 6px; }
.wl-band__datum { margin: 0; color: var(--app-aqua); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wl-band .app-karussell__knopf { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.wl-band .app-karussell__knopf:hover { background: #fff; color: var(--app-marine); }

.wl-streifen {
  --dia: min(600px, 86vw);
  position: relative; z-index: 1;
  list-style: none; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--dia); gap: 14px;
  padding: 0 calc((100% - var(--dia)) / 2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.wl-streifen::-webkit-scrollbar { display: none; }
.wl-dia { scroll-snap-align: center; transition: opacity .3s ease; }
.wl-streifen.ist-bereit .wl-dia:not(.ist-aktiv) { opacity: .45; }
.wl-dia figure { margin: 0; }
.wl-dia__bild { position: relative; aspect-ratio: 3 / 2; background: #16213D; border-radius: 4px; overflow: hidden; }
.wl-dia__bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wl-dia figcaption { margin-top: 10px; font-size: .9rem; line-height: 1.35; }
.wl-dia figcaption a { color: #fff; text-decoration: none; }
.wl-dia figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wl-dia figcaption a:focus-visible { outline: 3px solid var(--app-aqua); outline-offset: 2px; }
.wl-dia figcaption span { color: var(--app-aqua); margin-left: 6px; }
.wl-punkte { position: relative; z-index: 1; display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.wl-punkte span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.wl-punkte span.ist-aktiv { background: #fff; }

/* ------------------------------------------------------------ Inhalt */
.wl-inhalt { max-width: 1080px; margin: 0 auto; padding: 30px 16px 44px; }
.wl-abschnitt-titel { margin: 0 0 16px; padding-bottom: 12px; background: var(--app-welle) no-repeat left bottom / 52px 8px; }

/* Drei Türen: das Patchwork der App-Kacheln in groß. */
.wl-tueren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 36px; }
.wl-tuer {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 250px; padding: 24px 24px 20px;
  border-radius: 5px; color: #fff; text-decoration: none;
  box-shadow: 0 1px 2px rgba(29,43,79,.12), 0 3px 10px rgba(29,43,79,.08);
  transition: transform .15s ease;
}
.wl-tuer::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 3px; pointer-events: none; }
.wl-tuer::after { content: ""; position: absolute; inset: 0; background: var(--app-korn); background-size: 180px 180px; opacity: .42; pointer-events: none; }
.wl-tuer > * { position: relative; z-index: 1; }
.wl-tuer:hover { color: #fff; transform: translateY(-2px); }
.wl-tuer:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
.wl-tuer .symbol { stroke-width: 1.4; }
.wl-tuer__fuer { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.wl-tuer__titel { font-family: var(--app-schmal); font-weight: 700; font-size: 1.7rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; }
.wl-tuer__text { font-size: .92rem; line-height: 1.45; opacity: .93; max-width: 34ch; }
.wl-tuer__fuss { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: .8rem; }
.wl-tuer__zahl { background: rgba(255,255,255,.17); padding: 3px 10px; border-radius: 99px; font-weight: 700; }
.wl-tuer__adresse { letter-spacing: .03em; opacity: .9; }
.wl-tuer--gaeste    { background: var(--app-petrol); }
.wl-tuer--jobs      { background: var(--app-rost); }
.wl-tuer--gastgeber { background: var(--app-marine); }

/* Heute im Wangerland */
.wl-heute { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; align-items: start; }
.wl-heute .app-karte { margin: 0; }
.wl-heute h3 { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--app-indigo); margin: 0 0 10px; }
.wl-wetter { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.wl-wetter__grad { font-size: 1.8rem; font-weight: 700; color: var(--app-marine); line-height: 1; }
.wl-wetter__grad span { font-size: .9rem; font-weight: 400; color: var(--text-leise); }
.wl-flut { margin: 0; padding-top: 12px; border-top: 1px dashed var(--app-rand); font-size: .9rem; }
.wl-flut strong { color: var(--app-marine); }
.wl-termine { list-style: none; margin: 0 0 12px; padding: 0; }
.wl-termine li { display: grid; grid-template-columns: 5.2em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--app-rand); }
.wl-termine li:last-child { border-bottom: 0; }
.wl-termine time { color: var(--app-rost); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.wl-termine b { display: block; color: var(--app-marine); font-weight: 650; line-height: 1.3; }
.wl-termine span { color: var(--text-leise); font-size: .84rem; }
.wl-mehr { margin: 0; font-size: .9rem; }
.wl-mehr a { color: var(--app-petrol); font-weight: 650; }
.wl-insta { margin: 30px 0 0; text-align: center; color: var(--text-leise); font-size: .92rem; }
.wl-insta a { color: var(--app-petrol); font-weight: 650; }

@media (max-width: 760px) {
  .wl-tueren { grid-template-columns: 1fr; gap: 10px; }
  .wl-tuer { min-height: 0; padding: 20px 20px 16px; }
  .wl-tuer__titel { font-size: 1.45rem; }
  .wl-heute { grid-template-columns: 1fr; }
  .wl-band__knoepfe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-tuer, .wl-dia { transition: none; }
  .wl-tuer:hover { transform: none; }
}