/* Capt'n Schillow – eigenes Stylesheet (Übergangsseite, Nachbau des bisherigen Layouts) */

/* ---------- Grundlagen ---------- */
html { -webkit-text-size-adjust: 100%; }
/* Zeilenhöhe bewusst als Prozentwert: vererbt feste 18,2px, auch an größere Schrift im Text (wie im bisherigen Layout) */
body { margin: 0; background: #2a2a2a; color: #333; font: 13px/140% Helvetica, Arial, sans-serif; }
img { border: 0; }
a { color: #999; text-decoration: underline; }
a:hover { text-decoration: none; }
p, ul, ol, figure, h1, h2, h3 { margin: 0; }
.clear { clear: both; }
[hidden] { display: none !important; }
.rahmen { width: 960px; margin: 0 auto; }

/* ---------- Kopf mit Banner ---------- */
.kopf { padding: 20px 0; background: linear-gradient(to bottom, #141206 0, #141206 calc(100% - 9px), #040301 100%); }
.kopf img { display: block; }

/* ---------- Hintergrund + Navigation ---------- */
.hintergrund { padding-top: 20px; background: linear-gradient(to bottom, transparent 220px, #2b2a29 220px, #2b2a29 248px, transparent 248px) no-repeat; }
.hauptnav { min-height: 74px; }
.hauptnav ul { list-style: none; padding: 0 0 0 1px; }
.hauptnav li { float: left; }
.hauptnav a { display: block; margin-right: 10px; border-radius: 4px 4px 0 0; color: #999; font-size: 11px; line-height: 13px; text-decoration: none; }
.hauptnav a span { display: block; padding: 12px 8px; }
.hauptnav a:hover, .hauptnav a.aktiv { color: #fff; text-shadow: 0 0 2px #9a9a9a; background: linear-gradient(to bottom, #b0b0b0, #949494); }
.hauptnav a.aktiv { font-weight: bold; }

/* ---------- Hauptbereich ---------- */
.haupt { position: relative; background: #fff; border: 1px solid #e6e6e6; }
.haupt-kopf { position: absolute; top: 0; left: 0; right: 0; height: 100px; background: #b3b3b3; border-bottom: 30px solid #a9a9a9; }
.inhalt { position: relative; float: left; width: 600px; padding: 150px 0 20px 20px; }
.haupt-fuss { height: 30px; }

/* ---------- Seitenleiste ---------- */
.seitenleiste { position: relative; float: right; width: 296px; margin: 20px 20px 0 0; }
/* weißer Kasten mit Schatten, der nach unten ausläuft */
.seitenleiste::before { content: ""; position: absolute; top: 0; left: 0; width: 296px; height: 594px;
  background: linear-gradient(#fff, #fff) 10px 10px / 276px 574px no-repeat;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .35));
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 85%); mask-image: linear-gradient(to bottom, #000 55%, transparent 85%); }
.unternav { position: relative; padding: 12px; }
.unternav ul { list-style: none; padding: 0; border-top: 30px solid #141206; }
.unternav a { display: block; padding: 12px 10px; border-bottom: 1px solid #f2efec; color: #666; font-size: 11px; line-height: 11px; text-decoration: none; }
.unternav a.aktiv { background: #f2efec; color: #b3b3b3; font-weight: bold; }
.seitenleiste-innen { position: relative; padding: 0 20px 20px; }

/* ---------- Bausteine ---------- */
.b { padding: 5px; }
.b-hr hr { height: 1px; margin: 0; border: 0; border-bottom: 1px solid #ccc; }
.b-leer { height: 0; }
.ueberschrift { color: #666; font-size: 19px; line-height: 1.4; font-weight: normal; }
h2.ueberschrift { font-size: 14px; font-weight: bold; }
.formular .zahl input { line-height: 1.4; }
.b-text h1 { color: #666; font-size: 19px; line-height: 1.4; font-weight: normal; }
.b-text h2 { color: #666; font-size: 14px; line-height: 1.4; font-weight: bold; }
.b-text h3 { color: #666; font-size: 13px; line-height: 1.4; font-weight: bold; }
.b-text table { border-collapse: collapse; }
.b-statisch { padding: 0; }
.b-statisch .abs { padding: 5px; }

.b-bild figure img { display: block; }
.b-bild figcaption { padding-top: 2px; }
.b-textbild figure { position: relative; }
.b-textbild figure.links { float: left; margin: 4px 20px 4px 0; }
.b-textbild figure.rechts { float: right; margin: 4px 0 4px 15px; }
.b-textbild img { display: block; }

.galerie { position: relative; }
.galerie a { position: absolute; display: block; }
.galerie img { display: block; box-sizing: border-box; object-fit: cover; }

.button { display: inline-block; padding: 6px 12px; border: 1px solid #5f5f5f; border-radius: 6px; background: #696969; color: #fff;
  font-size: 14px; line-height: 1.4; text-align: center; text-decoration: none; vertical-align: middle; }
.button:hover { text-decoration: none; }

.b-spalten .spalte { float: left; padding-right: 12px; }
.b-spalten .spalte.letzte { float: right; padding-right: 0; }

.b-download .dl-icon { float: left; width: 52px; }
.b-download .dl-icon img { display: block; }
.b-download .dl-text { margin-left: 55px; padding-left: 6px; }
.b-download .dl-titel { font-weight: bold; }

.b-karte iframe { display: block; }

/* 2-Klick-Platzhalter (Karte, Gutschein-Shop) */
.zwei-klick { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px; background: #f2f2f2; border: 1px solid #e0e0e0; text-align: center; }
.zwei-klick .button { cursor: pointer; font-family: inherit; }

/* Gästebuch (nur Anzeige der bisherigen Einträge) */
.gb-liste { list-style: none; padding: 0; margin: 0 0 15px; }
.gb-liste li { position: relative; padding: 12px 0; border-top: 1px solid #ccc; }
.gb-liste .nr { position: absolute; top: 11px; right: 10px; }
.gb-meta strong { display: block; }
.gb-meta a { font-weight: bold; }

/* ---------- Formulare ---------- */
.formular .feld { position: relative; padding: 5px 0; }
.formular .feld > label { display: block; }
.formular .feld.pflicht > label span::after { content: "*"; color: #eb433e; }
.formular .eingabe { position: relative; padding-left: 2px; }
.formular input[type=text], .formular input[type=email], .formular input[type=date], .formular textarea {
  box-sizing: border-box; padding: 0; border: 1px solid #ccc; background: #fff; color: #333; font: inherit; }
.formular input[type=text], .formular input[type=email] { height: 20.2px; }
.formular input[type=date] { height: 26px; }
.formular textarea { width: 100%; resize: vertical; }
.formular .feld-number .eingabe { height: 31px; }
.formular .option { display: block; }
.zahl { position: relative; display: inline-block; vertical-align: top; margin: 2px 0 0 6px; padding-right: 20px; }
.zahl input[type=text] { width: 32px; height: 21px; padding: 0 5px 0 0; border: 0; font-size: 14px; line-height: 21px; text-align: right; }
.zahl-knoepfe { position: absolute; top: 0; right: 0; width: 20px; height: 21px; }
.zahl-knoepfe button { display: block; width: 20px; height: 50%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.zahl-knoepfe button::after { content: ""; position: absolute; left: 6px; border: 4px solid transparent; }
.zahl-knoepfe button[data-schritt="1"]::after { top: 0; border-bottom-color: #2e2e2e; }
.zahl-knoepfe button[data-schritt="-1"]::after { bottom: 0; border-top-color: #2e2e2e; }
.formular .absenden .eingabe { padding-top: 1px; }
.formular input[type=submit] { box-sizing: border-box; height: 30px; margin-top: 0; padding: 4px 18px; font: inherit; line-height: 18.2px; }
/* Variante: Beschriftung links neben dem Feld (Kontaktformular) */
.formular.nebeneinander .feld > label { float: left; width: 148px; }
.formular.nebeneinander .eingabe { margin-left: 148px; }
.formular.nebeneinander .absenden .eingabe { padding-top: 0; }
.formular .hinweis { margin-top: 10px; padding: 3px 0 3px 20px; border-top: 1px solid #ccc; background: url(/assets/hinweis.svg) no-repeat 0 50%; }
.formular .stern { color: #eb433e; }
.formular .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .fehler-text { color: #eb433e; font-size: 12px; }
.formular .feld.fehler input, .formular .feld.fehler textarea { border-color: #eb433e; }
.formular .meldung { margin-top: 10px; padding: 8px 10px; border: 1px solid #ccc; }
.formular .meldung.ok { border-color: #7aa33a; }
.formular .meldung.fehler { border-color: #eb433e; color: #eb433e; }

/* ---------- Fuß ---------- */
.fuss { min-height: 200px; padding-top: 20px; font-size: 11px; line-height: 1.4; }
.fuss-links { float: left; }
.fuss-rechts { float: right; }
.fuss a { color: #999; text-decoration: none; white-space: nowrap; }

/* ---------- Nach oben ---------- */
.nach-oben { position: fixed; right: 62px; bottom: 60px; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; background: rgba(0, 0, 0, .5); }
.nach-oben span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nach-oben::after { content: ""; position: absolute; left: 10px; top: 12px; width: 8px; height: 8px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(45deg); }

/* ---------- Bildergalerie-Großansicht ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .85); }
.lightbox img { max-width: 90vw; max-height: 85vh; box-shadow: 0 0 20px rgba(0, 0, 0, .6); }
.lightbox button { position: absolute; border: 0; background: none; color: #fff; font: 40px/1 Helvetica, Arial, sans-serif; cursor: pointer; padding: 10px 16px; }
.lightbox .lb-zu { top: 10px; right: 10px; }
.lightbox .lb-zurueck { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-vor { right: 10px; top: 50%; transform: translateY(-50%); }