/* Reef Guide. Magazin-Aufbau: große, vollflächige Fotos, ruhige Serifenschrift, Korallenrot für die Knöpfe. Bausteine wie bei Sacred Places, Food Tour Guide und Castle Guide. */
@font-face{font-family:Gambetta;src:url(/schriften/gambetta-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:Gambetta;src:url(/schriften/gambetta-var-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:Switzer;src:url(/schriften/switzer-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --schaum:#eef5f4; --weiss:#ffffff; --tinte:#0b2230; --leise:#4a5f69; --koralle:#ff6b4a; --koralle-tief:#f2522e; --lagune:#087a85; --nacht:#0d6f8c; --linie:rgba(11,34,48,.13);
  --schrift:Gambetta,"Iowan Old Style",Georgia,serif; --text:Switzer,"Helvetica Neue",Arial,sans-serif;
  --rand:clamp(16px,4.4vw,80px); --breite:1600px; --rund:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--schaum);color:var(--tinte);font-family:var(--text);font-size:17px;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--koralle);outline-offset:3px;border-radius:6px}
.rahmen{max-width:var(--breite);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
h1,h2,h3{font-family:var(--schrift);font-weight:400;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300}
h2{font-size:clamp(34px,4vw,66px);line-height:1.02}
.vor{font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lagune);font-weight:600;margin:0 0 14px}
.hell .vor,.dunkel .vor{color:#8fe3df}

.knopf{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--koralle);color:var(--tinte);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;transition:background .2s}
.knopf::after{content:"→";font-weight:400;transition:transform .2s}
.knopf:hover{background:var(--koralle-tief)}
.knopf:hover::after{transform:translateX(4px)}
.knopf.glas{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(6px)}
.knopf.glas:hover{background:rgba(255,255,255,.28)}
.knopf.dunkel{background:var(--lagune);color:#fff}
.knopf.dunkel:hover{background:#087883}
.knopf.klein{min-height:44px;padding:0 18px;font-size:14.5px}

/* Kopf */
.kopf{position:absolute;top:0;left:0;right:0;z-index:5;color:#fff}
.kopf .rahmen{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
.marke{font-family:var(--schrift);font-size:25px;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.marke svg{width:30px;height:30px}
.kopf nav{display:flex;gap:clamp(18px,2.4vw,38px);font-size:15.5px}
.kopf nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.kopf nav a:hover{border-bottom-color:#fff}
.kopf .rechts{display:flex;align-items:center;gap:16px;font-size:14px}
.kopf .rechts > a:first-child{text-decoration:none;opacity:.9}

/* Bühne */
.buehne{position:relative;color:#fff;isolation:isolate;overflow:hidden;background:var(--nacht)}
.buehne > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:atem 24s ease-out both}
@keyframes atem{from{transform:scale(1.07)}to{transform:scale(1)}}
.buehne::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,70,96,.38) 0,rgba(6,70,96,0) 22%),linear-gradient(80deg,rgba(6,70,96,.62) 0,rgba(6,70,96,.28) 40%,rgba(6,70,96,0) 66%)}
.buehneninhalt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;min-height:min(94vh,880px);padding-top:clamp(110px,10vw,150px);padding-bottom:clamp(36px,4.6vw,72px)}
.zeile-oben{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(6px);margin:0 0 22px}
.zeile-oben i{width:8px;height:8px;border-radius:50%;background:var(--koralle)}
h1{font-size:clamp(42px,5.2vw,92px);line-height:.98;letter-spacing:-.035em;max-width:16ch;text-shadow:0 2px 28px rgba(6,70,96,.45)}
.buehne .unter{font-size:clamp(17px,1.35vw,21px);line-height:1.5;max-width:46ch;margin:26px 0 30px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.tipp{width:min(350px,100%);background:rgba(255,255,255,.95);color:var(--tinte);border-radius:22px;padding:20px 22px 22px;text-decoration:none;display:block;transition:transform .25s}
.tipp:hover{transform:translateY(-4px)}
.tipp small{font-size:12.5px;color:var(--leise)}
.tipp b{display:block;font-family:var(--schrift);font-weight:400;font-size:25px;line-height:1.1;margin:6px 0 10px}
.tipp p{margin:0 0 14px;font-size:14.5px;line-height:1.45;color:var(--leise)}
.tipp .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--linie);padding-top:12px;font-size:14.5px}
.tipp .zeile strong{font-size:19px;white-space:nowrap}
.stern{color:var(--koralle-tief)}

/* Leiste */
.leiste{background:var(--weiss);border-bottom:1px solid var(--linie)}
.leiste ul{list-style:none;margin:0 auto;padding-top:22px;padding-bottom:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.leiste li{display:flex;align-items:baseline;gap:12px;font-size:15px;color:var(--leise);line-height:1.35}
.leiste b{font-family:var(--schrift);font-weight:400;font-size:clamp(28px,2.6vw,42px);letter-spacing:-.02em;color:var(--tinte);white-space:nowrap}

section{padding-top:clamp(64px,7.5vw,128px)}
.kopfzeile{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(26px,3vw,44px)}
.kopfzeile p{margin:0;color:var(--leise);max-width:46ch}

/* Vergleich (Kinnladen) */
.vergleich{background:var(--weiss);border-radius:var(--rund);padding:clamp(18px,2.4vw,34px);box-shadow:0 1px 0 var(--linie),0 24px 50px -36px rgba(11,34,48,.4)}
.boot{display:grid;grid-template-columns:44px minmax(0,1fr) 150px 110px auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linie)}
.boot:last-of-type{border-bottom:0}
.boot .nr{font-family:var(--schrift);font-size:26px;color:var(--lagune)}
.boot h3{font-size:clamp(19px,1.5vw,24px);line-height:1.18}
.boot .wer{margin:3px 0 0;font-size:13.5px;color:var(--leise)}
.boot .bew{font-size:14.5px;line-height:1.35}
.boot .bew .n{display:block;color:var(--leise);font-size:13px}
.boot .pr{font-family:var(--schrift);font-size:26px;white-space:nowrap}
.boot .pr small{font-family:var(--text);font-size:13px;color:var(--leise)}
.vergleich .fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;margin-top:6px;border-top:1px solid var(--linie);font-size:14.5px;color:var(--leise)}

/* Magazin-Strecken */
.strecke{position:relative;margin-top:clamp(56px,6vw,104px)}
.voll{min-height:min(96vh,940px);color:#fff;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;background:var(--nacht)}
.voll > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.voll::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,70,96,.72) 0,rgba(6,70,96,.25) 38%,rgba(6,70,96,0) 60%)}
.voll .rahmen{width:100%;padding-bottom:clamp(36px,5vw,80px)}
.voll .text{max-width:620px}
.voll p{color:#fff}
.lagune{background:linear-gradient(180deg,#cfeeec 0,#e9f7f5 100%);padding-top:clamp(64px,7vw,120px);padding-bottom:clamp(64px,7vw,120px)}
.lagune .zwei article{background:#fff;border-color:transparent}
.strecke h2{margin-bottom:18px}
.strecke p{max-width:52ch}
.fakten{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:22px 0 26px;font-size:14.5px}
.fakten li{display:flex;gap:7px;align-items:baseline}
.fakten b{font-family:var(--schrift);font-weight:400;font-size:22px}
.geteilt{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:center}
.geteilt.links{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.geteilt.links .foto{order:2}
.geteilt .foto{border-radius:var(--rund);overflow:hidden;aspect-ratio:4/5;background:var(--nacht)}
.geteilt .foto img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.unterschrift{font-size:13px;color:var(--leise);margin:10px 0 0}
.schief{transform:rotate(-2.2deg);background:#fff;padding:14px 14px 40px;border-radius:6px;box-shadow:0 30px 60px -30px rgba(11,34,48,.55)}
.schief img{aspect-ratio:4/3.2;object-fit:cover;width:100%;border-radius:2px}
.schief .unterschrift{margin:12px 2px 0}
.dunkel{background:var(--nacht);color:#fff;padding-top:clamp(64px,7vw,120px);padding-bottom:clamp(64px,7vw,120px)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.karte{position:relative;border-radius:var(--rund);overflow:hidden;min-height:clamp(520px,44vw,680px);color:#fff;text-decoration:none;display:flex;align-items:flex-end;isolation:isolate;background:var(--nacht)}
.karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.karte:hover img{transform:scale(1.05)}
.karte::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,70,96,.78) 0,rgba(6,70,96,.25) 46%,rgba(6,70,96,0) 66%)}
.karte .innen{padding:26px}
.karte small{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8fe3df;font-weight:600}
.karte h3{font-size:clamp(26px,2.2vw,36px);line-height:1.06;margin:8px 0 10px}
.karte p{margin:0 0 14px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.9)}
.karte .mehr{font-weight:600;font-size:15px}

/* Versprechen */
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.drei article{background:var(--weiss);border-radius:var(--rund);padding:28px}
.drei article.an{background:var(--koralle)}
.drei .z{font-family:var(--schrift);font-size:44px;line-height:1;color:var(--lagune)}
.drei .an .z{color:var(--tinte)}
.drei h3{font-size:26px;margin:18px 0 8px}
.drei p{margin:0;color:var(--leise)}
.drei .an p{color:var(--tinte)}

/* Riffseiten */
.liste{list-style:none;padding:0;margin:20px 0 0}
.liste li{padding:10px 0 10px 26px;border-top:1px solid var(--linie);position:relative;color:var(--leise)}
.liste li::before{content:"";position:absolute;left:4px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--lagune)}
.typen{grid-template-columns:repeat(4,minmax(0,1fr))}
.typen a{color:var(--tinte)}
@media (max-width:1100px){.typen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.typen{grid-template-columns:1fr}}

/* Monate */
.monate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.monat{background:var(--weiss);border-radius:14px;padding:12px 8px;text-align:center;font-size:13.5px;line-height:1.3}
.monat b{display:block;font-family:var(--schrift);font-weight:400;font-size:24px;margin:4px 0 2px}
.monat span{color:var(--leise)}
.monat.spitze{background:var(--lagune);color:#fff}
.monat.spitze span{color:#e3fbf8}
.legende{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--leise)}
.legende i{display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--lagune);margin-right:7px;vertical-align:-1px}

/* Schritte */
.schritte{list-style:none;padding:0;margin:26px 0 0;counter-reset:s}
.schritte li{counter-increment:s;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--linie)}
.schritte li::before{content:counter(s,decimal-leading-zero);font-family:var(--schrift);font-size:28px;color:var(--lagune);line-height:1.1}
.schritte b{display:block;font-size:17.5px}
.schritte span{color:var(--leise)}

/* Zwei Wege */
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.zwei article{border:1px solid var(--linie);border-radius:var(--rund);padding:30px}
.zwei h3{font-size:30px;margin:0 0 10px}
.zwei p{margin:0}

/* Fragen */
.fragen{max-width:900px}
.fragen details{border-top:1px solid var(--linie);padding:20px 0}
.fragen summary{font-family:var(--schrift);font-size:clamp(21px,1.7vw,26px);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";color:var(--lagune)}
.fragen details[open] summary::after{content:"–"}
.fragen p{margin:12px 0 0;color:var(--leise);max-width:62ch}

/* Fuß */
footer{margin-top:clamp(72px,8vw,140px);background:linear-gradient(160deg,#0f86a0,#0c6f86);color:#fff;padding:56px 0 40px;font-size:14.5px}
footer .rahmen{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:40px}
footer p{margin:0 0 10px;max-width:60ch}
footer a{color:#fff}

@media (max-width:1100px){
  .kopf nav{display:none}
  .buehneninhalt{grid-template-columns:1fr}
  .leiste ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .boot{grid-template-columns:36px minmax(0,1fr) 120px auto}
  .boot .bew{display:none}
  .monate{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .kopf .rechts .knopf{display:none}
  .kopfzeile,.geteilt,.geteilt.links,.trio,.drei,.zwei,footer .rahmen{grid-template-columns:1fr}
  .geteilt.links .foto{order:0}
  .geteilt .foto{aspect-ratio:4/4.4}
  .leiste ul{grid-template-columns:1fr;gap:12px}
  .boot{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:18px 0}
  .boot .nr{display:none}
  .boot .pr{grid-row:1;grid-column:2;font-size:22px}
  .boot .knopf{grid-column:1 / -1;justify-content:center}
  .monate{grid-template-columns:repeat(4,minmax(0,1fr))}
  .voll{min-height:86vh}
  .karte{min-height:480px}
  .schief{transform:rotate(-1.4deg)}
}

/* Menü */
.kopf nav{align-items:center}
.drop{position:relative}
.drop summary,.handy summary{list-style:none;cursor:pointer;padding:6px 0}
.drop summary::-webkit-details-marker,.handy summary::-webkit-details-marker{display:none}
.drop summary::after{content:"▾";margin-left:6px;font-size:12px}
.menue{position:absolute;top:calc(100% + 12px);left:-20px;z-index:20;background:#fff;color:var(--tinte);border-radius:20px;padding:22px 24px;display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:18px 30px;box-shadow:0 24px 60px -20px rgba(11,34,48,.45);min-width:440px}
.menue .gruppe{display:flex;flex-direction:column;gap:6px}
.menue b{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lagune)}
.menue a{text-decoration:none;font-size:15.5px;border:0!important;padding:2px 0}
.menue a:hover{color:var(--lagune)}
.menue .alle{grid-column:1/-1;border-top:1px solid var(--linie)!important;padding-top:12px;font-weight:600}
.handy{display:none;position:relative}
.handy summary{border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 18px;font-weight:600;backdrop-filter:blur(6px);background:rgba(255,255,255,.14)}
.handy .menue{left:auto;right:0;min-width:0;width:min(340px,calc(100vw - 32px));grid-template-columns:1fr}
@media (max-width:1100px){.handy{display:block}}

/* Brotkrumen, Kurzantwort, Empfehlungen */
.krume{font-size:13.5px;margin:0 0 14px;color:rgba(255,255,255,.92)}
.krume a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.textseite .krume{color:var(--leise)}
.textseite .krume a{border-color:var(--linie)}
.kurzbox{padding-top:clamp(40px,4vw,64px)}
.kurz{background:#fff;border-left:5px solid var(--lagune);border-radius:var(--rund);padding:clamp(22px,2.6vw,36px);max-width:1000px;box-shadow:0 1px 0 var(--linie)}
.kurz p{margin:0 0 12px;font-size:clamp(17px,1.3vw,19.5px);line-height:1.6}
.kurz .vor{font-size:12.5px;margin-bottom:12px}
.kurz .mehrlink{font-size:15px;margin:0;color:var(--leise)}
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pick{background:#fff;border-radius:var(--rund);padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 var(--linie),0 18px 40px -30px rgba(11,34,48,.4)}
.pick .vor{margin:0}
.pick h3{font-size:clamp(20px,1.5vw,24px);line-height:1.2}
.pick p{margin:0;color:var(--leise);font-size:15px}
.pick .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--linie);font-size:14px}
.pick .zeile .n{display:inline;margin-left:4px;color:var(--leise)}
.pick .pr{font-family:var(--schrift);font-size:22px;white-space:nowrap}
.pick .knopf{align-self:flex-start;margin-top:auto}
.zwei-sp{columns:2;column-gap:48px}
.zwei-sp li{break-inside:avoid}

/* Tabelle */
.tabelle{width:100%;border-collapse:collapse;font-size:15px}
.tabelle th{text-align:left;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);font-weight:600;padding:0 12px 12px;border-bottom:1px solid var(--linie)}
.tabelle td{padding:14px 12px;border-bottom:1px solid var(--linie);vertical-align:middle}
.tabelle tr:last-child td{border-bottom:0}
.tabelle .tn b{display:block;font-family:var(--schrift);font-weight:400;font-size:clamp(17px,1.25vw,20px);line-height:1.25}
.tabelle .tn span{font-size:13px;color:var(--leise)}
.tabelle .tn a{text-decoration:none}
.tabelle .pr{font-family:var(--schrift);font-size:22px;white-space:nowrap}
.tabelle .n{display:block;font-size:13px;color:var(--leise)}
.tabelle .klein{font-size:14px;color:var(--leise)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Textseiten */
.textseite{padding-top:130px;background:var(--schaum)}
.textseite .kopf{position:absolute}
.schmal{max-width:860px}
.textseite h1{font-size:clamp(40px,4.4vw,64px);text-shadow:none;max-width:none}
.textseite h2{font-size:clamp(26px,2.2vw,34px);margin:40px 0 12px}
.textseite h3{font-size:22px;margin:24px 0 8px}
.textseite .stand{color:var(--leise);font-size:14px}
.textseite ul{padding-left:20px}
.textseite li{margin:4px 0;word-break:break-word}
body:has(.textseite) .kopf{color:var(--tinte)}
body:has(.textseite) .handy summary{border-color:var(--linie)}

@media (max-width:1100px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .picks{grid-template-columns:1fr}
  .zwei-sp{columns:1}
  .tabelle thead{display:none}
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle td{display:block;width:100%}
  .tabelle tr{padding:16px 0;border-bottom:1px solid var(--linie)}
  .tabelle td{border:0;padding:4px 0}
  .tabelle td[data-l]{display:flex;justify-content:space-between;gap:12px}
  .tabelle td[data-l]::before{content:attr(data-l);color:var(--leise);font-size:13.5px}
  .tabelle td[data-l] .n{display:inline;margin-left:6px}
  .tabelle td .knopf{width:100%;justify-content:center;margin-top:8px}
  .menue{grid-template-columns:1fr}
}

.byline{font-size:14px;margin:14px 0 0;color:rgba(255,255,255,.92)}
.byline a{color:#fff}
.pick .eckdaten{color:var(--tinte);font-weight:600;font-size:14px}

.menue.einspaltig{grid-template-columns:1fr;min-width:250px;gap:4px;padding:16px 22px}
.menue.einspaltig a{font-size:16px;padding:5px 0}

/* Zeichen: Schildkröte als Maske, nimmt die Textfarbe an */
.marke .zeichen{display:inline-block;width:40px;height:40px;flex:none;background:currentColor;-webkit-mask:url(/zeichen.svg) center/contain no-repeat;mask:url(/zeichen.svg) center/contain no-repeat}
.marke{gap:10px}
footer .marke .zeichen{width:44px;height:44px}