/* Ergänzungen für die Live-Seite: Chronik, Gutschein, Rechtsseiten */

/* Logo-Schild im Bildfenster: feste Breite, sonst schrumpft das Schild samt Logo auf null */
.harbor__sign .sign{width:min(460px,86%)}
@media (max-width:640px){.harbor__sign .sign{width:88%}}

/* Chronik */
.chronik{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,6cqi,56px);align-items:start;padding:clamp(40px,7cqi,72px)!important}
.chronik__photo{position:sticky;top:24px;margin:0;transform:rotate(-1.6deg)}
.chronik__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;box-shadow:0 18px 34px rgba(20,39,58,.25)}
.chronik__photo figcaption{position:absolute;right:-12px;bottom:18px;padding:3px 14px;border-radius:6px;background:var(--segeltuch);font-size:17px;line-height:1.35;box-shadow:0 4px 10px rgba(20,39,58,.18);transform:rotate(3deg)}
.chronik__text>p:not(.kicker){margin-top:16px;font-size:17.5px;line-height:1.68;max-width:60ch}
.zeitleiste{list-style:none;margin-top:28px;margin-left:6px;padding-left:24px;border-left:2px dashed rgba(20,39,58,.28)}
.zeitleiste li{position:relative;padding-bottom:18px}
.zeitleiste li:last-child{padding-bottom:0}
.zeitleiste li::before{content:"";position:absolute;left:-31px;top:5px;width:12px;height:12px;background:var(--ak);transform:rotate(45deg)}
.zeitleiste b{display:block;font:700 18px/1.25 var(--stencil);letter-spacing:.12em;color:var(--petrol)}
.zeitleiste span{display:block;margin-top:2px;font-size:16px;line-height:1.55;color:rgba(26,37,50,.82)}
.chronik__gaeste{margin-top:28px;padding:18px 22px;border:2px dashed rgba(20,39,58,.24);border-radius:14px;font-size:16px;line-height:1.6;color:rgba(26,37,50,.82)}
.chronik__gaeste strong{display:block;margin-bottom:4px;font:600 21px/1.3 var(--slab);color:var(--tinte)}

/* Gutschein (kleine Karte) */
.mini .kicker{margin-bottom:-8px}
.mini__klein{max-width:34ch;font-size:15.5px;line-height:1.5;color:rgba(26,37,50,.74)}
.mini .mini__orn--stich{width:min(150px,60%);max-height:120px;opacity:.85}

/* Speisekarte als PDF */
.karte__pdf{display:flex;justify-content:center;margin-top:22px}

@container (max-width:640px){
  .chronik{grid-template-columns:1fr;padding:44px 30px!important}
  .chronik__photo{position:relative;top:0;max-width:420px;transform:none}
  .chronik__photo figcaption{right:auto;left:-6px}
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.recht{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:var(--gap);display:flex;flex-direction:column;gap:var(--gap);container-type:inline-size}
.recht__bar{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:16px;background:var(--marine)}
.recht__logo{display:flex;align-items:center;min-height:48px;padding:6px 14px;border-radius:10px;background:var(--segeltuch) url("vorlage/img/tex/segeltuch.webp") 0 0/800px}
.recht__logo img{height:38px;width:auto;mix-blend-mode:multiply}
.recht__bar .btn{margin-left:auto}
.recht__card h1{font-size:clamp(36px,7cqi,56px);line-height:1.05}
.recht__card h2{margin-top:36px;font-size:clamp(22px,3.6cqi,27px);line-height:1.2}
.recht__card h3{margin-top:22px;font-size:19px;line-height:1.3}
.recht__card p,.recht__card li{margin-top:10px;font-size:16.5px;line-height:1.65;max-width:72ch;overflow-wrap:break-word}
.recht__card ul{padding-left:22px}
.recht__card a{border-bottom:1px solid rgba(26,37,50,.3)}
.recht__card .stand{margin-top:34px;font-size:14px;font-style:italic;color:rgba(26,37,50,.66)}
@media (max-width:640px){
  .recht__logo img{height:30px}
  .recht__bar .btn{font-size:13.5px;padding:4px 12px;min-height:44px;letter-spacing:.08em}
}

/* Räume: Fotos vom Haus zum Blättern, Klick vergrößert (01.11.2026) */
.blatt{margin-top:34px}
.blatt__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:14px;overscroll-behavior-x:contain}
.blatt__track::-webkit-scrollbar{display:none}
.blatt__track:focus-visible{outline:3px solid var(--messing);outline-offset:3px}
.blatt__seite{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:56fr 44fr;gap:10px;height:clamp(460px,96cqi,640px)}
.blatt__seite + .blatt__seite{margin-left:10px}
.blatt__seite .mosaic__f:first-child{grid-column:1/-1}
.blatt__seite .mosaic__f:nth-child(2):last-child{grid-column:1/-1}
.blatt .mosaic__f{cursor:zoom-in}
.blatt .mosaic__f figcaption{font-size:15px;padding:2px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blatt__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.blatt__pfeil{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid rgba(20,39,58,.22);color:var(--marine);transition:background-color .2s var(--ease),color .2s var(--ease),opacity .2s}
.blatt__pfeil:disabled{opacity:.3;cursor:default}
@media (hover:hover){.blatt__pfeil:not(:disabled):hover{background:var(--marine);color:var(--segeltuch)}}
.blatt__punkte{display:flex;gap:8px}
.blatt__punkte button{width:11px;height:11px;padding:0;border-radius:50%;background:rgba(20,39,58,.22);transition:background-color .2s,transform .2s}
.blatt__punkte button[aria-current="true"]{background:var(--marine);transform:scale(1.25)}
@container (max-width:520px){
  .blatt__seite{height:480px}
}

.lupe{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:56px 72px;border:0;background:rgba(11,24,38,.94);color:var(--segeltuch)}
.lupe[open]{display:grid;place-items:center}
.lupe::backdrop{background:transparent}
.lupe__f{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
.lupe__f img{max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);object-fit:contain;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.lupe__f figcaption{font-size:20px}
.lupe__x{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;background:rgba(244,239,227,.12)}
.lupe__x span{position:absolute;left:13px;top:23px;width:22px;height:2px;background:currentColor;transform:rotate(45deg)}
.lupe__x span+span{transform:rotate(-45deg)}
.lupe__pfeil{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(244,239,227,.12);color:inherit}
.lupe__pfeil--l{left:12px}.lupe__pfeil--r{right:12px}
@media (hover:hover){.lupe__x:hover,.lupe__pfeil:hover{background:rgba(244,239,227,.25)}}
@media (max-width:640px){
  .lupe{padding:64px 10px 80px}
  .lupe__pfeil{top:auto;bottom:16px;translate:none}
  .lupe__pfeil--l{left:calc(50% - 64px)}.lupe__pfeil--r{right:calc(50% - 64px)}
}