/* AlsterSURFER: "Auf dem Steg an der Mundsburger Brücke". Die Seite ist der Steg, jeder Inhalt liegt als Objekt auf den Dielen. */
@import url("/assets/fonts/fonts.css");

:root {
  --diele: #5f656c; --diele-hell: #6c7279; --diele-dunkel: #4a4f55; --fuge: #33373c;
  --schild: #f3f2ed; --schild-rand: #cfcdc4; --tinte: #1d2329; --tinte-weich: #47505a;
  --cyan: #3cc4e6; --cyan-dunkel: #1a9bc0; --holz: #cb9a55; --holz-dunkel: #8d6130; --rail: #f2f0e9;
  --blau: #2b62a8; --orange: #e8672a; --orange-dunkel: #c4531d; --gelb: #f2c230; --rot: #d0322a;
  --sonne: #f5a97b; --sonne-hell: #fbd7bd; --wasser: #2f4a54; --wasser-hell: #4a6b76;
  --papier: #fbfaf6; --papier-rand: #d8d5cc; --kreide: #f6f5ef;
  --schatten: 0 10px 18px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
  --schatten-flach: 0 3px 6px rgba(0,0,0,.28);
  --f-schild: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-text: Barlow, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-marker: "Permanent Marker", "Comic Sans MS", cursive;
  --f-hand: Kalam, "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinte); font-family: var(--f-text); font-size: 17px; line-height: 1.5;
  background-color: var(--diele);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.045) 2px 4px),
    repeating-linear-gradient(90deg, transparent 0 141px, var(--fuge) 141px 146px, rgba(255,255,255,.09) 146px 148px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 148px, rgba(0,0,0,.05) 148px 296px, rgba(255,255,255,.015) 296px 444px),
    linear-gradient(180deg, var(--diele-hell) 0, var(--diele) 30%, var(--diele-dunkel) 100%);
  background-attachment: scroll;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--blau); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
.nur-lesen { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--schild); color: var(--tinte); padding: 8px 14px; z-index: 100; border: 2px solid var(--tinte); }
.skip:focus { top: 8px; }

.steg { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 16px 0; }

/* Das Schild-Gerüst: weißer Rahmen, Schild oben, Pfosten links und rechts */
.geruest { position: relative; padding-top: 22px; }
.schild {
  position: relative; background: var(--schild); border: 4px solid #e9e8e2; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #bdbbb2, 0 14px 20px rgba(0,0,0,.4), 0 2px 0 #7f7d76;
  padding: 14px 22px 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 22px;
}
.schild::before, .schild::after {
  content: ""; position: absolute; top: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #8d8b83 70%); box-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.schild::before { left: 9px; } .schild::after { right: 9px; }
.schild-logo { width: 74px; height: 74px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.schild-wort { text-align: center; line-height: .92; margin: 0; }
.schild-wort .gross { display: block; font-family: var(--f-schild); font-weight: 800; font-size: clamp(38px, 8vw, 84px); letter-spacing: .03em; text-transform: uppercase; color: var(--tinte); }
.schild-wort .gross b { color: var(--orange); font-weight: 800; }
.schild-wort .klein { display: block; font-family: var(--f-schild); font-weight: 600; font-size: clamp(14px, 2.2vw, 22px); letter-spacing: .28em; text-transform: uppercase; color: var(--tinte-weich); margin-top: 6px; }
.schild-ort { justify-self: end; text-align: right; font-family: var(--f-schild); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; line-height: 1.15; color: var(--tinte); border-left: 3px solid var(--rot); padding-left: 12px; }
.schild-ort small { display: block; font-weight: 500; color: var(--tinte-weich); letter-spacing: .04em; text-transform: none; font-size: 13px; }
@media (max-width: 720px) {
  .schild { grid-template-columns: auto 1fr; padding: 12px 14px 10px; gap: 8px 14px; }
  .schild-logo { width: 54px; height: 54px; }
  .schild-ort { grid-column: 1 / -1; justify-self: start; text-align: left; border-left: 0; border-top: 2px solid var(--schild-rand); padding: 8px 0 0; width: 100%; }
}

/* Hängende Namensschilder als Navigation */
.plaketten { list-style: none; margin: 0; padding: 0 12px; display: flex; flex-wrap: wrap; gap: 12px 10px; justify-content: center; position: relative; z-index: 2; }
.plaketten li { position: relative; padding-top: 14px; }
.plaketten li::before { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 20px; background: linear-gradient(#9a9890, #5b5953); transform: translateX(-50%); }
.plaketten a {
  display: inline-block; background: var(--schild); color: var(--tinte); text-decoration: none; font-family: var(--f-schild); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 16px;
  padding: 7px 14px 6px; border: 2px solid #c9c7be; border-radius: 3px; box-shadow: 0 4px 6px rgba(0,0,0,.35);
}
.plaketten a:hover, .plaketten a:focus-visible { background: #fff; transform: rotate(-1.5deg); outline: none; box-shadow: 0 6px 8px rgba(0,0,0,.4); }
.plaketten a.buchen { background: var(--orange); color: #fff; border-color: var(--orange-dunkel); }
.plaketten a.buchen:hover { background: #f07a3f; }
.plaketten li:nth-child(2n) a { transform: rotate(1deg); } .plaketten li:nth-child(3n) a { transform: rotate(-1.2deg); }

/* Der Blick durchs Gerüst: Wasser, Brücke, Bäume. Zwei weiße Pfosten rahmen das Foto. */
.blick { position: relative; margin: 14px 0 0; padding: 0 22px; }
.blick::before, .blick::after { content: ""; position: absolute; top: -18px; bottom: -26px; width: 18px; background: linear-gradient(90deg, #d9d8d2, #f6f5f0 45%, #c8c6be); box-shadow: 4px 0 8px rgba(0,0,0,.35); z-index: 2; border-radius: 2px; }
.blick::before { left: 0; } .blick::after { right: 0; }
.blick-foto { position: relative; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 40px rgba(0,0,0,.25); aspect-ratio: 1155 / 603; background: var(--wasser); }
.blick-foto img { width: 100%; height: 100%; object-fit: cover; }
.blick-foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(transparent, rgba(30,40,45,.35)); }
@media (max-width: 720px) { .blick { padding: 0 14px; } .blick::before, .blick::after { width: 12px; } .blick-foto { aspect-ratio: 4 / 3; } .blick-foto img { object-position: 55% 50%; } }

/* Whiteboard "Heute am Steg", hängt am rechten Pfosten über dem Foto */
.whiteboard {
  position: absolute; right: 34px; bottom: -28px; z-index: 3; width: min(330px, 62%); background: #fdfdfb; color: #202020;
  border: 10px solid #d8d8d3; border-radius: 4px; box-shadow: var(--schatten), inset 0 0 0 1px #bcbcb6; padding: 12px 14px 14px; transform: rotate(-2.4deg);
  font-family: var(--f-marker); line-height: 1.35;
}
.whiteboard::before { content: ""; position: absolute; left: 50%; top: -34px; width: 90px; height: 26px; border: 3px solid #6f6d66; border-bottom: 0; border-radius: 40px 40px 0 0; transform: translateX(-50%); }
.whiteboard h2 { margin: 0 0 4px; font: inherit; font-size: 22px; color: #16457c; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.whiteboard ul { list-style: none; margin: 0; padding: 0; font-size: 18px; }
.whiteboard li { margin: 2px 0; }
.whiteboard .rot { color: var(--rot); } .whiteboard .blau { color: #16457c; }
.whiteboard .status { display: inline-block; margin-top: 6px; padding: 1px 8px; border: 3px solid #1f7a3a; color: #1f7a3a; border-radius: 6px; font-size: 17px; transform: rotate(-1.5deg); }
.whiteboard .status.zu { border-color: var(--rot); color: var(--rot); }
.whiteboard .wischer { position: absolute; right: 8px; bottom: -8px; width: 54px; height: 16px; background: linear-gradient(#3a3a3a, #111); border-radius: 3px; box-shadow: 0 2px 3px rgba(0,0,0,.4); }
@media (max-width: 720px) { .whiteboard { position: relative; right: auto; bottom: auto; width: auto; margin: 26px 8px 0; transform: rotate(-1.2deg); } }

/* Aufgesprühte Markierungen auf den Dielen */
.markierung { font-family: var(--f-schild); font-weight: 800; text-transform: uppercase; color: rgba(245,244,238,.9); letter-spacing: .04em; line-height: .95; margin: 0;
  text-shadow: 0 0 1px rgba(0,0,0,.2); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.markierung.gross { font-size: clamp(54px, 11vw, 132px); }
.markierung.mittel { font-size: clamp(34px, 6vw, 64px); }
.markierung .pfeil { display: inline-block; transform: translateY(-.06em); }
.markierung.gelb { color: rgba(242,194,48,.92); }
.markierung.rot { color: rgba(208,50,42,.9); }

/* Objekte allgemein */
.objekt { position: relative; }
.papier { background: var(--papier); color: var(--tinte); border: 1px solid var(--papier-rand); box-shadow: var(--schatten); padding: 22px 24px; }
.laminat { position: relative; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%, rgba(255,255,255,.25) 70%, rgba(255,255,255,0)), var(--papier); }
.laminat::before { content: ""; position: absolute; inset: -6px; border: 6px solid rgba(255,255,255,.55); border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.kabelbinder { position: absolute; top: -28px; left: 50%; width: 10px; height: 44px; background: linear-gradient(90deg, #111, #4a4a4a 50%, #111); border-radius: 3px; transform: translateX(-50%); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.kabelbinder::after { content: ""; position: absolute; top: 20px; left: -8px; width: 26px; height: 12px; background: #1a1a1a; border-radius: 3px; }
.tropfen { position: absolute; width: 14px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(200,220,230,.25) 60%, rgba(120,140,150,.35)); box-shadow: 0 1px 2px rgba(0,0,0,.2); pointer-events: none; }

.knopf { display: inline-block; background: var(--orange); color: #fff; text-decoration: none; font-family: var(--f-schild); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 18px; padding: 10px 18px 9px; border: 2px solid var(--tinte); box-shadow: 4px 4px 0 var(--tinte); cursor: pointer; line-height: 1.1; }
.knopf:hover, .knopf:focus-visible { background: #f07a3f; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinte); outline: none; }
.knopf:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinte); }
.knopf.blau { background: var(--blau); } .knopf.blau:hover { background: #3572bf; }
.knopf.weiss { background: #fff; color: var(--tinte); } .knopf.weiss:hover { background: #f6f6f2; }
.knopf[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.knopf.gross { font-size: 22px; padding: 13px 24px 12px; }

.anhaenger { position: relative; background: #f7e9c6; border: 1px solid #c9b98f; padding: 10px 14px 12px 22px; font-family: var(--f-hand); font-size: 18px; line-height: 1.3; color: #2a2419; box-shadow: var(--schatten-flach); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.anhaenger::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--diele-dunkel); transform: translateY(-50%); box-shadow: inset 0 0 0 2px #b5a37a; }
.anhaenger b { font-weight: 700; }

/* Die Boards auf den Dielen: jedes Board ist ein Angebot */
.boards { display: grid; gap: 26px 0; margin: 26px 0 0; }
.board { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; }
.board svg { width: 100%; height: auto; filter: drop-shadow(0 12px 10px rgba(0,0,0,.45)) drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.board:nth-child(1) { transform: rotate(-1.6deg); } .board:nth-child(2) { transform: rotate(1.1deg) translateX(3%); } .board:nth-child(3) { transform: rotate(-.8deg) translateX(-2%); }
.board.links svg { transform: scaleX(-1); }
.sticker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1deg); width: min(360px, 44%); background: #fff; color: var(--tinte); border-radius: 4px; padding: 10px 14px 12px; box-shadow: 0 3px 5px rgba(0,0,0,.35), inset 0 0 0 1px #d8d8d2; font-size: 14px; }
.board.links .sticker { left: 58%; } .board.rechts .sticker { left: 42%; }
.sticker .kopf { display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--tinte); padding-bottom: 4px; margin-bottom: 6px; }
.sticker h3 { margin: 0; font-family: var(--f-schild); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 26px; line-height: 1; }
.sticker .kopf small { font-family: var(--f-schild); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--tinte-weich); }
.sticker p { margin: 0 0 8px; line-height: 1.35; }
.sticker dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 10px; font-family: var(--f-schild); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.sticker dt { color: var(--tinte-weich); font-weight: 600; } .sticker dd { margin: 0; font-weight: 800; }
.sticker .knopf { font-size: 15px; padding: 8px 12px 7px; box-shadow: 3px 3px 0 var(--tinte); }
.sticker .preis { font-family: var(--f-schild); font-weight: 800; font-size: 30px; line-height: 1; }
.sticker .preis small { font-size: 14px; font-weight: 600; color: var(--tinte-weich); letter-spacing: .06em; }
@media (max-width: 860px) {
  .board { grid-template-rows: auto auto; }
  .sticker, .board.links .sticker, .board.rechts .sticker { position: relative; left: auto; top: auto; transform: rotate(-1deg); width: min(420px, 92%); margin: -34px auto 0; z-index: 2; }
  .board.rechts .sticker { transform: rotate(1deg); margin-left: auto; margin-right: 6%; }
}

/* FLY AIR XL liegt am Rand */
.xl { display: grid; grid-template-columns: 470px 1fr; align-items: center; gap: 10px 30px; margin: 30px 0 0; }
.xl-bild { position: relative; height: 200px; }
.xl-bild img { position: absolute; left: 50%; top: 50%; width: 150px; height: auto; transform: translate(-50%, -50%) rotate(-82deg); filter: drop-shadow(0 16px 12px rgba(0,0,0,.45)); }
.xl-text { position: relative; }
.xl .anhaenger { max-width: 420px; transform: rotate(2deg); font-size: 20px; }
.xl .anhaenger h3 { margin: 0 0 4px; font-family: var(--f-schild); font-size: 34px; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.xl .anhaenger .knopf { margin-top: 10px; font-family: var(--f-schild); }
@media (max-width: 720px) { .xl { grid-template-columns: 1fr; } .xl-bild { height: 130px; } .xl-bild img { width: 100px; } }

/* Laminierte Preisliste am Pfosten */
.preisliste { max-width: 520px; margin: 70px auto 0; transform: rotate(1.4deg); font-size: 16px; }
.preisliste h2 { margin: 0 0 4px; font-family: var(--f-schild); font-weight: 800; text-transform: uppercase; font-size: 40px; letter-spacing: .06em; line-height: 1; }
.preisliste .unter { margin: 0 0 14px; font-family: var(--f-schild); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--tinte-weich); font-weight: 600; }
.preisliste table { width: 100%; border-collapse: collapse; }
.preisliste th, .preisliste td { text-align: left; padding: 8px 0; border-bottom: 1px dashed #c9c6bc; vertical-align: top; }
.preisliste th { font-weight: 600; } .preisliste th small { display: block; font-weight: 400; color: var(--tinte-weich); font-size: 14px; }
.preisliste td { text-align: right; white-space: nowrap; font-family: var(--f-schild); font-weight: 800; font-size: 22px; }
.preisliste td small { font-weight: 600; font-size: 13px; color: var(--tinte-weich); letter-spacing: .04em; }
.preisliste tfoot td { text-align: left; white-space: normal; font: 14px/1.45 var(--f-text); color: var(--tinte-weich); padding-top: 12px; border: 0; }
.preisliste .tropfen.a { right: 40px; top: 60px; } .preisliste .tropfen.b { left: 60px; bottom: 90px; width: 9px; height: 12px; } .preisliste .tropfen.c { right: 90px; bottom: 30px; width: 11px; height: 14px; }

/* 10er-Karte liegt daneben */
.zehner { width: 300px; margin: -30px 0 0 auto; transform: rotate(-6deg); background: linear-gradient(160deg, #fff, #eef6f9); border: 1px solid #b9c9d2; border-radius: 8px; padding: 12px 14px; box-shadow: var(--schatten-flach); position: relative; z-index: 2; }
.zehner h3 { margin: 0; font-family: var(--f-schild); text-transform: uppercase; font-size: 24px; letter-spacing: .06em; line-height: 1; }
.zehner p { margin: 2px 0 8px; font-size: 13px; color: var(--tinte-weich); }
.zehner .felder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.zehner .felder span { aspect-ratio: 1; border: 2px dashed #9fb4bf; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-marker); color: var(--blau); font-size: 18px; }
.zehner .felder span.voll { border-style: solid; border-color: var(--blau); transform: rotate(-12deg); }
@media (max-width: 720px) { .zehner { margin: 10px auto 0; transform: rotate(-3deg); width: min(300px, 100%); } }

/* Rettungsring mit Tau: Sicherheitsregeln */
.sicherheit { display: grid; grid-template-columns: 240px 1fr; gap: 20px 34px; align-items: start; margin: 70px 0 0; }
.ring { position: relative; width: 220px; height: 220px; margin: 10px auto; border-radius: 50%;
  background: conic-gradient(var(--rot) 0 45deg, #f4f1e6 45deg 135deg, var(--rot) 135deg 225deg, #f4f1e6 225deg 315deg, var(--rot) 315deg);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.08), inset 0 -8px 12px rgba(0,0,0,.18), 0 14px 18px rgba(0,0,0,.45); }
.ring::before { content: ""; position: absolute; inset: 60px; border-radius: 50%; background: var(--diele-dunkel); box-shadow: inset 0 6px 10px rgba(0,0,0,.5); }
.ring::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 5px dashed #d9c9a0; opacity: .85; }
.ring span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font-family: var(--f-schild); font-weight: 800; letter-spacing: .12em; font-size: 15px; color: var(--tinte); text-transform: uppercase; text-align: center; line-height: 1.1; width: 90px; z-index: 1; }
.regeln { max-width: 620px; transform: rotate(-.6deg); }
.regeln h2 { margin: 0 0 2px; font-family: var(--f-schild); text-transform: uppercase; font-size: 36px; letter-spacing: .05em; line-height: 1; }
.regeln .unter { margin: 0 0 12px; font-family: var(--f-schild); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--tinte-weich); font-weight: 600; }
.regeln ol { margin: 0; padding-left: 26px; counter-reset: r; list-style: none; }
.regeln li { position: relative; margin: 0 0 9px; padding-left: 4px; counter-increment: r; line-height: 1.35; }
.regeln li::before { content: counter(r); position: absolute; left: -26px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--rot); color: #fff; font: 700 12px/20px var(--f-schild); text-align: center; }
.regeln li small { display: block; color: var(--tinte-weich); font-size: 13px; }
@media (max-width: 720px) { .sicherheit { grid-template-columns: 1fr; } .ring { width: 170px; height: 170px; } .ring::before { inset: 46px; } }

/* Liegestuhl und Powerade: die Aktion */
.aktion { display: grid; grid-template-columns: 1fr 260px; gap: 20px 30px; align-items: end; margin: 70px 0 0; }
.liegestuhl { position: relative; width: 300px; height: 210px; margin: 0 auto; }
.liegestuhl .stoff { position: absolute; left: 40px; top: 0; width: 210px; height: 150px; background: repeating-linear-gradient(90deg, #f4f1e8 0 22px, var(--blau) 22px 44px); transform: skewY(-12deg) rotate(-4deg); box-shadow: var(--schatten); border: 2px solid #e6e2d6; }
.liegestuhl .stoff::after { content: "ALSTERSURFER"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-schild); font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.85); font-size: 20px; writing-mode: vertical-rl; transform: rotate(180deg); }
.liegestuhl .holz1, .liegestuhl .holz2 { position: absolute; background: linear-gradient(90deg, #b98a4f, #d9ab6e 50%, #a6773f); box-shadow: 0 6px 8px rgba(0,0,0,.4); border-radius: 3px; }
.liegestuhl .holz1 { left: 30px; top: 40px; width: 14px; height: 170px; transform: rotate(18deg); }
.liegestuhl .holz2 { left: 250px; top: 20px; width: 14px; height: 180px; transform: rotate(18deg); }
.liegestuhl .sitz { position: absolute; left: 44px; top: 150px; width: 210px; height: 58px; background: repeating-linear-gradient(90deg, #f4f1e8 0 22px, var(--blau) 22px 44px); transform: skewY(-5deg); box-shadow: var(--schatten-flach); }
.powerade { position: relative; text-align: center; }
.powerade img { width: 150px; margin: 0 auto -10px; filter: drop-shadow(0 12px 10px rgba(0,0,0,.5)); }
.powerade .anhaenger { text-align: left; transform: rotate(-3deg); }
.aktion-text { grid-column: 1 / -1; max-width: 640px; }
.aktion-text .papier { transform: rotate(.8deg); padding: 18px 22px; }
.aktion-text h2 { margin: 0 0 6px; font-family: var(--f-schild); text-transform: uppercase; font-size: 34px; letter-spacing: .04em; line-height: 1; }
.aktion-text p { margin: 0 0 8px; } .aktion-text small { color: var(--tinte-weich); font-size: 13px; line-height: 1.4; display: block; }
@media (max-width: 720px) { .aktion { grid-template-columns: 1fr; } .liegestuhl { transform: scale(.85); transform-origin: top center; height: 190px; } }

/* Fotoleine mit Klammern */
.leine { position: relative; margin: 80px -16px 0; padding: 30px 16px 10px; }
.leine::before { content: ""; position: absolute; left: -40px; right: -40px; top: 18px; height: 3px; background: linear-gradient(90deg, #d9c9a0, #b9a67c 50%, #d9c9a0); transform: rotate(-1deg); box-shadow: 0 2px 2px rgba(0,0,0,.4); }
.abzuege { display: flex; gap: 18px; overflow-x: auto; padding: 10px 6px 24px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.abzug { flex: 0 0 auto; margin: 0; width: 190px; background: #fff; padding: 10px 10px 32px; box-shadow: var(--schatten); position: relative; scroll-snap-align: start; transform: rotate(var(--r, -2deg)); transform-origin: top center; }
.abzug::before { content: ""; position: absolute; left: 50%; top: -14px; width: 16px; height: 34px; background: linear-gradient(90deg, #d8b27a, #f0d2a0 50%, #c9a06a); border-radius: 3px; transform: translateX(-50%) rotate(var(--k, 0deg)); box-shadow: 0 2px 3px rgba(0,0,0,.4); z-index: 2; }
.abzug img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.abzug.quer img { aspect-ratio: 4 / 3; } .abzug.quer { width: 250px; }
@media (min-width: 1100px) { .abzuege { justify-content: center; overflow: visible; } }
.abzug figcaption { position: absolute; left: 12px; right: 12px; bottom: 6px; font-family: var(--f-hand); font-size: 17px; color: #2a2a2a; line-height: 1.2; }

/* Postkarte für Gruppen */
.postkarte { display: grid; grid-template-columns: 1fr 1fr; max-width: 760px; margin: 60px 0 0 auto; background: #fff; box-shadow: var(--schatten); transform: rotate(-2deg); border: 1px solid #ddd; }
.postkarte img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.postkarte .rueckseite { position: relative; padding: 18px 20px 20px 22px; font-family: var(--f-hand); font-size: 19px; line-height: 1.32; color: #23304a; border-left: 1px solid #ddd; background: repeating-linear-gradient(transparent 0 30px, #e8e8e8 30px 31px) 0 8px; }
.postkarte .rueckseite h2 { margin: 0 0 6px; font-family: var(--f-schild); text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: .04em; color: var(--tinte); }
.postkarte .marke { position: absolute; right: 14px; top: 12px; width: 62px; height: 74px; border: 2px dashed #b8b8b8; display: grid; place-items: center; padding: 6px; font: 700 11px/1.1 var(--f-schild); text-align: center; color: #666; text-transform: uppercase; }
.postkarte .stempel-rund { position: absolute; right: 30px; top: 60px; width: 84px; height: 84px; border: 2px solid rgba(40,60,120,.55); border-radius: 50%; color: rgba(40,60,120,.55); font: 700 9px/1.15 var(--f-schild); text-transform: uppercase; letter-spacing: .06em; display: grid; place-items: center; text-align: center; transform: rotate(-16deg); padding: 10px; }
.postkarte .rueckseite .knopf { margin-top: 10px; font-family: var(--f-schild); }
@media (max-width: 720px) { .postkarte { grid-template-columns: 1fr; transform: rotate(-1deg); margin-top: 40px; } .postkarte .rueckseite { border-left: 0; border-top: 1px solid #ddd; padding-top: 24px; } .postkarte .marke, .postkarte .stempel-rund { display: none; } }

/* Anlegerschild: Anfahrt */
.anleger { max-width: 560px; margin: 70px 0 0; background: var(--schild); border: 4px solid #e9e8e2; box-shadow: inset 0 0 0 2px #bdbbb2, var(--schatten); padding: 16px 22px 18px; transform: rotate(.6deg); position: relative; }
.anleger h2 { margin: 0 0 8px; font-family: var(--f-schild); font-weight: 800; text-transform: uppercase; font-size: 40px; letter-spacing: .04em; line-height: 1; display: flex; align-items: center; gap: 12px; }
.anleger h2 .pikto { width: 40px; height: 34px; background: var(--rot); flex: none; display: grid; place-items: center; }
.anleger address { font-style: normal; font-size: 18px; margin: 0 0 10px; }
.anleger ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.anleger li { display: flex; gap: 10px; align-items: baseline; }
.anleger .linie { flex: none; min-width: 44px; text-align: center; padding: 1px 6px; border-radius: 3px; font: 800 14px/1.5 var(--f-schild); color: #fff; }
.anleger .u3 { background: #f2c230; color: #222; } .anleger .bus { background: #d22; } .anleger .damp { background: var(--blau); }
.anleger .knopf { margin-right: 8px; }
.anleger .luftbild { position: relative; margin: 0 0 14px; border: 6px solid #fff; box-shadow: var(--schatten-flach); transform: rotate(-1.5deg); }
.anleger .luftbild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.anleger .luftbild .pin { position: absolute; left: 64%; top: 60%; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--rot); transform: translate(-50%, -100%) rotate(-45deg); box-shadow: 0 2px 3px rgba(0,0,0,.4); }
.anleger .luftbild .pin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.anleger .luftbild figcaption { position: absolute; left: 8px; bottom: 6px; background: rgba(255,255,255,.9); padding: 2px 8px; font: 700 12px/1.4 var(--f-schild); text-transform: uppercase; letter-spacing: .1em; }

/* Wasserdichte Handytasche und Notizblock: Kontakt */
.kontakt { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; margin: 70px 0 0; }
.tasche { position: relative; margin: 20px auto 0; width: 220px; padding: 44px 16px 20px; border-radius: 14px; background: linear-gradient(160deg, rgba(210,230,240,.55), rgba(180,205,220,.35) 60%, rgba(150,180,200,.45)); border: 3px solid rgba(20,40,60,.55); box-shadow: var(--schatten), inset 0 0 20px rgba(255,255,255,.35); transform: rotate(4deg); }
.tasche::before { content: ""; position: absolute; left: 12px; right: 12px; top: 12px; height: 16px; background: repeating-linear-gradient(90deg, #14263a 0 6px, #2c4864 6px 12px); border-radius: 4px; }
.tasche::after { content: ""; position: absolute; left: 50%; top: -22px; width: 60px; height: 30px; border: 3px solid #14263a; border-radius: 30px 30px 0 0; border-bottom: 0; transform: translateX(-50%); }
.handy { background: #0b0f14; color: #fff; border-radius: 12px; padding: 18px 14px; box-shadow: inset 0 0 0 3px #222; font-size: 15px; }
.handy .zeit { font-family: var(--f-schild); font-size: 34px; text-align: center; margin: 0 0 8px; letter-spacing: .04em; }
.handy a { display: block; color: #fff; text-decoration: none; background: #1f8f4a; text-align: center; padding: 9px; border-radius: 8px; margin-top: 8px; font-weight: 600; }
.handy a.mail { background: #2b62a8; }
.handy p { margin: 0; text-align: center; color: #b9c2cc; font-size: 13px; }
.notizblock { position: relative; background: #fff; box-shadow: var(--schatten); padding: 26px 22px 22px; transform: rotate(-.8deg); border-top: 22px solid #3b4a58; }
.notizblock::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 14px, #c8c8c8 14px 22px); }
.notizblock h2 { margin: 0 0 4px; font-family: var(--f-hand); font-size: 30px; line-height: 1; color: #16457c; }
.notizblock p.hinweis { margin: 0 0 14px; color: var(--tinte-weich); font-size: 15px; }
@media (max-width: 720px) { .kontakt { grid-template-columns: 1fr; } .tasche { transform: rotate(2deg); } }

/* Formulare wie mit Stift ausgefüllt */
.feld { display: grid; gap: 4px; margin: 0 0 12px; }
.feld label, .feld > span { font-family: var(--f-schild); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--tinte-weich); }
.feld input, .feld textarea, .feld select { font: 19px/1.3 var(--f-hand); color: #16457c; background: transparent; border: 0; border-bottom: 2px solid #9aa3ad; padding: 6px 4px; border-radius: 0; width: 100%; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-bottom-color: var(--blau); background: rgba(43,98,168,.06); }
.feld textarea { resize: vertical; min-height: 80px; background-image: repeating-linear-gradient(transparent 0 31px, #d6dae0 31px 32px); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 520px) { .zwei { grid-template-columns: 1fr; } }
.meldung { margin: 12px 0 0; padding: 10px 14px; border: 2px solid var(--rot); color: var(--rot); background: #fff5f4; font-weight: 600; display: none; }
.meldung.ok { border-color: #1f7a3a; color: #1f7a3a; background: #f1faf3; }
.meldung.zeigen { display: block; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Wasserkante: hier hört der Steg auf */
.wasserkante { position: relative; margin: 90px -16px 0; padding: 0; }
.wasserkante .kante { height: 26px; background: linear-gradient(#7d838a, #3f444a); box-shadow: 0 6px 10px rgba(0,0,0,.5); position: relative; z-index: 2; }
.wasserkante .kante::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 141px, #222 141px 146px); }
.wasser { position: relative; background: linear-gradient(180deg, #43626d 0, var(--wasser) 35%, #1e3139 100%); color: #dbe6ea; padding: 46px 32px 40px; overflow: hidden; }
.wasser::before { content: ""; position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(178deg, transparent 0 9px, rgba(255,255,255,.12) 9px 10px, transparent 10px 24px, rgba(0,0,0,.18) 24px 26px); }
.wasser::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(rgba(0,0,0,.45), transparent); }
.wasser .innen { position: relative; z-index: 1; max-width: 1148px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 20px 40px; align-items: center; }
.wasser .klampe { width: 80px; height: 26px; background: linear-gradient(#e6e6e2, #9a9a94); border-radius: 12px; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,.5); }
.wasser .klampe::before { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 60px; background: #d9c9a0; transform: translateX(-50%) rotate(20deg); transform-origin: top; }
.wasser nav a { color: #eef4f6; margin-right: 18px; text-decoration: none; font-family: var(--f-schild); text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
.wasser nav a:hover { text-decoration: underline; }
.wasser p { margin: 8px 0 0; font-size: 14px; color: #b7c7cd; }
.wasser .ente { font-size: 13px; color: #9fb3ba; text-align: right; }
.wasser .ente a { color: #dbe6ea; }
@media (max-width: 720px) { .wasser .innen { grid-template-columns: 1fr; } .wasser .ente { text-align: left; } .wasser .klampe { margin-bottom: 44px; } }

/* Rechtstexte und Unterseiten: laminierte Bögen */
.bogen { max-width: 820px; margin: 60px auto 0; transform: rotate(.4deg); font-size: 16px; line-height: 1.55; }
.bogen h1 { font-family: var(--f-schild); text-transform: uppercase; font-size: 44px; letter-spacing: .04em; line-height: 1; margin: 0 0 6px; }
.bogen h2 { font-family: var(--f-schild); text-transform: uppercase; font-size: 24px; letter-spacing: .05em; margin: 22px 0 6px; }
.bogen p { margin: 0 0 10px; } .bogen ul { margin: 0 0 10px; padding-left: 22px; }
.bogen .hinweis { border: 2px dashed var(--orange); padding: 10px 14px; background: #fff7f2; font-size: 14px; margin-top: 20px; }

/* Klemmbrett: die Stegliste (Buchung) */
.klemmbrett { position: relative; max-width: 760px; margin: 40px auto 0; background: linear-gradient(135deg, #7a5230, #5d3c1f); padding: 46px 22px 26px; border-radius: 6px; box-shadow: var(--schatten); transform: rotate(-.6deg); }
.klemmbrett::before { content: ""; position: absolute; left: 50%; top: 8px; width: 170px; height: 34px; transform: translateX(-50%); background: linear-gradient(#f2f2f0, #a8a8a4); border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,.5), inset 0 -3px 0 #777; z-index: 3; }
.klemmbrett::after { content: ""; position: absolute; left: 50%; top: 2px; width: 60px; height: 22px; transform: translateX(-50%); border: 4px solid #c9c9c4; border-bottom: 0; border-radius: 30px 30px 0 0; z-index: 3; }
.blatt { position: relative; background: #fff; padding: 26px 26px 30px; box-shadow: 0 1px 2px rgba(0,0,0,.2); min-height: 500px; }
.blatt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; background: repeating-linear-gradient(transparent 0 35px, rgba(43,98,168,.09) 35px 36px); }
.blatt > * { position: relative; }
.blatt h1 { margin: 0; font-family: var(--f-schild); font-weight: 800; text-transform: uppercase; font-size: 42px; letter-spacing: .06em; line-height: 1; }
.blatt .unter { margin: 2px 0 18px; font-family: var(--f-schild); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--tinte-weich); font-weight: 600; }
.schritt { margin: 0 0 20px; padding-left: 40px; position: relative; }
.schritt > h2 { margin: 0 0 8px; font-family: var(--f-schild); text-transform: uppercase; font-size: 22px; letter-spacing: .06em; line-height: 1.1; }
.schritt > h2::before { content: attr(data-n); position: absolute; left: 0; top: -4px; width: 30px; height: 30px; border: 2px solid var(--tinte); border-radius: 50%; font: 800 16px/26px var(--f-schild); text-align: center; }
.kaestchen { display: flex; flex-wrap: wrap; gap: 8px; }
.kaestchen label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 2px solid var(--tinte); cursor: pointer; background: #fff; font-family: var(--f-schild); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; }
.kaestchen label input { appearance: none; width: 20px; height: 20px; border: 2px solid var(--tinte); margin: 0; position: relative; flex: none; }
.kaestchen label input:checked::after { content: ""; position: absolute; left: 3px; top: -6px; width: 10px; height: 18px; border: solid #16457c; border-width: 0 4px 4px 0; transform: rotate(40deg); }
.kaestchen label:has(input:checked) { background: #fff8e6; box-shadow: 3px 3px 0 var(--tinte); }
.kaestchen label small { font: 500 12px/1 var(--f-text); text-transform: none; letter-spacing: 0; color: var(--tinte-weich); }
.zeiten { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; }
.zeiten button { font: 700 17px/1 var(--f-schild); letter-spacing: .04em; padding: 8px 10px; border: 2px solid var(--tinte); background: #fff; cursor: pointer; min-width: 68px; }
.zeiten button[aria-pressed="true"] { background: var(--gelb); box-shadow: 3px 3px 0 var(--tinte); }
.zeiten button.voll { text-decoration: line-through; color: #a0a6ad; border-color: #c4c8cc; cursor: not-allowed; }
.zeiten button small { display: block; font: 500 11px/1.2 var(--f-text); color: var(--tinte-weich); margin-top: 3px; }
.zeiten .leer { font-family: var(--f-hand); color: var(--rot); font-size: 18px; align-self: center; }
.stepper { display: inline-flex; align-items: center; border: 2px solid var(--tinte); }
.stepper button { width: 40px; height: 40px; border: 0; background: #fff; font: 800 22px/1 var(--f-schild); cursor: pointer; }
.stepper output { min-width: 46px; text-align: center; font: 700 22px/1 var(--f-hand); color: #16457c; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: 700 16px/1 var(--f-schild); letter-spacing: .04em; padding: 9px 12px; border: 2px solid var(--tinte); background: #fff; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--gelb); box-shadow: 3px 3px 0 var(--tinte); }
.haken { display: grid; gap: 8px; }
.haken label { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.35; }
.haken input { appearance: none; width: 22px; height: 22px; border: 2px solid var(--tinte); margin: 0; position: relative; }
.haken input:checked::after { content: ""; position: absolute; left: 4px; top: -7px; width: 10px; height: 18px; border: solid #16457c; border-width: 0 4px 4px 0; transform: rotate(40deg); }
.summe { display: flex; justify-content: space-between; align-items: end; gap: 16px; border-top: 3px solid var(--tinte); padding-top: 12px; margin-top: 8px; flex-wrap: wrap; }
.summe .betrag { font-family: var(--f-hand); font-size: 20px; color: #16457c; }
.summe .betrag b { font-family: var(--f-schild); font-size: 40px; color: var(--tinte); display: block; line-height: 1; }
.summe .betrag small { display: block; color: var(--tinte-weich); font: 13px/1.3 var(--f-text); }
.stempel { position: absolute; right: 24px; top: 70px; padding: 8px 16px; border: 5px solid var(--rot); color: var(--rot); font: 800 34px/1 var(--f-schild); text-transform: uppercase; letter-spacing: .12em; transform: rotate(-14deg); opacity: .88; mix-blend-mode: multiply; border-radius: 4px; }
.stempel.blau { border-color: var(--blau); color: var(--blau); }
.bestaetigt { display: none; }
.bestaetigt.zeigen { display: block; }
.bestaetigt dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 17px; margin: 14px 0; }
.bestaetigt dt { font-family: var(--f-schild); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--tinte-weich); padding-top: 3px; }
.bestaetigt dd { margin: 0; font-family: var(--f-hand); color: #16457c; font-size: 20px; }
.bestaetigt .code { font: 800 44px/1 var(--f-schild); color: var(--tinte); letter-spacing: .06em; }
.stift { position: absolute; right: -30px; bottom: 60px; width: 14px; height: 210px; border-radius: 7px; background: linear-gradient(90deg, #14263a, #2d4a6a 40%, #0f1c2a); box-shadow: 0 8px 10px rgba(0,0,0,.5); transform: rotate(28deg); z-index: 4; }
.stift::after { content: ""; position: absolute; left: 3px; bottom: -16px; width: 8px; height: 18px; background: linear-gradient(#c9c9c4, #6b6b66); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (max-width: 720px) { .klemmbrett { padding: 42px 10px 16px; margin-top: 30px; } .blatt { padding: 20px 14px 24px; } .stift { display: none; } .stempel { font-size: 24px; right: 10px; top: 50px; } }