/* =====================================================================
   der-Reiseberater.net – Seekarten-Design
   Reine Vanilla-CSS, keine Abhängigkeiten.
   Aufbau: 1 Tokens · 2 Basis · 3 Kartengrund · 4 Rail · 5 Kopf
           6 Kartusche · 7 Bänder · 8 Karten · 9 Etappen · 10 Berater
           11 Legende · 12 Logbuch · 13 Formular · 14 Fuß · 15 Motion
   ===================================================================== */

/* ---------- 1 Tokens ------------------------------------------------ */
:root{
    --paper:      #F2EDE1;   /* Kartenpapier          */
    --paper-2:    #E8DFCD;   /* Landflächen, Tiefen   */
    --shoal:      #D9E6E3;   /* Flachwasser           */
    --ink:        #14283C;   /* Admiralty-Tinte       */
    --ink-deep:   #0B1A28;   /* Tiefsee               */
    --magenta:    #B4185E;   /* Kartenmagenta         */
    --brass:      #A9884E;   /* Messing, sparsam      */

    --ink-70: rgba(20,40,60,.70);
    --ink-45: rgba(20,40,60,.45);
    --ink-18: rgba(20,40,60,.18);
    --ink-10: rgba(20,40,60,.10);
    --paper-70: rgba(242,237,225,.72);
    --paper-40: rgba(242,237,225,.40);

    --serif: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Hoefler Text",Georgia,serif;
    --sans:  system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:  ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

    --wrap: 1180px;
    --rail: 68px;
    --pad:  clamp(20px, 5vw, 56px);
    --shadow: 0 1px 0 var(--ink-10), 0 18px 40px -28px rgba(11,26,40,.55);

    /* Kartengrund */
    --grid-1:      var(--ink-10);
    --grid-2:      rgba(20,40,60,.045);
    --chart-line:  rgba(20,40,60,.16);
    --chart-line-2:rgba(20,40,60,.13);
    --chart-shoal: rgba(160,196,196,.22);
    --chart-lot:   rgba(20,40,60,.30);
    --panel:       rgba(242,237,225,.90);
}

/* ---------- 2 Basis ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
    scroll-behavior:smooth;
    scroll-padding-top:5.5rem;
    -webkit-text-size-adjust:100%;
    background:var(--paper);
}

body{
    margin:0;
    font-family:var(--sans);
    font-size:clamp(16px,.4vw + 15px,17.5px);
    line-height:1.62;
    color:var(--ink);
    background:transparent;   /* Kartengrund liegt darunter */
    overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.12; margin:0; }
h2{ font-size:clamp(1.85rem,3.2vw,2.9rem); letter-spacing:-.01em; }
h3{ font-size:1.3rem; letter-spacing:.005em; }
p{ margin:0 0 1em; }
a{ color:inherit; }

img{ max-width:100%; display:block; }

.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
    position:absolute; left:-999px; top:0; z-index:100;
    background:var(--ink); color:var(--paper); padding:.8em 1.2em;
    font:600 .85rem/1 var(--mono); text-decoration:none;
}
.skip:focus{ left:0; }

:focus-visible{
    outline:2px solid var(--magenta);
    outline-offset:3px;
}

.eyebrow{
    font:500 .7rem/1 var(--mono);
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--magenta);
    margin:0 0 1.1em;
}

.lede{
    font-family:var(--serif);
    font-size:clamp(1.05rem,1.4vw,1.24rem);
    font-style:italic;
    color:var(--ink-70);
    max-width:52ch;
    margin:.7em 0 0;
}

/* Knöpfe */
.btn{
    display:inline-block;
    font:600 .78rem/1 var(--mono);
    letter-spacing:.16em; text-transform:uppercase;
    padding:1.05em 1.9em;
    text-decoration:none;
    border:1px solid var(--ink);
    transition:transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn-primary{
    background:var(--magenta); border-color:var(--magenta); color:var(--paper);
    box-shadow:0 10px 24px -16px rgba(180,24,94,.9);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -16px rgba(180,24,94,.95); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn-wide{ width:100%; text-align:center; border:none; }

/* ---------- 3 Kartengrund ------------------------------------------ */
.chart-ground{
    position:fixed; inset:0; z-index:-2;
    background:var(--paper);
    pointer-events:none;
}
.chart-grid{
    position:absolute; inset:0;
    background-image:
        linear-gradient(var(--grid-1) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-1) 1px, transparent 1px),
        linear-gradient(var(--grid-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
    background-size:200px 200px, 200px 200px, 40px 40px, 40px 40px;
    opacity:.9;
}
.chart-depths{
    position:absolute; inset:0; width:100%; height:100%;
}
.chart-depths .contour{
    fill:none; stroke:var(--chart-line); stroke-width:1; stroke-dasharray:6 5;
}
.chart-depths .contour-solid{ stroke-dasharray:none; stroke:var(--chart-line-2); }
.chart-depths .shoal{ fill:var(--chart-shoal); stroke:none; }
.chart-depths .sounding{
    font:400 9px var(--mono); fill:var(--chart-lot);
}
.chart-vignette{
    position:absolute; inset:0;
    background:
        radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(169,136,78,.10) 100%),
        radial-gradient(100% 100% at 50% 100%, transparent 60%, rgba(11,26,40,.08) 100%);
}

/* ---------- 4 Kurslinie (Rail) -------------------------------------- */
.rail{
    position:fixed; left:0; top:0; bottom:0; width:var(--rail);
    display:none; z-index:20; pointer-events:none;
}
.rail-line{
    position:absolute; left:34px; top:14vh; bottom:14vh; width:1px;
    background:repeating-linear-gradient(var(--ink-18) 0 6px, transparent 6px 12px);
}
.rail-run{
    position:absolute; left:0; top:0; width:1px; height:0;
    background:repeating-linear-gradient(var(--magenta) 0 6px, transparent 6px 12px);
    transition:height .12s linear;
}
.rail-points{
    position:absolute; left:0; top:14vh; bottom:14vh; right:0;
    list-style:none; margin:0; padding:0;
}
.rail-points li{
    position:absolute; left:34px; transform:translate(-50%,-50%);
    pointer-events:auto;
}
.rail-points a{
    display:block; width:26px; height:26px; position:relative;
    text-decoration:none;
}
.rail-points a::before{
    content:""; position:absolute; left:50%; top:50%;
    width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
    background:var(--paper); border:1px solid var(--ink-45);
    transform:rotate(45deg);
    transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.rail-points a span{
    position:absolute; left:26px; top:50%; transform:translateY(-50%);
    font:500 .62rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
    white-space:nowrap; color:var(--ink-45);
    opacity:0; transition:opacity .3s ease;
}
.rail-points a:hover span,
.rail-points a:focus-visible span{ opacity:1; }
.rail-points li.here a::before{
    background:var(--magenta); border-color:var(--magenta); transform:rotate(45deg) scale(1.25);
}
.rail-points li.here a span{ opacity:1; color:var(--magenta); }

@media (min-width:1180px){
    .rail{ display:block; }
    body{ padding-left:var(--rail); }
}

/* ---------- 5 Kopfzeile --------------------------------------------- */
.top{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
    padding:.9rem var(--pad);
    background:var(--paper-70);
    backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
    border-bottom:1px solid var(--ink-10);
}
.brand{
    display:flex; align-items:center; gap:.7rem;
    text-decoration:none; color:var(--ink);
}
.brand-mark{ width:30px; height:30px; color:var(--magenta); flex:none; }
.brand-text{
    font-family:var(--serif); font-size:1.12rem; letter-spacing:.01em;
}
.brand-text b{ font-weight:600; }

.menu{ display:flex; align-items:center; gap:1.6rem; }
.menu a{
    font:500 .74rem/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
    text-decoration:none; color:var(--ink-70); position:relative; padding:.4em 0;
    transition:color .25s ease;
}
.menu a::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--magenta); transition:width .3s ease;
}
.menu a:hover{ color:var(--ink); }
.menu a:hover::after{ width:100%; }
.menu .menu-cta{
    color:var(--paper); background:var(--ink); padding:.85em 1.3em;
}
.menu .menu-cta:hover{ background:var(--magenta); color:var(--paper); }
.menu .menu-cta::after{ display:none; }

.burger{
    display:none; width:42px; height:34px; padding:8px 6px;
    background:none; border:1px solid var(--ink-18); cursor:pointer;
}
.burger span{ display:block; height:1px; background:var(--ink); margin:4px 0; transition:transform .3s ease, opacity .3s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:880px){
    .burger{ display:block; }
    .menu{
        position:absolute; left:0; right:0; top:100%;
        flex-direction:column; align-items:stretch; gap:0;
        background:var(--paper); border-bottom:1px solid var(--ink-18);
        max-height:0; overflow:hidden; transition:max-height .35s ease;
    }
    .menu.open{ max-height:24rem; }
    .menu a{ padding:1.15em var(--pad); border-top:1px solid var(--ink-10); }
    .menu .menu-cta{ text-align:center; margin:0; }
}

/* ---------- 6 Kartusche (Hero) -------------------------------------- */
.hero{
    position:relative;
    max-width:var(--wrap); margin:0 auto;
    padding:clamp(3rem,8vw,7rem) var(--pad) clamp(4rem,9vw,8rem);
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    gap:clamp(2rem,5vw,4rem); align-items:center;
}
.cartouche{
    position:relative;
    padding:clamp(2.2rem,4vw,3.4rem) clamp(1.8rem,3.6vw,3rem);
    background:linear-gradient(180deg, rgba(242,237,225,.93), rgba(242,237,225,.86));
    box-shadow:var(--shadow);
}
.cartouche-frame{
    position:absolute; inset:0; width:100%; height:100%;
    color:var(--ink); pointer-events:none;
}
.cartouche-frame .cf-outer{ stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.cartouche-frame .cf-inner{ stroke:var(--brass); stroke-width:.8; vector-effect:non-scaling-stroke; }

.cartouche-title{
    font-size:clamp(2.6rem,6.4vw,4.6rem);
    font-weight:400; letter-spacing:-.02em; line-height:1;
    margin:0 0 .35em;
}
.cartouche-title span{
    display:block; font-weight:600;
    font-variant:small-caps; letter-spacing:.02em;
}
.cartouche-sub{
    font-family:var(--serif); font-style:italic;
    font-size:clamp(1.1rem,1.8vw,1.4rem);
    color:var(--ink-70); margin:0 0 1.3em;
}
.cartouche-body{ max-width:46ch; margin:0 0 2em; }
.cartouche-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.4rem; }

.cartouche-meta{
    display:flex; flex-wrap:wrap; gap:0 2.6rem; margin:0;
    padding-top:1.4rem; border-top:1px solid var(--ink-18);
}
.cartouche-meta div{ display:flex; flex-direction:column; gap:.3em; }
.cartouche-meta dt{
    font:500 .62rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45);
}
.cartouche-meta dd{ margin:0; font-family:var(--serif); font-size:1.02rem; }

/* Kompassrose */
.rose-wrap{ display:flex; justify-content:center; }
.rose{
    width:min(100%,420px); height:auto;
    color:var(--ink-45);
    overflow:visible;
}
.rose-ring{ transform-origin:120px 120px; animation:rose-turn 180s linear infinite; }
.rose-ring line{ stroke:currentColor; stroke-width:.6; }
.rose-star path{ fill:var(--ink); opacity:.88; }
.rose-star .rose-star-alt{ fill:var(--brass); opacity:.75; }
.rose-needle{ transform-origin:120px 120px; animation:needle 9s ease-in-out infinite; }
.rose-needle path{ fill:var(--magenta); }
.rose-needle circle{ fill:var(--magenta); }
.rose-n{ font:600 13px var(--mono); fill:var(--ink); letter-spacing:.1em; }

@keyframes rose-turn{ to{ transform:rotate(360deg); } }
@keyframes needle{
    0%,100%{ transform:rotate(-4deg); }
    50%    { transform:rotate(5deg); }
}

@media (max-width:900px){
    .hero{ grid-template-columns:1fr; }
    .rose-wrap{ order:-1; }
    .rose{ width:min(62%,260px); }
}

/* ---------- 7 Bänder ------------------------------------------------ */
.band{
    position:relative;
    max-width:var(--wrap); margin:0 auto;
    padding:clamp(3.5rem,8vw,7rem) var(--pad);
}
.band-head{ max-width:60ch; margin-bottom:clamp(2.2rem,4vw,3.4rem); }

.band-dark,
.band-shoal{
    max-width:none; width:100%;
}
.band-dark{
    background:var(--ink-deep); color:var(--paper);
    padding-left:0; padding-right:0;
}
.band-shoal{
    background:linear-gradient(180deg, rgba(217,230,227,.75), rgba(217,230,227,.45));
    border-block:1px solid var(--ink-10);
    padding-left:0; padding-right:0;
}
.band-dark > *,
.band-shoal > *{
    max-width:var(--wrap); margin-inline:auto;
    padding-inline:var(--pad);
}
.band-dark::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(242,237,225,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242,237,225,.07) 1px, transparent 1px);
    background-size:200px 200px, 200px 200px;
}
.band-dark .eyebrow{ color:#E4749F; }
.band-dark .lede{ color:rgba(242,237,225,.72); }

/* ---------- 8 Leistungskarten --------------------------------------- */
.cards{
    display:grid; gap:1px;
    grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
    background:var(--ink-18);
    border:1px solid var(--ink-18);
}
.card{
    position:relative;
    background:var(--paper);
    padding:clamp(1.7rem,2.6vw,2.3rem);
    transition:background-color .35s ease, transform .35s ease;
}
.card::after{
    content:""; position:absolute; left:0; top:0; width:0; height:2px;
    background:var(--magenta); transition:width .45s ease;
}
.card:hover{ background:#F7F3EA; transform:translateY(-3px); }
.card:hover::after{ width:100%; }
.card .sym{
    width:44px; height:44px; margin-bottom:1.3rem;
    stroke:var(--ink); stroke-width:1.2; fill:none;
    stroke-linecap:round; stroke-linejoin:round;
}
.card:hover .sym{ stroke:var(--magenta); }
.card h3{ margin-bottom:.6em; }
.card p{ color:var(--ink-70); font-size:.96rem; }

.fine{
    list-style:none; margin:1.4em 0 0; padding:1.2em 0 0;
    border-top:1px solid var(--ink-10);
}
.fine li{
    position:relative; padding-left:1.5em; margin-bottom:.55em;
    font:400 .82rem/1.5 var(--mono); color:var(--ink-70);
}
.fine li::before{
    content:"·"; position:absolute; left:.35em; top:-.05em;
    color:var(--magenta); font-size:1.4em;
}

/* ---------- 9 Etappen ----------------------------------------------- */
.legs{
    list-style:none; margin:0; padding:0;
    display:grid; gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.leg{
    position:relative;
    padding:2rem 1.6rem 1.8rem;
    border:1px solid rgba(242,237,225,.20);
    background:rgba(242,237,225,.03);
    transition:border-color .35s ease, background-color .35s ease;
}
.leg:hover{ border-color:rgba(228,116,159,.55); background:rgba(242,237,225,.06); }
.leg-wp{
    display:inline-block; margin-bottom:1.1rem;
    font:600 .68rem/1 var(--mono); letter-spacing:.22em;
    color:#E4749F;
}
.leg h3{ color:var(--paper); margin-bottom:.6em; }
.leg p{ color:rgba(242,237,225,.74); font-size:.95rem; }
.leg-out{
    margin:1.2em 0 0; padding-top:1em;
    border-top:1px solid rgba(242,237,225,.18);
    font:400 .8rem/1.5 var(--mono);
    color:rgba(242,237,225,.9);
}
.leg::before{
    content:""; position:absolute; top:-5px; left:1.6rem;
    width:9px; height:9px; background:var(--ink-deep);
    border:1px solid #E4749F; transform:rotate(45deg);
}

/* ---------- 10 Der Berater ------------------------------------------ */
.about{
    display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
}
.porthole{ margin:0; text-align:center; }
.porthole img{
    width:min(100%,380px); aspect-ratio:1; object-fit:cover;
    border-radius:50%; margin:0 auto;
    border:1px solid var(--ink-18);
    box-shadow:0 0 0 10px var(--paper), 0 0 0 11px var(--brass), var(--shadow);
    background:var(--shoal);
}
.porthole figcaption{
    margin-top:2rem;
    font:400 .74rem/1.6 var(--mono); letter-spacing:.1em;
    color:var(--ink-45);
}
.about-text p{ color:var(--ink-70); max-width:56ch; }
.about-text h2{ margin-bottom:.6em; }

.facts{
    list-style:none; display:flex; flex-wrap:wrap; gap:2.4rem;
    margin:2.2rem 0 0; padding:1.6rem 0 0; border-top:1px solid var(--ink-18);
}
.facts li{
    display:flex; flex-direction:column; gap:.2em;
    font:500 .68rem/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-45); max-width:9rem;
}
.facts span{
    font-family:var(--serif); font-size:2.4rem; letter-spacing:-.02em;
    text-transform:none; color:var(--ink);
}

@media (max-width:820px){
    .about{ grid-template-columns:1fr; }
}

/* ---------- 11 Legende ---------------------------------------------- */
.legend{
    display:grid; gap:clamp(2rem,5vw,4rem);
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.legend-col h3{
    padding-bottom:.7rem; margin-bottom:1.4rem;
    border-bottom:1px solid var(--ink-18);
}
.legend-list{ list-style:none; margin:0; padding:0; }
.legend-list li{
    display:flex; align-items:baseline; gap:1.2rem;
    padding:.85em 0; border-bottom:1px dotted var(--ink-18);
    font-family:var(--serif); font-size:1.06rem;
}
.legend-list .dep{
    flex:0 0 7.4rem;
    font:400 .72rem/1.4 var(--mono); letter-spacing:.08em;
    color:var(--magenta); text-transform:uppercase;
}

/* ---------- 12 Logbuch ---------------------------------------------- */
.logs{
    display:grid; gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.log{
    margin:0; padding:1.9rem 1.7rem;
    background:rgba(242,237,225,.75);
    border-left:2px solid var(--brass);
    box-shadow:var(--shadow);
    transition:transform .35s ease, border-color .35s ease;
}
.log:hover{ transform:translateY(-3px); border-left-color:var(--magenta); }
.log-pos{
    display:flex; flex-direction:column; gap:.25em; margin:0 0 1.2em;
    font:500 .72rem/1.4 var(--mono); letter-spacing:.1em; color:var(--ink);
}
.log-pos span{ color:var(--ink-45); letter-spacing:.14em; text-transform:uppercase; font-size:.66rem; }
.log blockquote{
    margin:0; font-family:var(--serif); font-style:italic; font-size:1.06rem;
    line-height:1.6; color:var(--ink);
}
.log blockquote::before{ content:"„"; }
.log blockquote::after{ content:"“"; }
.log figcaption{
    margin-top:1.3em; padding-top:1em; border-top:1px solid var(--ink-10);
    font:400 .74rem/1.4 var(--mono); letter-spacing:.08em; color:var(--ink-45);
}

/* ---------- 13 Kontakt & Formular ----------------------------------- */
.contact{
    display:grid; gap:clamp(2rem,5vw,4rem);
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    align-items:start;
}
.contact-intro h2{ color:var(--paper); margin-bottom:.5em; }
.contact-intro p{ color:rgba(242,237,225,.74); max-width:44ch; }
.contact-direct{
    list-style:none; margin:2.4rem 0 0; padding:0;
}
.contact-direct li{
    display:flex; flex-direction:column; gap:.2em;
    padding:1.1em 0; border-top:1px solid rgba(242,237,225,.18);
    font-family:var(--serif); font-size:1.08rem; color:var(--paper);
}
.contact-direct span{
    font:500 .64rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:rgba(242,237,225,.5);
}
.contact-direct a{ text-decoration:none; border-bottom:1px solid rgba(228,116,159,.6); }
.contact-direct a:hover{ color:#E4749F; }

.form-wrap{
    background:var(--paper); color:var(--ink);
    padding:clamp(1.8rem,3.4vw,2.8rem);
    box-shadow:0 30px 60px -40px rgba(0,0,0,.8);
}
.form .row{ display:grid; gap:0 1.2rem; grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:.45em; margin:0 0 1.25rem; }
.field label,
.check label{
    font:500 .68rem/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-45);
}
.field label b{ color:var(--magenta); }
.field input,
.field select,
.field textarea{
    font-family:var(--sans); font-size:1rem; color:var(--ink);
    padding:.85em .95em;
    background:rgba(255,255,255,.55);
    border:1px solid var(--ink-18); border-radius:0;
    transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.field textarea{ resize:vertical; min-height:8rem; }
.field input:focus,
.field select:focus,
.field textarea:focus{
    outline:none; border-color:var(--magenta); background:#fff;
    box-shadow:0 0 0 3px rgba(180,24,94,.12);
}
.field input:invalid:not(:placeholder-shown){ border-color:rgba(180,24,94,.55); }

.check{ display:flex; gap:.8rem; align-items:flex-start; margin:.4rem 0 1.8rem; }
.check input{ margin-top:.35em; accent-color:var(--magenta); width:1.05em; height:1.05em; flex:none; }
.check label{
    text-transform:none; letter-spacing:.02em; font-family:var(--sans);
    font-size:.86rem; line-height:1.5; color:var(--ink-70);
}
.check label a{ color:var(--magenta); }

.fine-print{
    margin:1.1em 0 0;
    font:400 .72rem/1.5 var(--mono); color:var(--ink-45);
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.note{
    margin:0 0 1.6rem; padding:1em 1.2em;
    font-size:.92rem; border-left:3px solid var(--magenta);
    background:rgba(180,24,94,.06);
}
.note-ok{ border-left-color:#3E7A5E; background:rgba(62,122,94,.08); }

@media (max-width:820px){
    .contact{ grid-template-columns:1fr; }
    .form .row{ grid-template-columns:1fr; }
}

/* ---------- 14 Fuß --------------------------------------------------- */
.foot{
    background:var(--ink-deep); color:rgba(242,237,225,.75);
    padding:clamp(3rem,6vw,4.5rem) 0 1.6rem;
}
.foot-inner{
    max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);
    display:grid; gap:2.4rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.foot-name{ font-family:var(--serif); font-size:1.4rem; color:var(--paper); margin:0 0 .3em; }
.foot-name b{ font-weight:600; }
.foot-claim{ font-style:italic; font-family:var(--serif); margin:0; }
.foot-adr{ font-style:normal; line-height:1.9; font-size:.94rem; }
.foot-adr a{ color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(228,116,159,.5); }
.foot-nav{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.foot-nav a{
    font:500 .72rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    text-decoration:none; color:rgba(242,237,225,.75);
    border-bottom:1px solid transparent; padding-bottom:.25em;
    transition:color .25s ease, border-color .25s ease;
}
.foot-nav a:hover{ color:#E4749F; border-bottom-color:#E4749F; }

.foot-line{
    max-width:var(--wrap); margin:3rem auto 0; padding:1.4rem var(--pad) 0;
    border-top:1px solid rgba(242,237,225,.14);
    display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
    font:400 .68rem/1.6 var(--mono); letter-spacing:.12em; text-transform:uppercase;
    color:rgba(242,237,225,.45);
}

/* Rechtstexte (impressum.php / datenschutz.php) */
.legal{
    max-width:74ch; margin:0 auto; padding:clamp(3rem,7vw,6rem) var(--pad);
}
.legal h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:1em; }
.legal h2{ font-size:1.35rem; margin:2.2em 0 .6em; }
.legal p, .legal li{ color:var(--ink-70); }
.legal .back{
    display:inline-block; margin-bottom:2.5rem;
    font:500 .72rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    color:var(--magenta); text-decoration:none;
}

/* ---------- 15 Motion ------------------------------------------------ */
.reveal{
    opacity:0; transform:translateY(20px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{ opacity:1; transform:none; }
.cards .card.reveal{ transition-delay:calc(var(--i,0) * 90ms); }
.legs .leg.reveal{ transition-delay:calc(var(--i,0) * 90ms); }
.logs .log.reveal{ transition-delay:calc(var(--i,0) * 90ms); }

/* Kartusche zeichnet sich beim Laden */
.cartouche-frame rect{
    stroke-dasharray:2000; stroke-dashoffset:2000;
    animation:draw 2.2s cubic-bezier(.22,.61,.36,1) forwards;
}
.cartouche-frame .cf-inner{ animation-delay:.35s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.cartouche > *:not(.cartouche-frame){
    opacity:0; animation:rise .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.cartouche .eyebrow{ animation-delay:.25s; }
.cartouche-title{ animation-delay:.38s; }
.cartouche-sub{ animation-delay:.5s; }
.cartouche-body{ animation-delay:.6s; }
.cartouche-actions{ animation-delay:.7s; }
.cartouche-meta{ animation-delay:.82s; }
@keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    .reveal{ opacity:1; transform:none; }
    .cartouche > *{ opacity:1; }
    .cartouche-frame rect{ stroke-dashoffset:0; }
}

@media print{
    .rail,.top,.chart-ground,.rose-wrap{ display:none !important; }
    body{ padding:0; background:#fff; }
}

/* =====================================================================
   16 Blattwahl (Hub)
   ===================================================================== */
.sheets{
    display:grid; gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.sheet{
    position:relative; display:block; text-decoration:none; color:inherit;
    padding:1.9rem 1.8rem 2.2rem;
    background:var(--panel);
    border:1px solid var(--ink-18);
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.sheet::before{
    content:""; position:absolute; right:-1px; top:-1px;
    width:56px; height:56px;
    background:linear-gradient(225deg, var(--ink-10) 0 50%, transparent 50%);
    transition:width .4s ease, height .4s ease;
}
.sheet:hover{ transform:translateY(-5px); border-color:var(--magenta); box-shadow:0 26px 50px -30px rgba(11,26,40,.7); }
.sheet:hover::before{ width:76px; height:76px; }

.sheet-no{
    display:block; margin-bottom:1.2rem;
    font:600 .66rem/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
    color:var(--magenta);
}
.sheet-vis{ display:block; margin:0 0 1.4rem; }
.sheet-vis svg{ width:100%; height:auto; max-height:130px; display:block; }
.sheet-vis .sv-line{ fill:none; stroke:var(--ink-45); stroke-width:1.2; stroke-dasharray:5 4; }
.sheet-vis .sv-dim{ stroke:var(--ink-18); }
.sheet-vis .sv-ship path,
.sheet-vis .sv-yacht path{ fill:var(--ink); }
.sheet-vis .sv-dots circle{ fill:var(--magenta); }
.sheet-vis .sv-stars circle{ fill:var(--brass); }
.sheet .sv-ship,
.sheet .sv-yacht{ transform-origin:100px 70px; animation:bob 6s ease-in-out infinite; }
@keyframes bob{
    0%,100%{ transform:translateY(0) rotate(-.6deg); }
    50%    { transform:translateY(-5px) rotate(.6deg); }
}
.sheet h3{ font-size:1.55rem; margin-bottom:.5em; }
.sheet p{ color:var(--ink-70); font-size:.97rem; margin-bottom:1.2em; }
.sheet-tags{
    list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.6rem; padding:0;
}
.sheet-tags li{
    font:400 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
    padding:.55em .8em; border:1px solid var(--ink-18); color:var(--ink-45);
}
.sheet-go{
    display:inline-flex; align-items:center; gap:.6em;
    font:600 .72rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:var(--magenta);
}
.sheet-go::after{ content:"→"; transition:transform .3s ease; }
.sheet:hover .sheet-go::after{ transform:translateX(5px); }

/* Blatt 2 auf hellem Grund: dunkle Vorschau */
.sheet-deep{ background:var(--ink-deep); border-color:var(--ink-deep); color:var(--paper); }
.sheet-deep::before{ background:linear-gradient(225deg, rgba(242,237,225,.14) 0 50%, transparent 50%); }
.sheet-deep .sheet-no{ color:var(--brass); }
.sheet-deep p{ color:rgba(242,237,225,.72); }
.sheet-deep h3{ color:var(--paper); }
.sheet-deep .sheet-tags li{ border-color:rgba(242,237,225,.28); color:rgba(242,237,225,.6); }
.sheet-deep .sheet-go{ color:var(--brass); }
.sheet-deep .sv-line{ stroke:rgba(242,237,225,.35); }
.sheet-deep .sv-yacht path{ fill:var(--paper); }
.sheet-deep:hover{ border-color:var(--brass); }

/* Blattkennung im Logo */
.brand-blatt{
    display:block; font:500 .58rem/1 var(--mono); font-style:normal;
    letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45); margin-top:.35em;
}
.menu a[aria-current="page"]{ color:var(--magenta); }
.menu a[aria-current="page"]::after{ width:100%; }

/* =====================================================================
   17 Theme "Tiefwasser" – Blatt 2
   ===================================================================== */
.theme-deep{
    --paper:      #08131E;
    --paper-2:    #10222F;
    --ink:        #F0E9DA;
    --ink-deep:   #F2EDE1;
    --magenta:    #C9A96A;   /* Akzent: Messing statt Kartenmagenta */
    --brass:      #C9A96A;

    --ink-70: rgba(240,233,218,.72);
    --ink-45: rgba(240,233,218,.45);
    --ink-18: rgba(240,233,218,.18);
    --ink-10: rgba(240,233,218,.10);

    --grid-1:      rgba(240,233,218,.07);
    --grid-2:      rgba(240,233,218,.028);
    --chart-line:  rgba(201,169,106,.16);
    --chart-line-2:rgba(240,233,218,.10);
    --chart-shoal: rgba(30,72,88,.35);
    --chart-lot:   rgba(240,233,218,.20);
    --panel:       rgba(16,34,47,.72);
    --shadow: 0 1px 0 rgba(240,233,218,.06), 0 24px 60px -34px rgba(0,0,0,.9);
}
.theme-deep .chart-vignette{
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(201,169,106,.10) 0%, transparent 55%),
        radial-gradient(100% 100% at 50% 100%, transparent 45%, rgba(0,0,0,.55) 100%);
}
.theme-deep .top{
    background:rgba(8,19,30,.78);
    border-bottom-color:rgba(240,233,218,.14);
}
.theme-deep .brand-mark{ color:var(--brass); }
.theme-deep .menu .menu-cta{ background:var(--brass); color:#0B1A28; }
.theme-deep .menu .menu-cta:hover{ background:var(--paper-2); color:var(--brass); }
.theme-deep .burger span{ background:var(--ink); }
@media (max-width:880px){
    .theme-deep .menu{ background:var(--paper-2); }
}

.theme-deep .btn-primary{
    background:var(--brass); border-color:var(--brass); color:#0B1A28;
    box-shadow:0 10px 26px -16px rgba(201,169,106,.8);
}
.theme-deep .btn-ghost{ color:var(--ink); border-color:var(--ink-18); }
.theme-deep .btn-ghost:hover{ background:var(--ink); color:#0B1A28; }

.theme-deep .cartouche{
    background:linear-gradient(180deg, rgba(16,34,47,.82), rgba(8,19,30,.72));
}
.theme-deep .cartouche-frame .cf-outer{ stroke:rgba(240,233,218,.55); }
.theme-deep .cartouche-frame .cf-inner{ stroke:var(--brass); }
.theme-deep .cartouche-title{ font-weight:300; }
.theme-deep .rose{ color:rgba(240,233,218,.35); }
.theme-deep .rose-star path{ fill:rgba(240,233,218,.85); }
.theme-deep .rose-star .rose-star-alt{ fill:var(--brass); }
.theme-deep .rose-n{ fill:var(--ink); }

/* Helles Kontrastband auf dunklem Blatt */
.theme-deep .band-invert{
    max-width:none; width:100%;
    background:var(--paper-lt, #F2EDE1);
    color:#14283C;
    padding-left:0; padding-right:0;
    --ink:#14283C; --ink-70:rgba(20,40,60,.70); --ink-45:rgba(20,40,60,.45);
    --ink-18:rgba(20,40,60,.18); --ink-10:rgba(20,40,60,.10);
    --magenta:#9A7A3C;
}
.theme-deep .band-invert > *{
    max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
}

/* Tiefstes Band: Kontaktbereich */
.band-abyss{
    max-width:none; width:100%;
    background:#040C14;
    padding-left:0; padding-right:0;
}
.band-abyss > *{
    max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
}
.band-abyss::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(201,169,106,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,169,106,.05) 1px, transparent 1px);
    background-size:200px 200px, 200px 200px;
}
.theme-deep .band-abyss .contact-intro h2,
.theme-deep .band-abyss .contact-direct li{ color:var(--ink); }
.theme-deep .band-abyss .contact-direct a{ border-bottom-color:rgba(201,169,106,.6); }
.theme-deep .band-abyss .contact-direct a:hover{ color:var(--brass); }
.theme-deep .band-abyss .eyebrow{ color:var(--brass); }
.theme-deep .form-wrap{
    background:#F2EDE1; color:#14283C;
    --ink:#14283C; --ink-70:rgba(20,40,60,.70); --ink-45:rgba(20,40,60,.45);
    --ink-18:rgba(20,40,60,.18); --ink-10:rgba(20,40,60,.10);
    --magenta:#9A7A3C;
}
.theme-deep .foot{ background:#040C14; }

/* Karten und Legenden auf dunklem Grund */
.theme-deep .cards{ background:var(--ink-18); border-color:var(--ink-18); }
.theme-deep .card{ background:var(--panel); }
.theme-deep .card:hover{ background:rgba(24,48,64,.85); }
.theme-deep .card .sym{ stroke:var(--ink); }
.theme-deep .card:hover .sym{ stroke:var(--brass); }
.theme-deep .card::after{ background:var(--brass); }
.theme-deep .log{ background:var(--panel); }

/* =====================================================================
   18 Register "Häuser auf See" (nur Blatt 2)
   ===================================================================== */
.fleet{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink-18); }
.fleet-row{
    display:grid; align-items:start;
    grid-template-columns:auto minmax(190px,.9fr) minmax(0,1.5fr);
    gap:.4rem 2rem;
    padding:1.9rem 0;
    border-bottom:1px solid var(--ink-18);
    transition:background-color .4s ease;
}
.fleet-row:hover{ background:rgba(201,169,106,.05); }
.fleet-flag{
    width:12px; height:12px; margin-top:.55rem;
    border:1px solid var(--brass); transform:rotate(45deg);
    transition:background-color .4s ease;
}
.fleet-row:hover .fleet-flag{ background:var(--brass); }
.fleet-name h3{ font-size:1.45rem; font-weight:400; margin-bottom:.3em; }
.fleet-sub{
    margin:0; font:400 .7rem/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase;
    color:var(--brass);
}
.fleet-desc{ margin:0; color:var(--ink-70); }
.fleet-note{
    grid-column:3; margin:.9em 0 0; padding-top:.9em;
    border-top:1px dotted var(--ink-18);
    font:400 .82rem/1.6 var(--mono); color:var(--ink-45);
}
@media (max-width:820px){
    .fleet-row{ grid-template-columns:auto 1fr; gap:.4rem 1.2rem; }
    .fleet-desc, .fleet-note{ grid-column:2; }
}

/* Arbeitsweise / Zitatblock */
.creed{
    max-width:60ch; margin:0 auto; text-align:center;
    padding:clamp(2rem,5vw,3.5rem) clamp(1.4rem,4vw,3rem);
    border:1px solid var(--ink-18);
    background:var(--panel);
}
.creed-text{
    margin:0 0 1.4rem;
    font-family:var(--serif); font-style:italic;
    font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.45;
    color:var(--ink);
}
.creed-text::before{ content:"„"; }
.creed-text::after{ content:"“"; }
.creed-sign{
    font:500 .7rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--brass); margin:0 0 2.4rem;
}
.creed-points{
    list-style:none; margin:0; padding:1.8rem 0 0; text-align:left;
    border-top:1px solid var(--ink-18);
    display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.creed-points li{ font-size:.92rem; color:var(--ink-70); }
.creed-points span{
    display:block; margin-bottom:.35em;
    font:600 .66rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink);
}

/* =====================================================================
   19 Blatt 3 (Pauschalreisen) und Partnerzeile
   ===================================================================== */
.sheet-wide{ border-color:var(--brass); }
.sheet-wide .sheet-no,
.sheet-wide .sheet-go{ color:var(--brass); }
.sheet-wide .sv-dots circle{ fill:var(--brass); }
.sheet-wide:hover{ border-color:var(--brass); box-shadow:0 26px 50px -30px rgba(169,136,78,.75); }

.foot-partner{
    margin:0 0 .5em;
    font:500 .64rem/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--brass);
}

/* =====================================================================
   20 Weitere Bewegung
   ===================================================================== */

/* --- Parallaxe: Gitter und Tiefenlinien treiben unterschiedlich schnell */
.chart-grid{ inset:-25%; will-change:transform; }
.chart-depths{ left:-20%; top:-20%; width:140%; height:140%; will-change:transform; }

/* Lotungen blinken sehr langsam auf – wie Zahlen, die man beim Lesen findet */
.chart-depths .sounding{ animation:lot 14s ease-in-out infinite; }
@keyframes lot{
    0%,100%{ opacity:.35; }
    50%    { opacity:1; }
}

/* --- Kopfzeile wird beim Scrollen kompakter ------------------------- */
.top{ transition:padding .35s ease, background-color .35s ease, box-shadow .35s ease; }
.top.compact{
    padding-top:.5rem; padding-bottom:.5rem;
    box-shadow:0 10px 30px -26px rgba(11,26,40,.9);
}
.top.compact .brand-mark{ width:24px; height:24px; }
.top.compact .brand-text{ font-size:1rem; }
.brand-mark, .brand-text{ transition:width .35s ease, height .35s ease, font-size .35s ease; }

/* Kompassnadel folgt der Scrollrichtung */
.rose-needle{ transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.rose-needle.steer{ animation:none; }

/* --- Knöpfe: Farbe läuft von links ein ------------------------------ */
.btn{ position:relative; overflow:hidden; z-index:0; }
.btn::before{
    content:""; position:absolute; inset:0; z-index:-1;
    transform:scaleX(0); transform-origin:left;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.btn-ghost::before{ background:var(--ink); }
.btn-ghost:hover::before{ transform:scaleX(1); }
.btn-primary::before{ background:var(--ink); }
.btn-primary:hover::before{ transform:scaleX(1); }
.theme-deep .btn-primary::before{ background:var(--paper-2); }
.theme-deep .btn-primary:hover{ color:var(--brass); }

/* --- Überschriften: Hilfslinie zeichnet sich ------------------------ */
.band-head h2{ position:relative; padding-bottom:.42em; }
.band-head h2::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--magenta);
    transition:width 1.1s cubic-bezier(.22,.61,.36,1) .25s;
}
.band-head.in h2::after{ width:clamp(60px, 14vw, 140px); }

/* --- Kennzahlen: Ziffern laufen hoch -------------------------------- */
.facts span{ font-variant-numeric:tabular-nums; }
.facts li{ opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; }
.about-text.in .facts li{ opacity:1; transform:none; }
.about-text.in .facts li:nth-child(2){ transition-delay:.12s; }
.about-text.in .facts li:nth-child(3){ transition-delay:.24s; }

/* --- Register: Zeilen laufen von links ein -------------------------- */
.fleet-row.reveal{ transform:translateX(-16px); }
.fleet-row.reveal.in{ transform:none; }
.fleet-row.reveal{ transition-delay:calc(var(--i,0) * 70ms); }

/* --- Logbuch-Karten leicht gestaffelt kippen ------------------------ */
.log.reveal{ transform:translateY(20px) rotate(-.5deg); }
.log.reveal.in{ transform:none; }
.log:nth-child(even).reveal{ transform:translateY(20px) rotate(.5deg); }

/* --- Blattwechsel: kurze Überblendung ------------------------------- */
.sail{
    position:fixed; inset:0; z-index:90; pointer-events:none;
    background:var(--paper);
    opacity:0; transition:opacity .32s ease;
}
.theme-deep .sail{ background:#08131E; }
.sail.on{ opacity:1; }

/* --- Kurslinie: Wegpunkt pulst beim Erreichen ----------------------- */
@keyframes ping{
    0%  { box-shadow:0 0 0 0 rgba(180,24,94,.45); }
    100%{ box-shadow:0 0 0 14px rgba(180,24,94,0); }
}
.rail-points li.here a::before{ animation:ping 1.1s ease-out 1; }

@media (prefers-reduced-motion: reduce){
    .chart-grid, .chart-depths{ transform:none !important; }
    .rose-needle{ transition:none; }
    .sail{ display:none; }
    .facts li{ opacity:1; transform:none; }
    .band-head h2::after{ width:clamp(60px,14vw,140px); transition:none; }
    .fleet-row.reveal, .log.reveal{ transform:none; }
}

/* =====================================================================
   21 Nachjustierung der Beschriftungen
   ===================================================================== */
/* Die Kachel-Kopfzeile trägt jetzt Reedereinamen statt einer Nummer */
.sheet-no{
    font-size:.62rem; letter-spacing:.13em; line-height:1.6;
    max-width:24ch;
}
.leg-wp{ letter-spacing:.18em; }