@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/lato-400i.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/lato-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;src:url('fonts/lato-700i.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cinzel-400.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cinzel-600.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/cinzel-700.woff2') format('woff2')}
:root{--c-nd:#1a2535;--c-nm:#243447;--c-nl:#2e4160;--c-nmu:#3a5272;--c-st:#4a6080;--c-go:#c8a84b;--c-gl:#e0c46a;--c-cr:#f5f0e8;--c-lk:#ffffff;--font:'Lato', 'Segoe UI', Calibri, sans-serif;--font-head:'Cinzel', 'Trajan Pro', Georgia, serif;--max:1080px;--banner-h:270px}
/* Gemeinsame Grundlage aller Designs: Blöcke, Formulare, Navigation-Mechanik.
   Jedes Design setzt mindestens --primary --accent --bg --text --font --font-head --max. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.65}
:root{--line:color-mix(in srgb,var(--text) 16%,transparent);--soft:color-mix(in srgb,var(--text) 5%,var(--bg));--radius:6px;--link:var(--primary)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--link)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;z-index:1000}
.muted{opacity:.6}
.align-center{text-align:center}
.align-right{text-align:right}

/* Navigation: Mechanik (Aussehen macht das Design) */
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav li{position:relative}
.site-nav a{display:block;text-decoration:none}
.site-nav .sub{display:none;position:absolute;left:0;top:100%;z-index:60}
.site-nav .sub .sub{left:100%;top:0}
.site-nav li:hover>.sub,.site-nav li:focus-within>.sub{display:block}
.sub-toggle{display:none}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;color:inherit}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0}
@media (max-width:820px){
  .nav-toggle{display:block}
  .site-nav{display:none}
  .site-nav.open{display:block}
  .site-nav>ul{flex-direction:column}
  .site-nav .sub,.site-nav .sub .sub{position:static;display:none;box-shadow:none;min-width:0}
  .site-nav li:hover>.sub,.site-nav li:focus-within>.sub{display:none}
  .site-nav li.open>.sub{display:block}
  .site-nav li.has-sub>a{padding-right:48px}
  .sub-toggle{display:block;position:absolute;right:0;top:0;width:44px;height:42px;background:none;border:0;cursor:pointer;color:inherit}
  .sub-toggle::after{content:"";display:block;width:8px;height:8px;margin:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:.2s}
  li.open>.sub-toggle::after{transform:rotate(-135deg)}
}

/* Banner */
.site-banner{position:relative;overflow:hidden;background:var(--banner-bg,var(--soft))}
.site-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}

/* Inhalt */
.content{padding-top:40px;padding-bottom:64px;min-height:40vh}
.b{margin:0 0 1.4em}
.content>.b:first-child{margin-top:0}
.b-text>:first-child,.b-columns .col>:first-child,.ti-text>:first-child,.b-callout>:first-child{margin-top:0}
.b-text>:last-child,.b-columns .col>:last-child,.ti-text>:last-child,.b-callout>:last-child{margin-bottom:0}
.b-text table,.b-columns table,.ti-text table,.b-callout table{border-collapse:collapse;width:100%;margin:.6em 0 1.2em}
.b-text td,.b-text th,.ti-text td,.ti-text th,.b-columns td,.b-columns th{border-bottom:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.b-text th,.ti-text th,.b-columns th{font-weight:600}
blockquote{margin:1em 0;padding:.4em 1.2em;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
ul.link-list{list-style:none;padding:0;margin:.6em 0}
ul.link-list li{border-bottom:1px solid var(--line)}
ul.link-list li a{display:block;padding:8px 4px;text-decoration:none;transition:background .12s,padding-left .12s}
ul.link-list li a:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);padding-left:12px}

.b-columns{display:grid;gap:32px;grid-template-columns:repeat(var(--n,2),1fr)}
.cols-2{--n:2}.cols-3{--n:3}.cols-4{--n:4}

.b-image{margin-left:0;margin-right:0}
.b-image img{border-radius:var(--radius)}
.b-image.size-medium{max-width:60%}
.b-image.size-small{max-width:33%}
.b-image.size-full{max-width:none}
.b-image.align-center{margin-left:auto;margin-right:auto}
.b-image.align-center img{margin:0 auto}
.b-image.align-right{margin-left:auto}
figcaption{font-size:.9rem;opacity:.75;margin-top:6px}

.b-textimage{display:grid;gap:32px;align-items:start;grid-template-columns:1fr var(--ti,33%)}
.b-textimage.w-half{--ti:50%}.b-textimage.w-quarter{--ti:25%}
.b-textimage.img-left{grid-template-columns:var(--ti,33%) 1fr}
.b-textimage.img-left .ti-img{order:-1}
.ti-img{margin:0}
.ti-img img{border-radius:var(--radius);width:100%}

.b-callout{padding:16px 22px;border-radius:var(--radius);border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.b-callout.style-info{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,transparent)}
.b-callout.style-plain{border-color:var(--line);background:var(--soft)}
.b-callout .callout-title{font-weight:700;margin:0 0 .4em;font-size:1.05em}

.gal-title{margin-top:1.4em}
.gal-count{font-size:.85rem;opacity:.7;margin:-.4em 0 .8em}
.b-gallery{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:12px}
.b-gallery figure{margin:0}
.b-gallery a{display:block}
.b-gallery img{width:100%;border-radius:var(--radius)}
.b-gallery.crop img{aspect-ratio:4/3;object-fit:cover}
.b-gallery.flow{display:flex;flex-wrap:wrap;gap:6px}
.b-gallery.flow img{height:var(--gh,120px);width:auto;max-width:220px;object-fit:cover}
.b-gallery.flow figcaption{max-width:180px}
.b-gallery a:hover img{filter:brightness(1.06)}

.b-divider{border:0;border-top:1px solid var(--line);margin:2em 0}

.btn{display:inline-block;padding:11px 22px;border-radius:var(--radius);text-decoration:none;font:inherit;font-weight:600;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--primary);color:var(--on-primary,#fff)}
.btn-primary:hover{background:color-mix(in srgb,var(--primary) 85%,#000);color:var(--on-primary,#fff)}
.btn-accent{background:var(--accent);color:var(--on-accent,#1a1a1a)}
.btn-accent:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}
.btn-outline{border-color:var(--primary);color:var(--primary);background:transparent}
.btn-outline:hover{background:var(--primary);color:var(--on-primary,#fff)}

.b-video,.b-embed{margin-left:0;margin-right:0}
.b-video iframe,.video-consent{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius)}
.video-consent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:var(--soft)}
.video-consent p{margin:0;max-width:440px;font-size:.95rem}
.b-embed iframe{width:100%;border:0;display:block}

.b-contact{max-width:640px;display:grid;gap:14px}
.b-contact label{display:grid;gap:4px;font-weight:600;font-size:.95rem}
.b-contact label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.b-contact label.check input{margin-top:5px}
.b-contact input[type=text],.b-contact input[type=email],.b-contact input[type=tel],.b-contact textarea{font:inherit;padding:10px 12px;border:1px solid color-mix(in srgb,var(--text) 30%,transparent);border-radius:var(--radius);background:var(--bg);color:var(--text)}
.b-contact input:focus,.b-contact textarea:focus{outline:2px solid var(--primary);outline-offset:1px}
.b-contact .hp{position:absolute;left:-9999px}
.form-success,.form-error{padding:12px 16px;border-radius:var(--radius)}
.form-success{background:#e3f4e6;color:#1d5f2b}
.form-error{background:#fbe4e4;color:#8a1f1f}

@media (max-width:720px){
  .b-columns,.b-textimage,.b-textimage.img-left{grid-template-columns:1fr}
  .b-textimage.img-left .ti-img{order:0}
  .b-image.size-medium,.b-image.size-small{max-width:100%}
  .b-gallery{grid-template-columns:repeat(2,1fr)}
}

.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:2000;padding:40px}
.lb img{max-height:85vh;max-width:92vw;width:auto}
.lb p{color:#eee;text-align:center;margin:10px 0 0;font-size:.95rem}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;padding:8px 16px;line-height:1}
.lb .lb-close{top:8px;right:8px}
.lb .lb-prev{left:4px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:4px;top:50%;transform:translateY(-50%)}
.lb .lb-count{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);color:#ccc;font-size:.85rem}

/* nur Vorschau */
.bk-preview-bar{background:#222;color:#ddd;font:13px/1 system-ui,sans-serif;padding:8px 14px;text-align:center}
.bk-preview-bar a{color:#9cd2ff}
.bk-empty{border:2px dashed #999;color:#888;padding:28px;text-align:center;border-radius:6px;font:14px/1.4 system-ui,sans-serif}
.bk-live{display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:4px;background:#2a6f97;color:#fff;font:12px/1.5 system-ui,sans-serif}
.bk-note{font-size:.85rem;opacity:.7}

@media print{.site-header,.site-footer,.nav-toggle,.site-nav,.site-banner{display:none}}

:root{
  --nd:var(--c-nd);--nm:var(--c-nm);--nl:var(--c-nl);--nmu:var(--c-nmu);--st:var(--c-st);
  --go:var(--c-go);--gl:var(--c-gl);--cr:var(--c-cr);--lk:var(--c-lk);
  --bg:var(--nd);--text:var(--cr);--primary:var(--go);--accent:var(--go);--link:var(--lk);
  --on-primary:var(--nd);--on-accent:var(--nd);--line:var(--nl);--soft:var(--nm);--radius:3px;
  --muted:var(--st);--heading:var(--gl);
}
body{font-family:var(--font);background:var(--nd);color:var(--cr)}
a:visited{color:var(--lk)}

/* Kopf */
.site-header{background:var(--nd);text-align:center;padding:22px 20px 12px;border-bottom:1px solid var(--nmu)}
.site-title{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--cr);font-family:var(--font-head);font-size:clamp(18px,3vw,40px);letter-spacing:8px;font-weight:400;line-height:1.3}
.site-title:visited{color:var(--cr)}
.site-title .brand-logo{max-height:52px;width:auto}
.brand-tagline{margin:4px 0 0;color:var(--st);font-size:16px;letter-spacing:2px}

/* Navigation */
.nav-wrap{position:sticky;top:0;z-index:500;background:var(--nm);border-top:1px solid var(--nl);border-bottom:2px solid var(--go)}
.site-nav>ul{display:flex;flex-wrap:wrap;justify-content:center}
.site-nav>ul>li>a{display:flex;align-items:center;gap:4px;padding:12px 16px;font-family:var(--font-head);font-size:15px;letter-spacing:2px;color:var(--cr);text-transform:uppercase;border-right:1px solid var(--nl);transition:background .15s,color .15s;white-space:nowrap}
.site-nav>ul>li:first-child>a{border-left:1px solid var(--nl)}
.site-nav>ul>li>a:hover,.site-nav>ul>li.active>a,.site-nav>ul>li.trail>a{background:var(--nl);color:var(--gl)}
.site-nav>ul>li.active>a,.site-nav>ul>li.trail>a{box-shadow:inset 0 -2px 0 var(--go)}
.site-nav>ul>li.has-sub>a::after{content:"▾";font-size:10px;opacity:.6}
.site-nav .sub{min-width:220px;width:max-content;background:color-mix(in srgb,var(--nd) 70%,var(--nl));border:1px solid var(--nl);border-top:2px solid var(--go);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.site-nav .sub .sub{top:-2px;min-width:200px}
.site-nav .sub a{padding:9px 14px;font-family:var(--font-head);font-size:14px;letter-spacing:1.5px;color:var(--cr);text-transform:uppercase;border-bottom:1px solid var(--nl);transition:background .1s;white-space:nowrap}
.site-nav .sub li:last-child>a{border-bottom:0}
.site-nav .sub a:hover,.site-nav .sub li.active>a{background:rgba(200,168,75,.12);color:var(--gl)}
.site-nav .sub li.has-sub>a::after{content:"›";float:right;color:var(--go)}
.nav-toggle{color:var(--cr);margin:0 auto;display:none;align-items:center;gap:10px;font-family:var(--font-head);letter-spacing:2px;font-size:15px}
.nav-toggle b{font-weight:400;text-transform:uppercase}
.nav-toggle span{width:20px}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .nav-toggle span{display:inline-block;margin:0}
  .nav-toggle span+span{margin-left:-24px}
  .nav-toggle{gap:0}
  .nav-toggle span{position:relative;top:-6px}
  .nav-toggle span:nth-child(2){top:0}
  .nav-toggle span:nth-child(3){top:6px}
  .nav-toggle b{margin-left:14px}
  .site-nav>ul>li>a{border:0;border-top:1px solid var(--nl);justify-content:flex-start}
  .site-nav>ul>li:first-child>a{border-left:0}
  .site-nav .sub{border:0;background:transparent;padding-left:16px;width:auto}
  .site-nav .sub a{white-space:normal}
  .site-nav li.has-sub>a::after{display:none}
}

/* Banner */
.site-banner{height:var(--banner-h,270px);min-height:0;background:var(--nd)}
.site-banner-empty{background:linear-gradient(180deg,var(--nd),var(--nl));opacity:.9}
hr.div{border:none;border-top:1px solid var(--nl);margin:0}

/* Startseite: Zerstörer fährt unter dem Banner durchs Meer (Schalter im Design) */
.see{position:relative;height:80px;overflow:hidden;background:linear-gradient(180deg,var(--nd) 0%,color-mix(in srgb,var(--nl) 70%,var(--nd)) 100%)}
.see .welle{position:absolute;left:0;bottom:0;width:200%;height:30px;animation:wellen 16s linear infinite}
.see .w1{bottom:10px;fill:color-mix(in srgb,var(--nl) 80%,var(--nd));opacity:.9;animation-duration:24s;animation-direction:reverse}
.see .w2{height:26px;fill:color-mix(in srgb,var(--nm) 60%,var(--nd));z-index:2}
.see .w2 path{stroke:color-mix(in srgb,var(--go) 45%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.see .fahrt{position:absolute;left:0;bottom:4px;width:100%;height:59px;z-index:1;animation:fahrt 75s linear infinite}
.see .schiff{display:block;width:300px;height:59px;animation:schaukeln 5s ease-in-out infinite alternate;transform-origin:50% 90%}
.see .rumpf{fill:#0c131d}
.see .rumpf .glas{fill:color-mix(in srgb,var(--go) 45%,#0c131d);stroke:none}
.see .rumpf>path:first-child{stroke:color-mix(in srgb,var(--go) 35%,transparent);stroke-width:.8}
.see .t5{transition:transform .35s ease-in-out}
.see .rohr{transition:transform .3s ease-out}
.see .muendung path{fill:#ffd36b}
.see .muendung circle{fill:#fff4c8}
.see .muendung{animation:muendung .35s ease-out forwards}
.see .muendung .rauch{fill:rgba(220,225,230,.55);transform-box:fill-box;transform-origin:center;animation:rauch .9s ease-out forwards}
@keyframes muendung{0%{opacity:1}100%{opacity:0}}
@keyframes rauch{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(2.4) translate(2px,-2px)}}
.treffer{position:fixed;z-index:9999;width:48px;height:48px;margin:-24px 0 0 -24px;pointer-events:none;
  background:radial-gradient(circle,#fffbe8 0 18%,#ffd36b 32%,rgba(255,140,40,.85) 55%,transparent 70%);
  clip-path:polygon(50% 0,58% 38%,100% 50%,58% 62%,50% 100%,42% 62%,0 50%,42% 38%);
  animation:treffer .7s ease-out forwards}
@keyframes treffer{0%{transform:scale(.2) rotate(0);opacity:1}40%{transform:scale(1.2) rotate(20deg);opacity:1}100%{transform:scale(1.6) rotate(45deg);opacity:0}}
@keyframes wellen{to{transform:translateX(-50%)}}
@keyframes fahrt{from{transform:translateX(-320px)}to{transform:translateX(100vw)}}
@keyframes schaukeln{from{transform:rotate(-.7deg) translateY(1px)}to{transform:rotate(.6deg) translateY(-1px)}}
@media (prefers-reduced-motion:reduce){
  .see .welle,.see .schiff{animation:none}
  .see .fahrt{animation:none;transform:translateX(12vw)}
}

/* Inhalt */
.content{max-width:var(--max);padding:38px 28px 48px}
.content>h1.b,.content h1{font-family:var(--font-head);font-size:clamp(22px,3vw,30px);font-weight:400;letter-spacing:1px;color:var(--cr);margin:0 0 20px;text-align:center;line-height:1.4}
h2,h3,h4{font-family:var(--font-head);font-weight:400;color:var(--gl);line-height:1.4}
h2{font-size:21px;letter-spacing:2px;margin:16px 0 8px}
h3{font-size:18px;letter-spacing:1px;margin:12px 0 6px}
h4{font-size:17px;letter-spacing:1px}
.content p,.content li{font-size:clamp(17px,1.8vw,18px);line-height:1.85;color:var(--cr)}
.content p{margin:0 0 14px}
.content ul,.content ol{margin:10px 0 14px 24px;padding:0}
.content li{margin-bottom:6px}
.content a{color:var(--lk)}
.b{margin-bottom:14px}
.b-text td,.b-text th,.ti-text td,.ti-text th,.b-columns td,.b-columns th{padding:5px 8px;border-bottom:1px solid var(--nl);font-size:18px}
.b-text th,.ti-text th,.b-columns th{color:var(--gl);font-weight:600}
blockquote{border-left-color:var(--go);background:rgba(200,168,75,.07)}

ul.link-list{margin:10px 0}
ul.link-list li{border-bottom:1px solid var(--nl);margin:0}
.content ul.link-list li a{display:block;padding:8px 4px;color:var(--gl);font-size:18px;text-decoration:none}
ul.link-list li a:hover{background:rgba(200,168,75,.07)}

.b-callout{margin:22px 0;padding:16px 22px;border:1px solid var(--go);border-radius:3px;background:rgba(200,168,75,.07)}
.b-callout .callout-title{font-family:var(--font-head);font-size:17px;font-weight:600;color:var(--gl);text-decoration:underline;margin-bottom:7px;letter-spacing:.5px}
.b-callout p{font-size:18px;line-height:1.7}
.b-callout.style-info{border-color:var(--nmu);background:var(--nm)}
.b-callout.style-plain{border-color:var(--nl);background:transparent}

.b-textimage{grid-template-columns:1fr 320px}
.b-textimage.img-left{grid-template-columns:320px 1fr}
.b-textimage.w-half{grid-template-columns:1fr 1fr}
.ti-img img,.b-image img{border:1px solid var(--nl);border-radius:3px}

.gal-title{font-family:var(--font-head);font-size:18px;font-weight:400;letter-spacing:2px;color:var(--go);margin:24px 0 14px;padding-bottom:6px;border-bottom:1px solid var(--nl)}
.gal-count{font-size:16px;color:var(--st);margin:-6px 0 14px}
.b-gallery img{border:1px solid var(--nl);border-radius:3px;transition:border-color .2s,transform .15s}
.b-gallery a:hover img{border-color:var(--go);transform:scale(1.03);filter:none}
.b-gallery figcaption{color:var(--st)}

.btn{font-family:var(--font-head);font-size:15px;letter-spacing:1px;font-weight:400;padding:9px 18px}
.btn-primary,.btn-accent{background:rgba(200,168,75,.1);border:1px solid var(--go);color:var(--gl)}
.btn-primary:hover,.btn-accent:hover{background:rgba(200,168,75,.22);color:var(--gl)}
.btn-outline{border:1px solid var(--nl);color:var(--cr)}
.btn-outline:hover{background:var(--nl);color:var(--gl)}

.b-contact input[type=text],.b-contact input[type=email],.b-contact input[type=tel],.b-contact textarea{background:var(--nm);border-color:var(--nl);color:var(--cr)}
.b-contact label{color:var(--cr)}
.video-consent{background:var(--nm)}

.lb img{border:2px solid var(--go);border-radius:3px}
.lb button{color:var(--go)}
.lb .lb-prev,.lb .lb-next{background:rgba(200,168,75,.15);border:1px solid var(--go);font-size:24px;padding:10px 15px;border-radius:3px}
.lb .lb-count{color:var(--go);font-family:var(--font-head);letter-spacing:2px;font-size:14px}

/* Fuß */
.site-footer{background:var(--nd);border-top:2px solid var(--go);padding:20px;text-align:center}
.ft-inner{max-width:900px;margin:0 auto}
.site-footer p{margin:0 0 8px;font-size:15px;color:var(--st)}
.site-footer p:first-child{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 20px}
.site-footer p:first-child a{font-family:var(--font-head);font-size:13px;letter-spacing:1px;color:var(--cr);text-decoration:none;border-bottom:1px solid transparent;text-transform:uppercase}
.site-footer p:first-child a:hover{color:var(--gl);border-bottom-color:var(--go)}
.site-footer a{color:var(--cr)}