/* MeerHeimatLiebe 2.5.2-r7 – finale responsive Oberfläche */
:root {
--header-offset: 108px;
--r7-sky: #8be4ef;
--r7-sea: #27aeca;
--r7-sea-deep: #073850;
--r7-sun: #ffd98a;
--r7-sand: #d0af78;
--r7-card: rgba(7, 49, 68, .78);
--r7-card-strong: rgba(3, 31, 47, .91);
--r7-line: rgba(153, 231, 240, .36);
--r7-shadow: 0 18px 58px rgba(0, 17, 29, .30);
}
html[data-font-size="auto"] { font-size: clamp(15px, calc(14px + .15vw), 17px) !important; }
html[data-font-size="small"] { font-size: clamp(13px, calc(12.4px + .12vw), 15px) !important; }
html[data-font-size="normal"] { font-size: clamp(15px, calc(14px + .17vw), 17.5px) !important; }
html[data-font-size="large"] { font-size: clamp(17.5px, calc(16px + .20vw), 20px) !important; }
html {
scroll-padding-top: calc(var(--header-offset) + 1rem) !important;
background: #072538 !important;
}
body {
padding-top: calc(var(--header-offset) + .35rem) !important;
color: #f5fbfd;
background:
radial-gradient(circle at 82% 0%, rgba(255, 218, 143, .12), transparent 24rem),
linear-gradient(180deg, #09344b, #06283b 55%, #041c2b) !important;
font-size: 1rem !important;
font-weight: 400 !important;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
button, input, textarea, select { font: inherit; }
/* Helle, ruhige Grundstimmung */
.site-vignette {
background:
linear-gradient(90deg, rgba(2, 24, 37, .26), rgba(4, 36, 50, .02) 48%, rgba(2, 24, 37, .18)),
linear-gradient(180deg, rgba(255, 219, 145, .06), transparent 34%, rgba(1, 16, 27, .48)) !important;
}
.glass-frame,
.glass-card,
.panel,
.legal-card,
.article-card,
.forum-category,
.top-panel {
border-color: var(--r7-line) !important;
background: linear-gradient(150deg, rgba(11, 69, 91, .76), rgba(4, 34, 51, .86)) !important;
box-shadow: var(--r7-shadow), inset 0 0 0 1px rgba(255,255,255,.035) !important;
backdrop-filter: blur(10px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}
html[data-contrast="soft"] .glass-frame,
html[data-contrast="soft"] .glass-card,
html[data-contrast="soft"] .panel { background: linear-gradient(150deg, rgba(15, 77, 98, .66), rgba(8, 45, 62, .75)) !important; }
html[data-contrast="high"] .glass-frame,
html[data-contrast="high"] .glass-card,
html[data-contrast="high"] .panel { background: linear-gradient(150deg, rgba(2, 41, 59, .94), rgba(1, 20, 34, .96)) !important; }
html[data-contrast="high"] body { font-weight: 400 !important; }
/* Hochwertige, viewportgenaue Szenen */
.site-backdrop {
position: fixed !important;
inset: 0 !important;
z-index: 0 !important;
width: 100vw !important;
height: 100dvh !important;
min-height: 100vh !important;
background-image: var(--scene-desktop) !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-attachment: scroll !important;
transform: none !important;
filter: saturate(1.10) contrast(1.015) brightness(1.035) !important;
image-rendering: auto;
will-change: auto !important;
}
.scene-sh { --scene-desktop:url('../backgrounds/sh-desktop.webp'); }
.scene-stories { --scene-desktop:url('../backgrounds/stories-desktop.webp'); }
.scene-tides { --scene-desktop:url('../backgrounds/tides-desktop.webp'); }
.site-vignette { z-index: 1 !important; }
.site-tide-overlay { z-index: 2 !important; }
.site-header, .site-main, .site-footer, .top-panel, .back-to-top { z-index: 5 !important; }
/* Header bleibt immer oben; die gemessene Höhe reserviert den Platz. */
.site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 500 !important;
padding: .55rem 0 .35rem !important;
background: linear-gradient(180deg, rgba(3, 34, 51, .98), rgba(4, 35, 51, .90) 78%, rgba(4, 35, 51, .05)) !important;
isolation: isolate;
}
.header-inner {
min-height: 76px !important;
gap: clamp(.38rem, .7vw, .85rem) !important;
padding: .58rem .8rem !important;
overflow: visible !important;
position: relative;
}
.brand { min-width: 0 !important; flex: 0 1 auto; gap: .68rem !important; }
.brand-mark { width: 46px !important; height: 46px !important; }
.brand-copy { min-width: 0; }
.brand-copy strong {
font-size: clamp(1.18rem, 1.02rem + .50vw, 1.66rem) !important;
line-height: 1.02;
white-space: nowrap;
}
.brand-copy small {
display: flex !important;
align-items: center;
gap: .38rem;
margin-top: .28rem !important;
font-size: clamp(.52rem, .47rem + .12vw, .66rem) !important;
letter-spacing: .10em !important;
white-space: nowrap;
}
.site-nav {
min-width: 0;
margin-left: auto !important;
gap: .14rem !important;
overflow: visible !important;
}
.site-nav > a,
.site-nav > .nav-dropdown > button,
.nav-form button {
min-height: 42px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: .42rem;
padding: .56rem clamp(.45rem, .3rem + .22vw, .72rem) !important;
border: 0;
border-radius: 10px;
color: #eef9fb;
background: transparent;
font-size: clamp(.72rem, .67rem + .10vw, .83rem) !important;
font-weight: 760 !important;
line-height: 1.15;
white-space: nowrap;
transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.site-nav > a:hover,
.site-nav > a:focus-visible,
.site-nav > .nav-dropdown > button:hover,
.site-nav > .nav-dropdown > button:focus-visible,
.nav-dropdown.open > button,
.nav-form button:hover,
.nav-form button:focus-visible {
color: white !important;
background: linear-gradient(145deg, rgba(31, 143, 166, .38), rgba(8, 66, 88, .48)) !important;
box-shadow: inset 0 0 0 1px rgba(159, 234, 242, .20);
transform: translateY(-1px);
}
.site-nav a.active,
.nav-dropdown__toggle.active { color: #b9f5fb !important; box-shadow: inset 0 -2px 0 var(--cyan-400); }
.nav-separator { margin-inline: .24rem !important; }
.nav-search { width: 40px !important; padding-inline: 0 !important; }
.nav-account { padding-inline: .58rem !important; }
.site-nav .nav-join, .site-nav .nav-admin { margin-left: .18rem !important; }
.header-tools { display: flex; gap: .28rem; flex: 0 0 auto; }
.header-tool {
min-height: 42px !important;
padding: .48rem .68rem !important;
border-radius: 11px !important;
font-size: .75rem !important;
}
.header-tool span { font-size: .68rem !important; }
/* Verschachtelte Dropdown-Navigation */
.nav-dropdown { position: relative; }
.nav-dropdown__toggle { cursor: pointer; }
.nav-dropdown__toggle .icon-chevron-down { transition: transform .18s ease; }
.nav-dropdown.open .nav-dropdown__toggle .icon-chevron-down { transform: rotate(180deg); }
.nav-dropdown__menu {
position: absolute;
top: calc(100% + .55rem);
left: 50%;
z-index: 520;
width: max-content;
min-width: 238px;
max-width: min(340px, 92vw);
display: grid;
gap: .22rem;
padding: .65rem;
border: 1px solid var(--r7-line);
border-radius: 16px;
background: rgba(3, 34, 51, .98);
box-shadow: 0 22px 70px rgba(0, 0, 0, .42), 0 0 30px rgba(64, 200, 220, .10);
transform: translate(-50%, 8px) scale(.98);
transform-origin: top center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-dropdown.open .nav-dropdown__menu {
transform: translate(-50%, 0) scale(1);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav-dropdown__label {
margin: .15rem .45rem .3rem;
color: #7fe4ef;
font-size: .64rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.nav-dropdown__menu a {
display: flex;
align-items: center;
gap: .55rem;
min-height: 43px;
padding: .58rem .68rem;
border-radius: 10px;
color: #eaf7fa;
font-size: .84rem;
font-weight: 700;
white-space: normal;
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible,
.nav-dropdown__menu a.active { color: white; background: rgba(29, 130, 153, .34); }
/* Panels bleiben fixiert und scrollen nicht mit dem Inhalt. */
.top-panel {
position: fixed !important;
top: calc(var(--header-offset) + .65rem) !important;
right: max(.8rem, env(safe-area-inset-right)) !important;
bottom: auto !important;
z-index: 560 !important;
width: min(350px, calc(100vw - 1.6rem)) !important;
max-height: calc(100dvh - var(--header-offset) - 1.3rem) !important;
overflow: auto;
padding: .9rem !important;
border-radius: 18px !important;
}
.service-panel { right: min(7.2rem, 8vw) !important; }
.top-panel__head { margin-bottom: .7rem !important; }
.display-panel fieldset { margin-top: .75rem !important; }
.font-size-control,
.contrast-control {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: .48rem !important;
}
.font-size-control button,
.contrast-control button {
min-height: 62px !important;
display: grid !important;
place-items: center;
align-content: center;
gap: .22rem;
border: 1px solid rgba(159, 231, 239, .42) !important;
border-radius: 11px !important;
color: #edf9fb !important;
background: rgba(2, 31, 47, .62) !important;
font-weight: 650 !important;
}
.contrast-control button { min-height: 48px !important; display: flex !important; }
.font-size-control button.active,
.contrast-control button.active {
border-color: #8cecf4 !important;
background: linear-gradient(145deg, rgba(22, 136, 159, .68), rgba(5, 62, 82, .80)) !important;
box-shadow: 0 0 22px rgba(72, 210, 226, .15);
}
.font-size-preview { color: #baf7fb; font-size: 1.08rem; font-weight: 850; line-height: 1; }
.font-size-preview--small { font-size: .9rem; }
.font-size-preview--normal { font-size: 1.12rem; }
.font-size-preview--large { font-size: 1.42rem; }
.display-status {
display: block;
margin-top: .55rem;
color: #afd6df;
font-size: .72rem;
text-align: center;
}
.display-reset { width: 100%; margin-top: .8rem; }
/* Typografie skaliert mit der Auswahl und bleibt kontrolliert. */
.hero h1,
.page-header h1,
.page-hero h1,
.article h1,
.goodbye-card h1 {
font-size: clamp(2.05rem, 1.55rem + 2.7vw, 4.2rem) !important;
line-height: 1.01 !important;
overflow-wrap: normal !important;
word-break: normal !important;
text-wrap: balance;
}
.hero p,
.page-header p,
.page-hero p,
.lead {
font-size: clamp(.98rem, .92rem + .25vw, 1.18rem) !important;
line-height: 1.62 !important;
}
h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.site-main {
position: relative !important;
z-index: 5 !important;
width: min(calc(100% - 2rem), var(--shell)) !important;
min-height: calc(100dvh - var(--header-offset)) !important;
padding-top: clamp(.85rem, 1.5vw, 1.6rem) !important;
padding-bottom: 5rem !important;
}
.site-main [id] { scroll-margin-top: calc(var(--header-offset) + 1rem) !important; }
.page-header {
min-height: clamp(220px, 31vh, 350px) !important;
padding: clamp(1rem, 2.4vw, 2.2rem) .4rem 1.4rem !important;
}
.scene-contact .page-header { min-height: clamp(205px, 27vh, 300px) !important; }
.scene-home .hero {
min-height: clamp(400px, 54vh, 590px) !important;
grid-template-columns: minmax(0, 1fr) !important;
padding: clamp(2rem, 5vh, 4rem) .6rem 2.5rem !important;
}
.scene-home .hero__content { max-width: 790px !important; }
.scene-home .hero__panel { display: none !important; }
.scene-home .stats-strip { display: none !important; }
/* Startseite: fünf kompakte, echte Linkmodule. */
.home-hub {
display: grid;
gap: .9rem;
margin-top: 1.2rem;
}
.home-hub__intro {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1.2rem;
padding-inline: .25rem;
}
.home-hub__intro h2 { margin: .15rem 0 0; font-size: clamp(1.55rem, 1.25rem + 1vw, 2.25rem); }
.home-hub__intro > p { max-width: 52ch; margin: 0; color: #cae1e7; }
.home-jump-tabs {
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding: .58rem;
border: 1px solid var(--r7-line);
border-radius: 16px;
background: rgba(5, 48, 67, .72);
box-shadow: var(--r7-shadow);
}
.home-jump-tabs a {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .42rem;
padding: .55rem .78rem;
border: 1px solid rgba(152, 229, 238, .25);
border-radius: 999px;
color: #eff9fb;
background: rgba(4, 33, 49, .56);
font-size: .82rem;
font-weight: 720;
transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.home-jump-tabs a:hover,
.home-jump-tabs a:focus-visible { transform: translateY(-2px); background: rgba(24, 132, 155, .34); border-color: rgba(157, 236, 244, .48); }
.home-module-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .75rem;
}
.home-module {
min-width: 0;
min-height: 255px;
display: flex;
flex-direction: column;
padding: 1rem;
border-radius: 18px;
overflow: hidden;
}
.home-module__head { display: flex; align-items: center; gap: .48rem; }
.home-module__head .icon { color: #8cebf3; }
.home-module h3 { margin: 0; font-size: 1.05rem; }
.home-module p { margin: .75rem 0; color: #d4e8ed; font-size: .88rem; line-height: 1.56; }
.home-module--image { padding: 0; }
.home-module--image > img {
width: 100%;
height: 128px;
object-fit: cover;
object-position: center;
}
.home-module__body { display: flex; flex: 1; flex-direction: column; padding: .9rem 1rem 1rem; }
.module-link {
display: inline-flex;
align-items: center;
gap: .3rem;
margin-top: auto;
color: #a9f2f8;
font-size: .82rem;
font-weight: 800;
}
.crew-placeholders { display: flex; flex-wrap: wrap; gap: .34rem; margin: .5rem 0 .75rem; }
.crew-placeholders span {
width: 34px !important;
height: 34px !important;
display: grid;
place-items: center;
border: 1px solid rgba(153, 231, 240, .42);
border-radius: 50%;
color: #e8f7f9;
background: rgba(4, 38, 56, .70);
font-size: .82rem;
font-weight: 850;
}
.crew-placeholders .crew-more { color: #ffd98a; }
.home-tide-state { display: block; margin-top: .7rem; color: #fff; font-size: 1.22rem; }
.home-tide-summary { display: block; margin-top: .2rem; color: #bddbe2; font-size: .75rem; line-height: 1.45; }
.home-tide-values { display: grid; gap: .5rem; margin: .8rem 0; }
.home-tide-values div { display: flex; justify-content: space-between; gap: .7rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(151, 228, 237, .18); }
.home-tide-values dt { color: #bcd8df; font-size: .72rem; }
.home-tide-values dd { margin: 0; color: #fff; font-size: .74rem; font-weight: 800; text-align: right; }
/* Logbuch bleibt kurz; lange Texte liegen auf eigener Seite. */
.logbook-teaser { display: grid; gap: 1rem; margin-top: 1.2rem; padding: 1.15rem; }
.logbook-teaser h2 { margin: .15rem 0 .45rem; font-size: clamp(1.45rem, 1.2rem + .8vw, 2.1rem); }
.logbook-teaser__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.logbook-teaser__cards article { padding: .9rem; border: 1px solid rgba(154, 229, 238, .22); border-radius: 14px; background: rgba(3, 35, 51, .42); }
.logbook-teaser__cards h3 { margin: 0 0 .35rem; font-size: 1rem; }
.logbook-teaser__cards p { margin: 0; color: #cce2e7; font-size: .86rem; }
.logbook-teaser > .btn { justify-self: start; }
/* Artikel- und Geschichtsseiten */
.editorial-page,
.story-page { display: grid; gap: 1rem; }
.editorial-lead {
display: grid;
grid-template-columns: minmax(260px, .95fr) minmax(0, 1.2fr);
gap: 1rem;
align-items: stretch;
padding: 1rem;
}
.editorial-lead img,
.story-feature img {
width: 100%;
height: 100%;
min-height: 290px;
object-fit: cover;
border-radius: 17px;
}
.editorial-copy { padding: .4rem .35rem; }
.editorial-copy h2 { margin: .2rem 0 .75rem; font-size: clamp(1.55rem, 1.25rem + 1vw, 2.35rem); }
.editorial-copy p { color: #d7e9ed; }
.editorial-grid,
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.editorial-card,
.story-card { padding: 1.05rem; }
.editorial-card h2,
.story-card h2 { margin: .15rem 0 .55rem; font-size: 1.25rem; }
.editorial-card p,
.story-card p { color: #d3e6ea; }
.editorial-card figure { margin: .85rem 0 0; }
.editorial-card img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; }
.editorial-card figcaption { margin-top: .35rem; color: #a9cbd3; font-size: .72rem; }
.editorial-details { padding: 1rem; }
.editorial-details details { border-top: 1px solid rgba(152, 229, 238, .20); }
.editorial-details details:first-child { border-top: 0; }
.editorial-details summary { cursor: pointer; padding: .9rem .15rem; color: #eaf8fa; font-weight: 800; }
.editorial-details details p { padding: 0 .15rem .8rem; color: #d2e5e9; }
.story-feature { display: grid; grid-template-columns: minmax(260px, .9fr) 1.1fr; gap: 1rem; padding: 1rem; }
.story-feature__copy { padding: .4rem; }
.story-feature__copy h2 { margin: .2rem 0 .65rem; }
.story-card .story-kicker { color: #8ae8f2; font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
/* Tidenplaner */
.tide-board--page,
.tide-explainer { padding: clamp(1rem, 2vw, 1.45rem) !important; }
.tide-board__head,
.tide-board__grid { gap: .8rem !important; }
.tide-table-wrap { border-color: rgba(152, 229, 238, .30) !important; }
.tide-table { background: rgba(3, 38, 54, .66) !important; }
.tide-warning { font-size: .85rem; }
/* Strand im Footer; keine Meeresfläche und keine Wellen. */
.site-footer {
position: relative !important;
z-index: 5 !important;
min-height: 228px !important;
margin-top: 2.2rem !important;
padding: 9.2rem 1rem 1.15rem !important;
overflow: hidden;
background: linear-gradient(180deg, transparent 0, rgba(5, 29, 41, .12) 52%, rgba(3, 23, 34, .98) 74%) !important;
}
.shoreline { position: absolute !important; inset: 0 0 auto !important; height: 154px !important; overflow: hidden; }
.shoreline-wave,
.wave-far,
.wave-near { display: none !important; }
.foam-belt {
position: absolute !important;
left: -4% !important;
right: -4% !important;
top: 45px !important;
height: 10px !important;
opacity: .70 !important;
animation: none !important;
background: repeating-radial-gradient(ellipse at 50% 100%, rgba(250,253,252,.82) 0 2px, rgba(215,235,231,.48) 3px 5px, transparent 7px 20px) !important;
}
.wet-sand {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 53px !important;
height: 42px !important;
background: linear-gradient(180deg, #a78b62, #b69a6c) !important;
clip-path: polygon(0 27%, 9% 15%, 18% 28%, 29% 13%, 40% 27%, 52% 12%, 64% 28%, 76% 14%, 88% 27%, 100% 15%, 100% 100%, 0 100%) !important;
}
.dry-sand {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 90px !important;
height: 78px !important;
background:
radial-gradient(circle at 18% 42%, rgba(255,241,207,.28) 0 2px, transparent 3px),
radial-gradient(circle at 76% 48%, rgba(95,67,37,.22) 0 2px, transparent 3px),
linear-gradient(180deg, #d0af78, #bc9763) !important;
background-size: 52px 42px, 67px 54px, auto !important;
}
.shore-starfish { top: 100px !important; color: rgba(197, 112, 84, .80) !important; }
.shore-boat { top: 94px !important; color: rgba(100, 70, 38, .78) !important; }
.shore-anchor { top: 96px !important; color: rgba(92, 74, 47, .74) !important; }
.footer-inner {
position: relative !important;
z-index: 4 !important;
min-height: 62px;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
gap: .8rem !important;
margin-top: .75rem !important;
text-align: center;
}
.copyright { max-width: min(92vw, 760px); font-size: clamp(.68rem, .63rem + .12vw, .82rem) !important; line-height: 1.35; }
.footer-social { color: #91e9f1 !important; }
/* Fester, dezenter Tidenstand hinter dem Inhalt. */
.site-tide-overlay {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 26vh !important;
min-height: 150px;
pointer-events: none;
opacity: .08;
transform: translateY(72%);
transition: transform 1.6s ease, opacity 1.2s ease;
background: linear-gradient(180deg, transparent, rgba(92, 197, 215, .05) 46%, rgba(45, 139, 164, .17));
overflow: hidden;
}
.site-tide-overlay::before {
content: "";
position: absolute;
left: -6%;
right: -6%;
top: 0;
height: 28px;
opacity: .6;
background: repeating-radial-gradient(ellipse at 50% 100%, rgba(209, 249, 251, .48) 0 2px, rgba(125, 219, 231, .22) 4px 7px, transparent 9px 24px);
animation: r7TideDrift 9s ease-in-out infinite alternate;
}
body.tide-high .site-tide-overlay,
body.tide-flooding .site-tide-overlay { transform: translateY(18%); opacity: .13; }
body.tide-low .site-tide-overlay,
body.tide-ebbing .site-tide-overlay { transform: translateY(78%); opacity: .055; }
@keyframes r7TideDrift { from { transform: translateX(-1.8%); } to { transform: translateX(1.8%); } }
/* Preloader: abwechselnd, farbenfroh, schnell. */
.mhl-preloader {
background-image: linear-gradient(rgba(5, 36, 52, .22), rgba(4, 26, 40, .60)), url('../backgrounds/preloader-desktop.webp') !important;
background-position: center !important;
background-size: cover !important;
transition: opacity .32s ease, visibility .32s ease !important;
}
.mhl-preloader::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 82% 16%, rgba(255, 215, 126, .27), transparent 17%),
radial-gradient(circle at 14% 25%, rgba(111, 224, 236, .19), transparent 20%),
radial-gradient(circle at 68% 82%, rgba(255, 169, 126, .10), transparent 22%);
}
.mhl-preloader__glass {
width: min(90vw, 560px) !important;
min-width: 0 !important;
padding: clamp(1.45rem, 3.5vw, 2.35rem) !important;
border-radius: 26px !important;
background: linear-gradient(145deg, rgba(13, 81, 105, .70), rgba(3, 35, 52, .84)) !important;
box-shadow: 0 26px 90px rgba(0,0,0,.42), 0 0 42px rgba(82,210,228,.18) !important;
backdrop-filter: blur(11px) saturate(1.1) !important;
}
.preloader-symbol-stage { position: relative; width: 108px !important; height: 92px !important; margin: .35rem auto .45rem !important; }
.preloader-symbol-stage span {
position: absolute;
inset: 0;
display: grid;
place-items: center;
opacity: 0;
filter: drop-shadow(0 0 18px currentColor);
animation: r7PreloaderSymbol 5.4s infinite;
}
.preloader-symbol-stage span:nth-child(2) { animation-delay: .9s; }
.preloader-symbol-stage span:nth-child(3) { animation-delay: 1.8s; }
.preloader-symbol-stage span:nth-child(4) { animation-delay: 2.7s; }
.preloader-symbol-stage span:nth-child(5) { animation-delay: 3.6s; }
.preloader-symbol-stage span:nth-child(6) { animation-delay: 4.5s; }
.preloader-tone-sun { color: #ffe59c; }
.preloader-tone-cyan { color: #8deaf3; }
.preloader-tone-sea { color: #75d8ef; }
.preloader-tone-warm { color: #ffb39d; }
.preloader-tone-gold { color: #f6cd7d; }
.preloader-tone-sky { color: #eefcff; }
@keyframes r7PreloaderSymbol {
0% { opacity: 0; transform: translateY(11px) scale(.78) rotate(-8deg); }
7%, 16% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
24%, 100% { opacity: 0; transform: translateY(-10px) scale(.88) rotate(7deg); }
}
.preloader-sun { top: .9rem !important; right: 1.1rem !important; width: 76px !important; height: 76px !important; opacity: .90 !important; }
.preloader-progress { height: 10px !important; }
/* Browser- und Orientierungsprofile */
body.ua-firefox .glass-frame,
body.ua-firefox .glass-card,
body.ua-firefox .top-panel { backdrop-filter: none !important; background: rgba(5, 48, 67, .93) !important; }
body.ua-safari .glass-frame,
body.ua-safari .glass-card,
body.ua-safari .top-panel { -webkit-backdrop-filter: blur(8px) saturate(1.04) !important; }
@media (hover:hover) and (pointer:fine) and (min-width:1321px) {
.nav-dropdown:hover .nav-dropdown__menu { transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
.preloader-symbol-stage span,
.site-tide-overlay::before,
.site-nav a,
.nav-dropdown__menu,
.home-jump-tabs a { animation: none !important; transition: none !important; }
.preloader-symbol-stage span:first-child { opacity: 1 !important; }
.site-tide-overlay { transform: translateY(65%) !important; }
}
/* ============================================================
MHL WAY STACK V6
Heimathafen-Reihenfolge:
Überschrift
Hinweis
fünf Wege
Der Hinweis erhält exakt dieselbe verfügbare Breite
wie die Navigation der fünf Wege.
Ausschließlich .home-hub betroffen.
============================================================ */
section.home-hub {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/*
* Der Bereich mit Überschrift + Hinweis kommt zuerst.
*/
section.home-hub > .home-module-grid {
order: 10 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/*
* Die fünf Wege kommen direkt darunter.
*/
section.home-hub > nav.home-jump-tabs {
order: 20 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/*
* Hinweis exakt auf die Breite des umgebenden
* Heimathafen-Bereichs ziehen.
*/
section.home-hub .home-module-empty {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ============================================================
ENDE MHL WAY STACK V6
============================================================ */
/* ============================================================
MHL CONTENT UP V3
Gesamter Seiteninhalt weitere 25px nach oben.
Gesamtverschiebung gegenüber Original: -85px.
Nur Desktop >= 1430x754.
Header bleibt unverändert.
============================================================ */
@media (min-width: 1430px) and (min-height: 754px) {
#content {
position: relative !important;
top: -85px !important;
}
}
/* ============================================================
ENDE MHL CONTENT UP V3
============================================================ */
/* MHL NEWS HEADER SPACING V3 */
@media (min-width: 1430px) and (min-height: 754px) {
html.mhl-news-header-spacing #content {
top: -15px !important;
}
}
/* ============================================================
MHL GLOBAL HEADER SPACING V3
Sicherer Override:
- bestehende funktionierende CSS-Strukturen bleiben erhalten
- bestehende -85px-Regel wird nicht gelöscht
- bestehende News-JavaScript-Logik wird nicht gelöscht
- alle Desktop-Seiten erhalten einheitlich -45px
- News-Sonderregel wird mit gleicher/höherer Spezifität
ebenfalls auf -45px gesetzt
- Layout/Blade bleibt unverändert
============================================================ */
@media (min-width: 1430px) and (min-height: 754px) {
#content {
position: relative !important;
top: -25px !important;
}
html.mhl-news-header-spacing #content {
top: -25px !important;
}
}
/* ============================================================
ENDE MHL GLOBAL HEADER SPACING V3
============================================================ */
/* ============================================================
MHL NEWS HEADER SPACING V5
Nur die drei bestehenden News-Seiten.
Der globale Desktop-Abstand bleibt unverändert.
Diese Regel verschiebt ausschließlich die News-Seiten
45px weiter nach unten.
============================================================ */
@media (min-width: 1430px) and (min-height: 754px) {
html.mhl-news-header-spacing #content {
top: 0 !important;
}
}
/* ============================================================
ENDE MHL NEWS HEADER SPACING V5
============================================================ */
/* ============================================================
MHL NEWS HEADER SPACING V7
Referenz:
/kuestengeschichten
Global:
#content = -25px
News:
#content = +25px
Differenz:
exakt 50px nach unten gegenüber dem bisherigen News-Stand
bzw. 50px gegenüber dem globalen -25px.
Ziel ist die visuell gleiche Startposition wie die
Referenzseite /kuestengeschichten.
============================================================ */
@media (min-width: 1430px) and (min-height: 754px) {
html.mhl-news-header-spacing #content {
top: 70px !important;
}
}
/* ============================================================
ENDE MHL NEWS HEADER SPACING V7
============================================================ */
/* ============================================================
MHL NEWS HEADER SPACING V9
FINALER NEWS-ONLY OFFSET
Die bisherige Klasse "mhl-news-header-spacing" wird NICHT
verwendet, weil sie auch auf der Referenzseite vorhanden ist.
Die drei News-Seiten besitzen dagegen den gemeinsamen,
eindeutigen News-Inhaltsbaustein .r175-side-card.
Nur Seiten mit diesem Baustein erhalten +45px Abstand.
============================================================ */
@media (min-width: 1430px) and (min-height: 754px) {
#content:has(.r175-side-card) {
margin-top: 45px !important;
}
}
/* ============================================================
ENDE MHL NEWS HEADER SPACING V9
============================================================ */
/* MHL – Sailboat Header Brand */
.site-header .brand-mark .mhl-brand-sailboat {
display: block;
width: 29px;
height: 29px;
object-fit: contain;
flex: 0 0 29px;
pointer-events: none;
user-select: none;
}
/* MHL – eigenes Segelboot-ICO im Header */
.site-header .brand-mark .mhl-brand-sailboat {
display: block;
width: 42px;
height: 42px;
object-fit: contain;
flex: 0 0 42px;
pointer-events: none;
user-select: none;
}
/* ============================================================
MHL GLASS BUTTONS V16
============================================================
Ziel:
- deutlich transparenter
- echtes Glassmorphism
- Meer-/Cyan-Charakter
- feiner Rand
- dezenter innerer Glasreflex
- weicher Glow
- stärkerer Hover
- Dropdown passend
- CTA passend
ABSICHTLICH KEINE:
width
height
margin
padding
gap
position
top
right
bottom
left
transform
translate
scale
flex
grid
*/
/* ============================================================
NAVIGATION – GLAS BASIS
============================================================ */
html body .site-header .site-nav > a,
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__toggle,
html body .site-header .site-nav > .nav-search,
html body .site-header .site-nav > .nav-account,
html body .site-header .site-nav > .nav-join,
html body .site-header .site-nav > .nav-admin,
html body .site-header .site-nav > .nav-form > button,
html body .site-header .header-tools > .header-tool {
background-color: rgba(8, 54, 70, 0.18) !important;
background-image:
linear-gradient(
180deg,
rgba(255,255,255,0.105) 0%,
rgba(70,215,235,0.075) 48%,
rgba(0,45,65,0.105) 100%
) !important;
border-color:
rgba(95,225,240,0.40) !important;
color:
rgba(250,254,255,0.98) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.19),
inset 0 -1px 0 rgba(0,35,55,0.14),
0 0 7px rgba(40,205,230,0.13),
0 3px 10px rgba(0,20,35,0.16) !important;
text-shadow:
0 1px 4px rgba(0,20,35,0.48) !important;
backdrop-filter:
blur(7px)
saturate(125%) !important;
-webkit-backdrop-filter:
blur(7px)
saturate(125%) !important;
transition:
background-color 240ms ease,
background-image 240ms ease,
border-color 240ms ease,
box-shadow 240ms ease,
color 180ms ease,
filter 180ms ease !important;
}
/* ============================================================
START – GOLD
============================================================ */
html body .site-header .site-nav > a.nav-direct {
background-color:
rgba(115,92,24,0.16) !important;
background-image:
linear-gradient(
180deg,
rgba(255,225,95,0.15),
rgba(120,95,25,0.07)
) !important;
border-color:
rgba(255,220,100,0.47) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 0 9px rgba(255,215,75,0.18),
0 3px 11px rgba(0,20,35,0.16) !important;
}
/* ============================================================
DROPDOWN-TRIGGER – CYAN
============================================================ */
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__toggle {
background-color:
rgba(8,90,115,0.17) !important;
background-image:
linear-gradient(
180deg,
rgba(65,220,240,0.15),
rgba(5,70,95,0.07)
) !important;
border-color:
rgba(75,215,240,0.46) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.19),
0 0 9px rgba(35,205,235,0.17),
0 3px 11px rgba(0,20,35,0.16) !important;
}
/* ============================================================
AKTIVES DROPDOWN
============================================================ */
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__toggle[aria-expanded="true"] {
background-color:
rgba(10,115,145,0.23) !important;
background-image:
linear-gradient(
180deg,
rgba(70,225,245,0.21),
rgba(5,70,100,0.09)
) !important;
border-color:
rgba(105,235,250,0.65) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.23),
0 0 13px rgba(45,215,240,0.25),
0 3px 14px rgba(0,20,35,0.19) !important;
}
/* ============================================================
SUCHE
============================================================ */
html body .site-header .site-nav > .nav-search {
background-color:
rgba(5,90,115,0.15) !important;
border-color:
rgba(65,210,235,0.40) !important;
}
/* ============================================================
LOGIN – BLAU
============================================================ */
html body .site-header .site-nav > .nav-account {
background-color:
rgba(35,95,175,0.15) !important;
background-image:
linear-gradient(
180deg,
rgba(75,165,245,0.16),
rgba(20,65,135,0.07)
) !important;
border-color:
rgba(100,190,250,0.44) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.19),
0 0 9px rgba(55,155,240,0.16),
0 3px 11px rgba(0,20,35,0.16) !important;
}
/* ============================================================
MITMACHEN – PINK
============================================================ */
html body .site-header .site-nav > .nav-join {
background-color:
rgba(175,35,90,0.15) !important;
background-image:
linear-gradient(
180deg,
rgba(255,80,140,0.18),
rgba(135,20,70,0.07)
) !important;
border-color:
rgba(255,110,160,0.49) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 0 10px rgba(250,65,125,0.19),
0 3px 12px rgba(0,20,35,0.16) !important;
}
/* ============================================================
SERVICE – TÜRKIS
============================================================ */
html body .site-header .header-tools > .header-tool:first-child {
background-color:
rgba(10,125,115,0.15) !important;
background-image:
linear-gradient(
180deg,
rgba(55,220,200,0.17),
rgba(5,85,90,0.07)
) !important;
border-color:
rgba(75,220,205,0.45) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.19),
0 0 9px rgba(40,205,190,0.17),
0 3px 11px rgba(0,20,35,0.16) !important;
}
/* ============================================================
ANSICHT – BLAU
============================================================ */
html body .site-header .header-tools > .header-tool:last-child {
background-color:
rgba(40,80,175,0.15) !important;
background-image:
linear-gradient(
180deg,
rgba(90,145,245,0.17),
rgba(35,55,135,0.07)
) !important;
border-color:
rgba(105,170,250,0.44) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.19),
0 0 9px rgba(80,135,245,0.17),
0 3px 11px rgba(0,20,35,0.16) !important;
}
/* ============================================================
DROPDOWN – TRANSPARENTES GLAS
============================================================ */
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__menu {
background-color:
rgba(3,38,55,0.66) !important;
background-image:
linear-gradient(
180deg,
rgba(40,185,215,0.17),
rgba(2,35,52,0.47)
) !important;
border-color:
rgba(75,215,235,0.43) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.14),
inset 0 -1px 0 rgba(0,25,45,0.18),
0 0 16px rgba(30,195,225,0.18),
0 10px 26px rgba(0,15,30,0.27) !important;
backdrop-filter:
blur(11px)
saturate(130%) !important;
-webkit-backdrop-filter:
blur(11px)
saturate(130%) !important;
}
/* ============================================================
DROPDOWN LABEL
============================================================ */
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__menu > .nav-dropdown__label {
color:
rgba(80,220,240,0.90) !important;
text-shadow:
0 0 7px rgba(45,205,235,0.18) !important;
}
/* ============================================================
DROPDOWN-EINTRÄGE – GLAS
============================================================ */
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__menu > a {
background-color:
rgba(25,155,180,0.075) !important;
background-image:
linear-gradient(
90deg,
rgba(50,210,235,0.095),
rgba(10,90,115,0.035)
) !important;
border-color:
rgba(75,205,225,0.18) !important;
color:
rgba(248,253,255,0.98) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
0 0 5px rgba(25,180,210,0.05) !important;
transition:
background-color 200ms ease,
background-image 200ms ease,
border-color 200ms ease,
box-shadow 200ms ease,
color 180ms ease,
filter 180ms ease !important;
}
/* ============================================================
DROPDOWN HOVER
============================================================ */
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__menu > a:hover {
background-color:
rgba(30,190,220,0.18) !important;
background-image:
linear-gradient(
90deg,
rgba(50,220,240,0.19),
rgba(10,110,140,0.07)
) !important;
border-color:
rgba(100,230,245,0.46) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.13),
0 0 10px rgba(40,205,230,0.18) !important;
filter:
brightness(1.05)
saturate(1.08) !important;
}
/* ============================================================
ALLE NAV HOVER
============================================================ */
html body .site-header .site-nav > a:hover,
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__toggle:hover,
html body .site-header .site-nav > .nav-search:hover,
html body .site-header .site-nav > .nav-account:hover,
html body .site-header .site-nav > .nav-join:hover,
html body .site-header .site-nav > .nav-admin:hover,
html body .site-header .site-nav > .nav-form > button:hover,
html body .site-header .header-tools > .header-tool:hover {
background-color:
rgba(20,145,175,0.22) !important;
border-color:
rgba(110,235,250,0.66) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.24),
0 0 14px rgba(45,215,240,0.27),
0 3px 14px rgba(0,20,35,0.20) !important;
filter:
brightness(1.06)
saturate(1.10) !important;
}
/* ============================================================
CTA-BUTTONS – VORHANDENE HERO-AKTIONEN
============================================================ */
html body .hero-actions a,
html body .hero-actions button,
html body .hero-buttons a,
html body .hero-buttons button,
html body .hero-content a.button,
html body .hero-content button {
background-color:
rgba(5,75,95,0.20) !important;
background-image:
linear-gradient(
180deg,
rgba(65,215,235,0.15),
rgba(5,55,75,0.09)
) !important;
border-color:
rgba(90,225,240,0.52) !important;
color:
rgba(255,255,255,0.98) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 0 10px rgba(40,205,230,0.17),
0 4px 14px rgba(0,20,35,0.18) !important;
text-shadow:
0 1px 4px rgba(0,20,35,0.45) !important;
backdrop-filter:
blur(6px)
saturate(125%) !important;
-webkit-backdrop-filter:
blur(6px)
saturate(125%) !important;
transition:
background-color 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease,
filter 180ms ease !important;
}
html body .hero-actions a:hover,
html body .hero-actions button:hover,
html body .hero-buttons a:hover,
html body .hero-buttons button:hover,
html body .hero-content a.button:hover,
html body .hero-content button:hover {
background-color:
rgba(20,155,185,0.25) !important;
border-color:
rgba(125,240,250,0.72) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
0 0 16px rgba(45,215,240,0.29),
0 4px 16px rgba(0,20,35,0.21) !important;
filter:
brightness(1.07)
saturate(1.08) !important;
}
/* ============================================================
DEZENTES ATMENDES GLAS
KEINE BEWEGUNG
============================================================ */
@keyframes mhl-glass-v16 {
0%,
100% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.19),
0 0 7px rgba(40,205,230,0.12),
0 3px 10px rgba(0,20,35,0.16);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.21),
0 0 10px rgba(40,205,230,0.17),
0 3px 11px rgba(0,20,35,0.17);
}
}
/* Nur sanftes Leuchten – keinerlei Positionsänderung */
html body .site-header .site-nav > a,
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__toggle,
html body .site-header .site-nav > .nav-search,
html body .site-header .site-nav > .nav-account,
html body .site-header .site-nav > .nav-join,
html body .site-header .site-nav > .nav-admin,
html body .site-header .site-nav > .nav-form > button,
html body .site-header .header-tools > .header-tool {
animation:
mhl-glass-v16 7s ease-in-out infinite !important;
}
/* ============================================================
FOCUS
============================================================ */
html body .site-header .site-nav > a:focus-visible,
html body .site-header .site-nav > .nav-dropdown > .nav-dropdown__toggle:focus-visible,
html body .site-header .site-nav > .nav-search:focus-visible,
html body .site-header .site-nav > .nav-account:focus-visible,
html body .site-header .site-nav > .nav-join:focus-visible,
html body .site-header .site-nav > .nav-admin:focus-visible,
html body .site-header .site-nav > .nav-form > button:focus-visible,
html body .site-header .header-tools > .header-tool:focus-visible {
outline:
2px solid rgba(105,230,245,0.68) !important;
outline-offset:
1px !important;
}
/* ============================================================
MHL LOGBUCH OPENBOOK – SAUBERE EINBINDUNG V1
============================================================ */
/*
* Gesamtes Buch:
* echtes Seitenverhältnis der Openbook-Grafik.
* niemals künstlich hochziehen.
*/
.mhl-book-r197,
.mhl-captains-logbook-r197 {
position: relative !important;
width: min(94vw, 1450px) !important;
max-width: 1450px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 14px auto 24px auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
align-items: start !important;
background-repeat: no-repeat !important;
background-position: top center !important;
background-size: 100% auto !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* Buchseiten transparent halten.
*/
.mhl-book-r197 > *,
.mhl-captains-logbook-r197 > * {
min-width: 0 !important;
min-height: 0 !important;
background: transparent !important;
}
/*
* Linke Buchseite.
*/
.mhl-book-r197 > :first-child,
.mhl-captains-logbook-r197 > :first-child {
position: relative !important;
min-width: 0 !important;
padding:
clamp(46px, 5vw, 78px)
clamp(48px, 5vw, 82px)
55px
clamp(48px, 5vw, 82px) !important;
}
/*
* Rechte Buchseite.
*/
.mhl-book-r197 > :last-child,
.mhl-captains-logbook-r197 > :last-child {
position: relative !important;
min-width: 0 !important;
padding:
clamp(48px, 5vw, 80px)
clamp(46px, 4.5vw, 76px)
55px
clamp(58px, 5vw, 88px) !important;
}
/*
* Keine feste Höhe auf irgendeinem Buch-Container.
*/
.mhl-book-r197,
.mhl-captains-logbook-r197,
.mhl-book-r197 > *,
.mhl-captains-logbook-r197 > *,
.mhl-story-r197,
.mhl-story-page-r197 {
height: auto !important;
max-height: none !important;
}
/*
* Artikeltext:
* normaler, gut lesbarer Serifensatz.
*/
.mhl-story-r197,
.mhl-story-page-r197,
.mhl-story-body-r197 {
font-family:
Georgia,
"Times New Roman",
serif !important;
color: #2e241b !important;
overflow: visible !important;
}
/*
* Überschrift.
*/
.mhl-story-title-r197 {
margin: 0 0 .45rem 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(
1.45rem,
2vw,
2.05rem
) !important;
line-height: 1.12 !important;
color: #281d14 !important;
}
/*
* Storytext.
*/
.mhl-story-body-r197 .mhl-story-text-r197,
.mhl-story-text-r197 {
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(
.9rem,
1.02vw,
1.04rem
) !important;
line-height: 1.55 !important;
color: #34271d !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Storyseite darf niemals den Artikel abschneiden.
*/
.mhl-story-r197,
.mhl-story-page-r197,
.mhl-story-body-r197 {
min-height: 0 !important;
overflow: visible !important;
}
/*
* Bild innerhalb der rechten Seite.
*/
.mhl-story-image-r197 {
margin: .5rem 0 .65rem !important;
}
.mhl-story-image-r197 img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 190px !important;
object-fit: cover !important;
}
/*
* Kalender nicht über die Buchkante laufen lassen.
*/
.mhl-calendar-grid-r197 {
width: 100% !important;
max-width: 100% !important;
gap: .22rem !important;
}
/*
* Blauer Tintenfleck.
* Hover bleibt ebenfalls rund.
*/
.mhl-calendar-day-r197.is-active,
.mhl-calendar-day-r197.is-active:hover,
.mhl-calendar-day-r197.is-active:focus,
.mhl-calendar-day-r197.is-active:active {
border: 0 !important;
border-radius: 50% !important;
background:
radial-gradient(
ellipse at center,
rgba(17, 57, 126, .96) 0%,
rgba(20, 66, 143, .90) 52%,
rgba(18, 54, 120, .72) 72%,
rgba(18, 54, 120, 0) 78%
) !important;
color: #fff !important;
box-shadow: none !important;
}
/*
* Kein quadratischer Hover-Hintergrund.
*/
.mhl-calendar-day-r197:hover {
border-radius: inherit;
}
/*
* Seitenblättern sichtbar halten.
*/
.mhl-story-pager-r197 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: .75rem !important;
margin-top: .7rem !important;
padding: 0 !important;
height: auto !important;
}
/*
* ============================================================
* TABLET
* ============================================================
*/
@media (min-width: 801px) and (max-width: 1199px) {
.mhl-book-r197,
.mhl-captains-logbook-r197 {
width: 96vw !important;
max-width: 1100px !important;
}
.mhl-book-r197 > :first-child,
.mhl-captains-logbook-r197 > :first-child {
padding:
42px
42px
45px
42px !important;
}
.mhl-book-r197 > :last-child,
.mhl-captains-logbook-r197 > :last-child {
padding:
42px
38px
45px
46px !important;
}
.mhl-story-title-r197 {
font-size: 1.4rem !important;
}
.mhl-story-body-r197 .mhl-story-text-r197 {
font-size: .84rem !important;
line-height: 1.45 !important;
}
.mhl-story-image-r197 img {
max-height: 130px !important;
}
}
/*
* ============================================================
* MOBIL
* ============================================================
*/
@media (max-width: 800px) {
.mhl-book-r197,
.mhl-captains-logbook-r197 {
width: 96vw !important;
max-width: none !important;
grid-template-columns: 1fr !important;
background-size: 100% auto !important;
margin-top: 8px !important;
}
.mhl-book-r197 > :first-child,
.mhl-captains-logbook-r197 > :first-child,
.mhl-book-r197 > :last-child,
.mhl-captains-logbook-r197 > :last-child {
padding:
42px
9%
42px
9% !important;
}
.mhl-story-title-r197 {
font-size: 1.35rem !important;
}
.mhl-story-body-r197 .mhl-story-text-r197 {
font-size: .92rem !important;
line-height: 1.52 !important;
}
.mhl-story-image-r197 img {
max-height: 180px !important;
}
}
/* ============================================================
MHL LOGBUCH – OPENBOOK FINAL RESTORE
============================================================ */
/*
* ------------------------------------------------------------
* GESAMTES BUCH
* ------------------------------------------------------------
*/
html.mhl-logbook-page-r197 body {
overflow-x: hidden !important;
}
/*
* Äußerer Logbuchbereich.
*/
.mhl-captains-logbook-r197 {
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: block !important;
overflow: visible !important;
}
/*
* Shell zentriert das Buch.
*/
.mhl-logbook-shell-r197 {
width: 100% !important;
margin: 0 auto !important;
padding: 10px 0 28px !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
overflow: visible !important;
}
/*
* DAS BUCH
*
* 1536 × 1024 = 1.5 : 1
*
* Das Verhältnis bleibt erhalten.
*/
.mhl-book-r197 {
position: relative !important;
width: min(82vw, 1280px) !important;
max-width: 1280px !important;
aspect-ratio: 1536 / 1024 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
align-items: stretch !important;
background-repeat: no-repeat !important;
background-position:
center center !important;
background-size:
100% 100% !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* ------------------------------------------------------------
* BUCHSEITEN
* ------------------------------------------------------------
*/
.mhl-book-page-r197 {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: 100% !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* Linke Seite – sauber innerhalb des Papiers.
*/
.mhl-book-page-r197--left {
padding:
8.5% 8% 7% 8% !important;
}
/*
* Rechte Seite.
*/
.mhl-book-page-r197:not(.mhl-book-page-r197--left) {
padding:
8.5% 8.5% 7% 9% !important;
}
/*
* Keine alten Seitenflächen.
*/
.mhl-book-page-r197::before,
.mhl-book-page-r197::after {
background: transparent !important;
box-shadow: none !important;
}
/*
* ------------------------------------------------------------
* LINKE SEITE / KALENDER
* ------------------------------------------------------------
*/
.mhl-book-head-r197 {
margin: 0 0 2.2% 0 !important;
}
.mhl-book-head-r197 h1 {
margin-top: 0 !important;
margin-bottom: .35rem !important;
line-height: 1.05 !important;
}
.mhl-book-head-r197 > p:last-child {
margin-bottom: 0 !important;
line-height: 1.35 !important;
}
.mhl-yearbar-r197 {
margin-top: 2% !important;
margin-bottom: 2.2% !important;
display: flex !important;
align-items: center !important;
gap: .45rem !important;
flex-wrap: nowrap !important;
}
.mhl-calendar-r197 {
width: 100% !important;
margin: 0 !important;
}
.mhl-calendar-bar-r197 {
width: 100% !important;
display: grid !important;
grid-template-columns:
36px minmax(0, 1fr) 36px !important;
align-items: center !important;
margin-bottom: 1.5% !important;
}
.mhl-calendar-bar-r197 strong {
text-align: center !important;
}
.mhl-weekdays-r197 {
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
width: 100% !important;
margin-bottom: .3rem !important;
}
.mhl-calendar-grid-r197 {
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
gap: .3rem !important;
}
.mhl-calendar-day-r197 {
min-width: 0 !important;
width: 100% !important;
aspect-ratio: 1.8 / 1 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/*
* Blauer Tintenfleck.
*/
.mhl-calendar-day-r197.is-active,
.mhl-calendar-day-r197.is-active:hover,
.mhl-calendar-day-r197.is-active:focus,
.mhl-calendar-day-r197.is-active:active {
border: 0 !important;
border-radius: 50% !important;
background:
radial-gradient(
ellipse at 48% 48%,
rgba(13, 48, 117, .98) 0%,
rgba(20, 65, 145, .94) 42%,
rgba(18, 57, 132, .78) 63%,
rgba(18, 57, 132, .30) 76%,
transparent 83%
) !important;
color: #fff !important;
box-shadow: none !important;
}
/*
* Hover darf kein Quadrat erzeugen.
*/
.mhl-calendar-day-r197:hover {
border-radius: 50% !important;
}
/*
* ------------------------------------------------------------
* RECHTE STORYSEITE
* ------------------------------------------------------------
*/
.mhl-story-r197 {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
color: #2e241b !important;
}
/*
* Storykopf.
*/
.mhl-story-title-r197 {
margin:
0 0 .35rem 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(1.35rem, 2vw, 2rem) !important;
line-height: 1.08 !important;
color: #241a12 !important;
}
/*
* Meta.
*/
.mhl-story-meta-r197 {
margin-bottom: .45rem !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: .72rem !important;
line-height: 1.2 !important;
color: #4b3a2b !important;
}
/*
* Storytext.
*/
.mhl-story-body-r197 {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
}
.mhl-story-text-r197 {
margin: 0 !important;
padding: 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(.82rem, .95vw, 1rem) !important;
line-height: 1.48 !important;
color: #34271d !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Storybild.
*/
.mhl-story-image-r197 {
margin:
.35rem 0 .5rem 0 !important;
padding: 0 !important;
}
.mhl-story-image-r197 img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 145px !important;
object-fit: cover !important;
border-radius: 4px !important;
}
/*
* ------------------------------------------------------------
* BLÄTTERN
* ------------------------------------------------------------
*/
.mhl-story-pager-r197 {
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: .65rem !important;
margin:
.55rem 0 0 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
.mhl-story-page-button-r197 {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
padding: 0 !important;
}
/*
* Keine Abschneidung des Storycontainers.
*/
.mhl-story-page-r197,
.mhl-story-r197,
.mhl-story-body-r197 {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/*
* ------------------------------------------------------------
* DESKTOP
* ------------------------------------------------------------
*/
@media (min-width: 1400px) {
.mhl-book-r197 {
width: min(78vw, 1240px) !important;
}
.mhl-story-text-r197 {
font-size: .94rem !important;
line-height: 1.48 !important;
}
}
/*
* ------------------------------------------------------------
* TABLET
* ------------------------------------------------------------
*/
@media (min-width: 801px) and (max-width: 1399px) {
.mhl-book-r197 {
width: 91vw !important;
max-width: 1100px !important;
}
.mhl-book-page-r197--left {
padding:
8% 7% 6% 7% !important;
}
.mhl-book-page-r197:not(.mhl-book-page-r197--left) {
padding:
8% 7% 6% 8% !important;
}
.mhl-story-title-r197 {
font-size: 1.4rem !important;
}
.mhl-story-text-r197 {
font-size: .78rem !important;
line-height: 1.42 !important;
}
.mhl-story-image-r197 img {
max-height: 105px !important;
}
}
/*
* ------------------------------------------------------------
* MOBIL
* ------------------------------------------------------------
*/
@media (max-width: 800px) {
.mhl-logbook-shell-r197 {
padding:
6px 0 18px !important;
}
.mhl-book-r197 {
width: 96vw !important;
max-width: none !important;
aspect-ratio: auto !important;
display: block !important;
background-size: 100% 100% !important;
}
.mhl-book-page-r197,
.mhl-book-page-r197--left,
.mhl-book-page-r197:not(.mhl-book-page-r197--left) {
height: auto !important;
padding:
42px 9% !important;
}
.mhl-story-title-r197 {
font-size: 1.35rem !important;
}
.mhl-story-text-r197 {
font-size: .9rem !important;
line-height: 1.5 !important;
}
.mhl-story-image-r197 img {
max-height: 180px !important;
}
}
/* ============================================================
MHL LOGBUCH – EIN BUCH / KORREKTE POSITION
============================================================ */
/*
* ============================================================
* 1. ALLE ELTERN MÜSSEN TRANSPARENT SEIN
*
* Das verhindert das bisherige Doppelbuch.
* ============================================================
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197,
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197,
html.mhl-logbuch-page-r197 .mhl-logbook-container-r197 {
background-image: none !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/*
* Auch mögliche alte Pseudo-Elemente abschalten.
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197::before,
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197::after,
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197::before,
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197::after {
display: none !important;
background: none !important;
content: none !important;
}
/*
* ============================================================
* 2. ÄUSSERER BEREICH
* ============================================================
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
overflow: visible !important;
}
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197 {
width: 100% !important;
margin: 0 auto !important;
padding: 12px 0 30px !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
overflow: visible !important;
}
/*
* ============================================================
* 3. EINZIGES BUCH
*
* 1536 × 1024
* ============================================================
*/
html.mhl-logbuch-page-r197 .mhl-book-r197 {
position: relative !important;
width: min(84vw, 1280px) !important;
max-width: 1280px !important;
aspect-ratio: 1536 / 1024 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns:
1fr 1fr !important;
background-repeat: no-repeat !important;
background-position:
center center !important;
background-size:
100% 100% !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* ============================================================
* 4. SEITEN TRANSPARENT
* ============================================================
*/
html.mhl-logbuch-page-r197 .mhl-book-r197 > *,
html.mhl-logbuch-page-r197 .mhl-book-page-r197 {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: visible !important;
}
/*
* Linke Seite.
*
* Der Inhalt bleibt deutlich innerhalb des Papierbereichs.
*/
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child {
padding:
9% 8.5% 7% 8.5% !important;
min-width: 0 !important;
}
/*
* Rechte Seite.
*/
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
9% 8.5% 7% 9% !important;
min-width: 0 !important;
}
/*
* ============================================================
* 5. STORY – NICHT ABSCHNEIDEN
* ============================================================
*/
html.mhl-logbuch-page-r197 .mhl-story-r197,
html.mhl-logbuch-page-r197 .mhl-story-page-r197,
html.mhl-logbuch-page-r197 .mhl-story-body-r197 {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/*
* Überschrift etwas kompakter.
*/
html.mhl-logbuch-page-r197 .mhl-story-title-r197 {
margin:
0 0 .35rem 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(1.25rem, 1.75vw, 1.8rem) !important;
line-height: 1.08 !important;
color: #241a12 !important;
}
/*
* Der vorhandene Text bleibt vollständig lesbar.
*/
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(.78rem, .88vw, .94rem) !important;
line-height: 1.43 !important;
color: #33271d !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Bilder nicht über die Seite hinaus.
*/
html.mhl-logbuch-page-r197 .mhl-story-image-r197 {
width: 100% !important;
margin: .35rem 0 .5rem !important;
}
html.mhl-logbuch-page-r197 .mhl-story-image-r197 img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 125px !important;
object-fit: cover !important;
}
/*
* ============================================================
* 6. KALENDER
* ============================================================
*/
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 {
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
gap: .28rem !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-day-r197 {
min-width: 0 !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1.75 / 1 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/*
* ============================================================
* 7. BLAUER TINTENFLECK
* ============================================================
*/
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:hover,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:focus,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:active {
border: 0 !important;
border-radius: 50% !important;
background:
radial-gradient(
ellipse at 48% 50%,
rgba(12, 51, 124, .98) 0%,
rgba(18, 63, 143, .92) 45%,
rgba(20, 66, 145, .70) 66%,
rgba(20, 66, 145, 0) 82%
) !important;
color: #fff !important;
box-shadow: none !important;
}
/*
* Hover niemals als Quadrat.
*/
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197:hover {
border-radius: 50% !important;
}
/*
* ============================================================
* 8. BLÄTTERBUTTONS
* ============================================================
*/
html.mhl-logbuch-page-r197 .mhl-story-pager-r197 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: .55rem !important;
margin-top: .5rem !important;
height: auto !important;
overflow: visible !important;
}
/*
* ============================================================
* TABLET
* ============================================================
*/
@media (min-width: 801px) and (max-width: 1199px) {
html.mhl-logbuch-page-r197 .mhl-book-r197 {
width: 92vw !important;
max-width: 1050px !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child {
padding:
8.5% 7% 6.5% 7% !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
8.5% 7% 6.5% 8% !important;
}
html.mhl-logbuch-page-r197 .mhl-story-title-r197 {
font-size: 1.35rem !important;
}
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-size: .76rem !important;
line-height: 1.38 !important;
}
html.mhl-logbuch-page-r197
.mhl-story-image-r197 img {
max-height: 95px !important;
}
}
/*
* ============================================================
* MOBIL
* ============================================================
*/
@media (max-width: 800px) {
html.mhl-logbuch-page-r197 .mhl-book-r197 {
width: 96vw !important;
max-width: none !important;
aspect-ratio: auto !important;
display: block !important;
background-size: 100% auto !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child,
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
42px 9% !important;
}
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-size: .9rem !important;
line-height: 1.5 !important;
}
}
/* ============================================================
MHL LOGBUCH – EIN BUCH / KORREKTE POSITION
============================================================ */
/*
* ALLE ELTERN TRANSPARENT
* Nur .mhl-book-r197 zeichnet das WebP.
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197,
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197,
html.mhl-logbuch-page-r197 .mhl-logbook-container-r197 {
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197::before,
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197::after,
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197::before,
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197::after {
display: none !important;
content: none !important;
background: none !important;
}
/*
* ÄUSSERER BEREICH
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
overflow: visible !important;
}
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197 {
width: 100% !important;
margin: 0 auto !important;
padding: 12px 0 30px !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
overflow: visible !important;
}
/*
* EINZIGES BUCH
*
* WebP 1536 x 1024
* Verhältnis 1.5 : 1
*/
html.mhl-logbuch-page-r197 .mhl-book-r197 {
position: relative !important;
width: min(84vw, 1280px) !important;
max-width: 1280px !important;
aspect-ratio: 1536 / 1024 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
align-items: stretch !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* BUCHSEITEN TRANSPARENT
*/
html.mhl-logbuch-page-r197 .mhl-book-r197 > *,
html.mhl-logbuch-page-r197 .mhl-book-page-r197 {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: visible !important;
}
/*
* LINKE SEITE
*/
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child {
padding:
9% 8.5% 7% 8.5% !important;
min-width: 0 !important;
}
/*
* RECHTE SEITE
*/
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
9% 8.5% 7% 9% !important;
min-width: 0 !important;
}
/*
* STORY NICHT ABSCHNEIDEN
*/
html.mhl-logbuch-page-r197 .mhl-story-r197,
html.mhl-logbuch-page-r197 .mhl-story-page-r197,
html.mhl-logbuch-page-r197 .mhl-story-body-r197 {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
}
/*
* STORY-TITEL
*/
html.mhl-logbuch-page-r197 .mhl-story-title-r197 {
margin:
0 0 .35rem 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(1.25rem, 1.75vw, 1.8rem) !important;
line-height: 1.08 !important;
color: #241a12 !important;
}
/*
* STORYTEXT
*/
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
margin: 0 !important;
padding: 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(.78rem, .88vw, .94rem) !important;
line-height: 1.43 !important;
color: #33271d !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* STORYBILD
*/
html.mhl-logbuch-page-r197 .mhl-story-image-r197 {
width: 100% !important;
margin: .35rem 0 .5rem !important;
}
html.mhl-logbuch-page-r197 .mhl-story-image-r197 img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 125px !important;
object-fit: cover !important;
}
/*
* KALENDER
*/
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 {
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
gap: .28rem !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-day-r197 {
min-width: 0 !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1.75 / 1 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/*
* BLAUER TINTENFLECK
*/
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:hover,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:focus,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:active {
border: 0 !important;
border-radius: 50% !important;
background:
radial-gradient(
ellipse at 48% 50%,
rgba(12, 51, 124, .98) 0%,
rgba(18, 63, 143, .92) 45%,
rgba(20, 66, 145, .70) 66%,
rgba(20, 66, 145, 0) 82%
) !important;
color: #fff !important;
box-shadow: none !important;
}
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197:hover {
border-radius: 50% !important;
}
/*
* BLÄTTERN
*/
html.mhl-logbuch-page-r197 .mhl-story-pager-r197 {
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: .55rem !important;
margin: .5rem 0 0 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
/*
* DESKTOP
*/
@media (min-width: 1400px) {
html.mhl-logbuch-page-r197 .mhl-book-r197 {
width: min(78vw, 1240px) !important;
}
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-size: .94rem !important;
line-height: 1.48 !important;
}
}
/*
* TABLET
*/
@media (min-width: 801px) and (max-width: 1399px) {
html.mhl-logbuch-page-r197 .mhl-book-r197 {
width: 92vw !important;
max-width: 1050px !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child {
padding:
8.5% 7% 6.5% 7% !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
8.5% 7% 6.5% 8% !important;
}
html.mhl-logbuch-page-r197 .mhl-story-title-r197 {
font-size: 1.35rem !important;
}
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-size: .76rem !important;
line-height: 1.38 !important;
}
html.mhl-logbuch-page-r197
.mhl-story-image-r197 img {
max-height: 95px !important;
}
}
/*
* MOBIL
*/
@media (max-width: 800px) {
html.mhl-logbuch-page-r197 .mhl-book-r197 {
width: 96vw !important;
max-width: none !important;
aspect-ratio: auto !important;
display: block !important;
background-size: 100% auto !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child,
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
42px 9% !important;
}
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-size: .9rem !important;
line-height: 1.5 !important;
}
}
/* ============================================================
MHL LOGBUCH – EIN BUCH / OHNE HINTERGRUNDBILD
============================================================ */
/*
* WICHTIG:
* Kein WebP.
* Kein Openbook-Hintergrund.
* Kein zweites / hinteres Buch.
*/
/* Alte globale Logbuch-Bilder ausschalten */
html.mhl-logbuch-page-r197,
html.mhl-logbuch-page-r197 body,
html.mhl-logbuch-production-v21,
html.mhl-logbuch-production-v21 body {
background-image: none !important;
}
/* Alte Küsten-/Logbuch-Hintergründe entfernen */
html.mhl-logbuch-page-r197 .mhl-news-v25__background,
html.mhl-logbuch-page-r197 .mhl-news-v25__overlay,
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197::before,
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197::after,
html.mhl-logbuch-production-v21 .mhl-captains-logbook-r197::before,
html.mhl-logbuch-production-v21 .mhl-captains-logbook-r197::after {
display: none !important;
content: none !important;
background: none !important;
}
/* Äußerer Bereich */
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
overflow: visible !important;
}
/* Buch exakt mittig */
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197 {
width: 100% !important;
margin: 0 auto !important;
padding: 24px 0 40px !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
background: transparent !important;
overflow: visible !important;
}
/* ============================================================
DAS EINE BUCH
============================================================ */
html.mhl-logbuch-page-r197 .mhl-book-r197 {
position: relative !important;
/*
* Kleiner als bisher.
* Immer mittig.
*/
width: min(78vw, 1120px) !important;
max-width: 1120px !important;
margin: 0 auto !important;
/*
* Zwei Seiten.
*/
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
align-items: stretch !important;
/*
* KEIN BILD.
*/
background-image: none !important;
/*
* Papierfläche.
*/
background:
linear-gradient(
90deg,
#ead9b7 0%,
#f3e5c8 47%,
#d7bd91 50%,
#f3e5c8 53%,
#ead9b7 100%
) !important;
border: 1px solid rgba(77, 48, 24, .55) !important;
border-radius: 18px !important;
/*
* Buchkante.
*/
box-shadow:
0 18px 35px rgba(0,0,0,.35),
inset 0 0 0 5px rgba(92,58,29,.12),
inset 0 0 35px rgba(85,52,25,.18) !important;
/*
* Keine feste Höhe.
* Der Text bestimmt die Buchhöhe.
*/
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/* Buchrücken */
html.mhl-logbuch-page-r197 .mhl-book-r197::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
width: 18px !important;
transform: translateX(-50%) !important;
background:
linear-gradient(
90deg,
rgba(70,40,20,.08),
rgba(55,32,16,.30),
rgba(70,40,20,.08)
) !important;
pointer-events: none !important;
z-index: 5 !important;
}
/* ============================================================
SEITEN
============================================================ */
html.mhl-logbuch-page-r197 .mhl-book-r197 > * {
min-width: 0 !important;
min-height: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Linke Seite */
html.mhl-logbuch-page-r197 .mhl-book-r197 > :first-child {
padding:
48px 48px 48px 54px !important;
border-right:
1px solid rgba(75,48,27,.12) !important;
}
/* Rechte Seite */
html.mhl-logbuch-page-r197 .mhl-book-r197 > :last-child {
padding:
48px 54px 48px 48px !important;
}
/* ============================================================
KEINE BESCHNEIDUNG DES TEXTES
============================================================ */
html.mhl-logbuch-page-r197 .mhl-story-r197,
html.mhl-logbuch-page-r197 .mhl-story-page-r197,
html.mhl-logbuch-page-r197 .mhl-story-body-r197,
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* ============================================================
SCHRIFT
============================================================ */
/*
* Schreibschrift, aber lesbar.
* Fallbacks sorgen dafür, dass nichts kaputtgeht.
*/
html.mhl-logbuch-page-r197 .mhl-story-r197 {
font-family:
"Segoe Print",
"Bradley Hand",
"Comic Sans MS",
cursive !important;
color: #302218 !important;
}
/* Titel */
html.mhl-logbuch-page-r197 .mhl-story-title-r197 {
margin: 0 0 14px !important;
font-family:
"Segoe Print",
"Bradley Hand",
Georgia,
serif !important;
font-weight: 600 !important;
font-size:
clamp(1.35rem, 2vw, 2rem) !important;
line-height: 1.15 !important;
color: #271b12 !important;
}
/* Fließtext */
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-family:
"Segoe Print",
"Bradley Hand",
"Comic Sans MS",
cursive !important;
font-size:
clamp(.9rem, 1vw, 1.08rem) !important;
line-height: 1.55 !important;
color: #35271c !important;
}
/* ============================================================
BILD IM ARTIKEL
============================================================ */
html.mhl-logbuch-page-r197 .mhl-story-image-r197 {
max-width: 100% !important;
margin:
12px 0 16px !important;
}
html.mhl-logbuch-page-r197 .mhl-story-image-r197 img {
display: block !important;
width: min(100%, 360px) !important;
height: auto !important;
max-height: 190px !important;
margin: 0 auto !important;
object-fit: cover !important;
border-radius: 10px !important;
}
/* ============================================================
BLAUER TINTENKLECKS
============================================================ */
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:hover,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:focus,
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197.is-active:active {
border: 0 !important;
border-radius: 50% !important;
background:
radial-gradient(
ellipse at 48% 48%,
rgba(12,45,110,.98) 0%,
rgba(20,65,145,.92) 42%,
rgba(22,68,145,.60) 68%,
rgba(22,68,145,0) 84%
) !important;
color: #fff !important;
box-shadow: none !important;
transform: rotate(-3deg) !important;
}
/*
* Hover darf niemals wieder ein Quadrat erzeugen.
*/
html.mhl-logbuch-page-r197
.mhl-calendar-day-r197:hover {
border-radius: 50% !important;
background-color: transparent !important;
}
/* ============================================================
BLÄTTERN
============================================================ */
html.mhl-logbuch-page-r197 .mhl-story-pager-r197 {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
margin-top: 18px !important;
height: auto !important;
overflow: visible !important;
}
/* ============================================================
TABLET
============================================================ */
@media (min-width: 801px) and (max-width: 1399px) {
html.mhl-logbuch-page-r197 .mhl-book-r197 {
width: 90vw !important;
max-width: 1000px !important;
}
html.mhl-logbuch-page-r197 .mhl-book-r197 > :first-child {
padding:
34px 34px 40px 38px !important;
}
html.mhl-logbuch-page-r197 .mhl-book-r197 > :last-child {
padding:
34px 38px 40px 34px !important;
}
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-size: .88rem !important;
line-height: 1.45 !important;
}
}
/* ============================================================
MOBIL
============================================================ */
@media (max-width: 800px) {
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197 {
padding:
12px 8px 30px !important;
}
html.mhl-logbuch-page-r197 .mhl-book-r197 {
width: 96vw !important;
max-width: none !important;
display: block !important;
background:
#ead9b7 !important;
border-radius: 14px !important;
}
html.mhl-logbuch-page-r197 .mhl-book-r197::before {
display: none !important;
}
html.mhl-logbuch-page-r197 .mhl-book-r197 > :first-child,
html.mhl-logbuch-page-r197 .mhl-book-r197 > :last-child {
padding:
30px 24px !important;
}
html.mhl-logbuch-page-r197 .mhl-story-text-r197 {
font-size: .92rem !important;
line-height: 1.55 !important;
}
}
/* ============================================================
MHL LOGBUCH – SINGLE BOOK / NO REAR BOOK
============================================================ */
/*
* KEIN vollflächiges Logbuchbild.
* KEIN zweites Buch.
* KEIN Openbook-WebP.
* KEIN V21-Hintergrund.
*/
html.mhl-logbuch-page-r197,
html.mhl-logbuch-page-r197 body {
background-image: none !important;
}
/* Äußere Logbuchfläche */
html.mhl-logbuch-page-r197
.mhl-captains-logbook-r197 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
position: relative !important;
overflow: visible !important;
}
/*
* Alle möglichen Hintergrund-/Overlay-Layer
* vollständig abschalten.
*/
html.mhl-logbuch-page-r197
.mhl-captains-logbook-r197::before,
html.mhl-logbuch-page-r197
.mhl-captains-logbook-r197::after,
html.mhl-logbuch-page-r197
.mhl-logbook-shell-r197::before,
html.mhl-logbuch-page-r197
.mhl-logbook-shell-r197::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
}
/* Shell */
html.mhl-logbuch-page-r197
.mhl-logbook-shell-r197 {
width: 100% !important;
margin: 0 auto !important;
padding:
22px 0 35px !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
background: transparent !important;
overflow: visible !important;
}
/*
* ============================================================
* DAS EINZIGE BUCH
* ============================================================
*/
html.mhl-logbuch-page-r197
.mhl-book-r197 {
position: relative !important;
width: min(78vw, 1120px) !important;
max-width: 1120px !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
align-items: stretch !important;
/*
* KEIN Bild.
*/
background-image: none !important;
/*
* Ein einziges Papierbuch.
*/
background:
linear-gradient(
90deg,
#e6d2ad 0%,
#f1dfbc 47%,
#cdb084 50%,
#f1dfbc 53%,
#e6d2ad 100%
) !important;
border:
1px solid rgba(68,45,27,.55) !important;
border-radius: 16px !important;
box-shadow:
0 15px 30px rgba(0,0,0,.28),
inset 0 0 30px rgba(83,52,25,.16) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Buchrücken – kein zusätzliches Buch.
*/
html.mhl-logbuch-page-r197
.mhl-book-r197::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
width: 12px !important;
transform: translateX(-50%) !important;
background:
linear-gradient(
90deg,
transparent,
rgba(63,39,20,.22),
transparent
) !important;
pointer-events: none !important;
z-index: 4 !important;
}
/*
* Keine weiteren Pseudo-Bücher.
*/
html.mhl-logbuch-page-r197
.mhl-book-r197::after {
display: none !important;
content: none !important;
}
/*
* Seiten transparent.
*/
html.mhl-logbuch-page-r197
.mhl-book-r197 > * {
min-width: 0 !important;
min-height: 0 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* Linke Seite
*/
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child {
padding:
42px 44px 45px 48px !important;
}
/*
* Rechte Seite
*/
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
42px 48px 45px 44px !important;
}
/*
* Story niemals abschneiden.
*/
html.mhl-logbuch-page-r197
.mhl-story-r197,
html.mhl-logbuch-page-r197
.mhl-story-page-r197,
html.mhl-logbuch-page-r197
.mhl-story-body-r197,
html.mhl-logbuch-page-r197
.mhl-story-text-r197 {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
white-space: normal !important;
}
/*
* Bild innerhalb der Story darf vorhanden sein,
* ist aber kein Buchhintergrund.
*/
html.mhl-logbuch-page-r197
.mhl-story-image-r197 {
background: transparent !important;
background-image: none !important;
}
/*
* Desktop kleiner und mittig.
*/
@media (min-width: 1400px) {
html.mhl-logbuch-page-r197
.mhl-book-r197 {
width: min(72vw, 1080px) !important;
}
}
/*
* Tablet
*/
@media (min-width: 801px) and (max-width: 1399px) {
html.mhl-logbuch-page-r197
.mhl-book-r197 {
width: 90vw !important;
max-width: 1000px !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child {
padding:
32px 32px 38px 36px !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
32px 36px 38px 32px !important;
}
}
/*
* Mobil
*/
@media (max-width: 800px) {
html.mhl-logbuch-page-r197
.mhl-logbook-shell-r197 {
padding:
12px 8px 28px !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 {
width: 96vw !important;
display: block !important;
background:
#ead7b3 !important;
border-radius: 12px !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197::before {
display: none !important;
}
html.mhl-logbuch-page-r197
.mhl-book-r197 > :first-child,
html.mhl-logbuch-page-r197
.mhl-book-r197 > :last-child {
padding:
28px 22px !important;
}
}
/* ============================================================
MHL LOGBUCH – REAR BOOK HARD OFF
============================================================ */
/*
* WICHTIG:
* Das äußere alte Buch darf NICHT mehr als Hintergrund
* des Logbuch-Containers erscheinen.
*
* Nur .mhl-book-r197 bleibt als tatsächliches Buch erhalten.
*/
/* Alte komplette Logbuch-Hintergründe */
.mhl-captains-logbook-r197,
.mhl-captains-logbook-r197.mhl-logbook-production-v21,
.mhl-logbook-production-v21,
.mhl-logbook-shell-r197 {
background-image: none !important;
}
/* Alte Buch-Pseudoelemente */
.mhl-captains-logbook-r197::before,
.mhl-captains-logbook-r197::after,
.mhl-logbook-production-v21::before,
.mhl-logbook-production-v21::after,
.mhl-logbook-shell-r197::before,
.mhl-logbook-shell-r197::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
}
/*
* Falls das alte Buch auf einem verschachtelten
* Logbuch-Element liegt: Bild-Hintergründe entfernen.
*
* Das betrifft ausschließlich Hintergrundbilder,
* nicht die normale Papierfarbe.
*/
.mhl-captains-logbook-r197 [class*="logbook"] ,
.mhl-captains-logbook-r197 [class*="captains"] {
background-image: none !important;
}
/*
* Alte Openbook-Bilder als echte ![]()
-Elemente
* innerhalb des äußeren Containers ausblenden.
*
* Das eigentliche HTML-Buch .mhl-book-r197
* bleibt vollständig erhalten.
*/
.mhl-captains-logbook-r197 img[src*="logbuch-openbook"],
.mhl-captains-logbook-r197 img[src*="logbuch-der-kueste"] {
display: none !important;
visibility: hidden !important;
}
/*
* DAS EINZIGE BUCH.
*/
.mhl-captains-logbook-r197
.mhl-book-r197 {
display: grid !important;
width: min(78vw, 1120px) !important;
max-width: 1120px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background-image: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Keine zweite Buchfläche über/unter dem eigentlichen Buch.
*/
.mhl-captains-logbook-r197
.mhl-book-r197::after {
display: none !important;
content: none !important;
}
/*
* Keine künstliche Buchgrafik vor dem Buch.
*/
.mhl-captains-logbook-r197
.mhl-book-r197::before {
background-image: none !important;
}
/*
* Seiten niemals abschneiden.
*/
.mhl-captains-logbook-r197
.mhl-book-r197 > * {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Story niemals abschneiden.
*/
.mhl-captains-logbook-r197
.mhl-story-r197,
.mhl-captains-logbook-r197
.mhl-story-page-r197,
.mhl-captains-logbook-r197
.mhl-story-body-r197 {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Keine Hintergrundgrafik mehr auf dem äußeren
* Logbuchbereich.
*/
html.mhl-logbuch-production-v21
.mhl-captains-logbook-r197 {
background: transparent !important;
background-image: none !important;
}
/*
* Auch ältere HTML-Klassen neutralisieren.
*/
html.mhl-logbook-production-v21
body {
background-image: none !important;
}
/*
* Desktop: ein einzelnes, zentriertes Buch.
*/
@media (min-width: 1400px) {
.mhl-captains-logbook-r197
.mhl-book-r197 {
width: min(72vw, 1080px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/*
* Tablet.
*/
@media (min-width: 801px) and (max-width: 1399px) {
.mhl-captains-logbook-r197
.mhl-book-r197 {
width: 90vw !important;
max-width: 1000px !important;
}
}
/*
* Mobil.
*/
@media (max-width: 800px) {
.mhl-captains-logbook-r197
.mhl-book-r197 {
width: 96vw !important;
max-width: none !important;
display: block !important;
}
}
/* ============================================================
MHL LOGBUCH – EIN EINZIGES BUCH
OHNE HINTERGRUNDBILD
============================================================ */
/*
* Der äußere Seitenhintergrund darf bleiben.
* Nur der Logbuch-Container bekommt kein altes Buchbild.
*/
.mhl-captains-logbook-r197 {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 24px 0 40px !important;
background: transparent !important;
background-image: none !important;
overflow: visible !important;
}
/*
* Alte Pseudo-Buchgrafiken AUS.
*/
.mhl-captains-logbook-r197::before,
.mhl-captains-logbook-r197::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
}
/*
* Shell selbst ist transparent.
*/
.mhl-logbook-shell-r197 {
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
overflow: visible !important;
}
/*
* ============================================================
* DAS EINE UND EINZIGE BUCH
* ============================================================
*/
.mhl-book-r197 {
position: relative !important;
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
width: min(74vw, 1080px) !important;
max-width: 1080px !important;
margin: 18px auto 35px auto !important;
padding: 0 !important;
/*
* Buchpapier.
*/
background:
linear-gradient(
90deg,
#e5cfaa 0%,
#f2dfbb 45%,
#c7a879 49.5%,
#8f6d43 50%,
#c7a879 50.5%,
#f2dfbb 55%,
#e5cfaa 100%
) !important;
border: 1px solid rgba(63,42,24,.55) !important;
border-radius: 15px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.42),
inset 0 0 45px rgba(80,48,22,.15) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Keine zusätzliche Grafik über dem Buch.
*/
.mhl-book-r197::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
}
/*
* Buchrücken.
*/
.mhl-book-r197::before {
content: "" !important;
position: absolute !important;
z-index: 10 !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
width: 10px !important;
transform: translateX(-50%) !important;
pointer-events: none !important;
background:
linear-gradient(
90deg,
rgba(50,30,15,.05),
rgba(55,32,15,.35),
rgba(255,240,205,.18),
rgba(55,32,15,.35),
rgba(50,30,15,.05)
) !important;
}
/*
* Beide Seiten.
*/
.mhl-book-r197 > * {
position: relative !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
}
/*
* Linke Seite.
*/
.mhl-book-r197 > :first-child {
padding:
38px 42px 42px 44px !important;
}
/*
* Rechte Seite.
*/
.mhl-book-r197 > :last-child {
padding:
38px 44px 42px 42px !important;
}
/*
* ============================================================
* TEXT DARF NICHT ABGESCHNITTEN WERDEN
* ============================================================
*/
.mhl-story-r197,
.mhl-story-r197 *,
.mhl-story-page-r197,
.mhl-story-page-r197 *,
.mhl-story-body-r197,
.mhl-story-body-r197 * {
max-height: none !important;
overflow: visible !important;
}
.mhl-story-r197 {
height: auto !important;
min-height: 0 !important;
}
/*
* Artikeltext gut lesbar.
*/
.mhl-story-r197 p,
.mhl-story-page-r197 p,
.mhl-story-body-r197 p {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
line-height: 1.65 !important;
margin:
0 0 15px 0 !important;
}
/*
* Überschrift.
*/
.mhl-story-r197 h1,
.mhl-story-r197 h2,
.mhl-story-r197 h3 {
max-width: 100% !important;
overflow: visible !important;
white-space: normal !important;
}
/*
* Bilder innerhalb eines Artikels bleiben erlaubt.
* Nur Buch-Hintergrundbilder werden entfernt.
*/
.mhl-story-r197 img {
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
/*
* ============================================================
* KALENDER
* ============================================================
*/
.mhl-book-r197
button[data-logbook-day] {
position: relative !important;
transition:
transform .15s ease,
background .15s ease !important;
}
/*
* Blauer Tintenklecks.
*/
.mhl-book-r197
button[data-logbook-day].is-active {
background:
#155f91 !important;
color: #fff !important;
border-color:
#155f91 !important;
border-radius:
48% 56% 43% 54% / 55% 44% 57% 46% !important;
box-shadow:
4px 2px 0 rgba(8,52,82,.18),
-2px 3px 0 rgba(8,52,82,.10) !important;
transform:
rotate(-2deg) !important;
}
/*
* Hover darf NIEMALS zu einem Quadrat werden.
*/
.mhl-book-r197
button[data-logbook-day].is-active:hover {
background:
#155f91 !important;
border-radius:
48% 56% 43% 54% / 55% 44% 57% 46% !important;
transform:
rotate(-2deg) scale(1.03) !important;
}
/*
* ============================================================
* DESKTOP
* ============================================================
*/
@media (min-width: 1400px) {
.mhl-book-r197 {
width: min(68vw, 1040px) !important;
max-width: 1040px !important;
}
}
/*
* ============================================================
* TABLET
* ============================================================
*/
@media (min-width: 801px) and (max-width: 1399px) {
.mhl-book-r197 {
width: 90vw !important;
max-width: 1000px !important;
}
.mhl-book-r197 > :first-child {
padding:
30px 30px 36px 34px !important;
}
.mhl-book-r197 > :last-child {
padding:
30px 34px 36px 30px !important;
}
}
/*
* ============================================================
* MOBIL
* ============================================================
*/
@media (max-width: 800px) {
.mhl-captains-logbook-r197 {
padding:
10px 7px 30px !important;
}
.mhl-book-r197 {
width: 96vw !important;
max-width: none !important;
display: block !important;
margin:
8px auto 25px auto !important;
background:
#ead7b3 !important;
}
.mhl-book-r197::before {
display: none !important;
}
.mhl-book-r197 > :first-child,
.mhl-book-r197 > :last-child {
padding:
25px 20px 30px 20px !important;
}
}
/* ============================================================
MHL LOGBUCH V6
SAUBERE EIN-BUCH-DARSTELLUNG
============================================================ */
/*
* Alte Bild-/Buch-Layer abschalten.
*/
.mhl-captains-logbook-r197,
.mhl-logbook-shell-r197 {
background-image: none !important;
background-color: transparent !important;
overflow: visible !important;
}
/*
* Keine alten Pseudo-Grafiken.
*/
.mhl-captains-logbook-r197::before,
.mhl-captains-logbook-r197::after,
.mhl-logbook-shell-r197::before,
.mhl-logbook-shell-r197::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
}
/*
* Äußeren Container sauber zentrieren.
*/
.mhl-captains-logbook-r197 {
width: 100% !important;
margin: 0 auto !important;
padding:
18px 12px 35px !important;
position: relative !important;
display: block !important;
overflow: visible !important;
}
/*
* ============================================================
* EINZIGES BUCH
* ============================================================
*/
.mhl-logbook-shell-r197 {
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
overflow: visible !important;
}
.mhl-book-r197 {
position: relative !important;
width: min(82vw, 1180px) !important;
max-width: 1180px !important;
margin:
10px auto 30px !important;
padding: 0 !important;
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
/*
* WICHTIG:
* vollständig blickdichte Buchfläche.
*/
background:
linear-gradient(
90deg,
#ead5ae 0%,
#f3e2c2 47%,
#c39d69 49.4%,
#795431 50%,
#c39d69 50.6%,
#f3e2c2 53%,
#ead5ae 100%
) !important;
border:
1px solid rgba(73,47,25,.62) !important;
border-radius:
16px !important;
box-shadow:
0 16px 40px rgba(0,0,0,.42),
inset 0 0 38px rgba(86,53,25,.13) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Buchrücken.
*/
.mhl-book-r197::before {
content: "" !important;
position: absolute !important;
z-index: 5 !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
width: 8px !important;
transform:
translateX(-50%) !important;
pointer-events: none !important;
background:
linear-gradient(
90deg,
rgba(61,37,18,.10),
rgba(61,37,18,.48),
rgba(247,225,186,.30),
rgba(61,37,18,.48),
rgba(61,37,18,.10)
) !important;
}
.mhl-book-r197::after {
content: none !important;
}
/*
* Linke und rechte Seite.
*/
.mhl-book-r197 > * {
position: relative !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
.mhl-book-r197 > :first-child {
padding:
30px 38px 34px 42px !important;
}
.mhl-book-r197 > :last-child {
padding:
30px 42px 34px 38px !important;
}
/*
* ============================================================
* ARTIKEL – KEIN ABSCHNEIDEN
* ============================================================
*/
.mhl-story-r197 {
display: block !important;
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
.mhl-story-r197,
.mhl-story-r197 > *,
.mhl-story-r197 p,
.mhl-story-r197 h1,
.mhl-story-r197 h2,
.mhl-story-r197 h3,
.mhl-story-r197 div {
max-height: none !important;
overflow: visible !important;
}
/*
* Artikeltext Schreibschrift.
*/
.mhl-story-r197 p,
.mhl-story-r197 .mhl-story-body-r197,
.mhl-story-r197 [data-logbook-visible-paragraphs] {
font-family:
"Segoe Print",
"Bradley Hand",
"Comic Sans MS",
cursive !important;
font-size:
clamp(15px, 1.05vw, 18px) !important;
line-height:
1.65 !important;
letter-spacing:
.01em !important;
color:
#382718 !important;
white-space:
normal !important;
overflow-wrap:
break-word !important;
word-break:
normal !important;
}
/*
* Überschrift ebenfalls handschriftlich,
* aber deutlich und groß.
*/
.mhl-story-r197 h1,
.mhl-story-r197 h2 {
font-family:
"Segoe Print",
"Bradley Hand",
"Comic Sans MS",
cursive !important;
color:
#302015 !important;
white-space:
normal !important;
overflow:
visible !important;
line-height:
1.18 !important;
}
/*
* Story-Seitencontainer.
*/
.mhl-story-page-r197 {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Paragraphen nicht künstlich auf wenige Zeilen begrenzen.
*/
.mhl-story-page-r197 p {
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
margin:
0 0 16px !important;
}
/*
* Bilder im Artikel.
*/
.mhl-story-r197 img {
display: block !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
max-height: 230px !important;
object-fit: contain !important;
margin:
12px auto 18px !important;
}
/*
* ============================================================
* SEITENBLÄTTERN
* ============================================================
*/
.mhl-logbuch-pager-v6 {
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 14px !important;
margin:
22px 0 0 !important;
min-height: 42px !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
color:
#3b2919 !important;
}
.mhl-logbuch-pager-v6 button {
appearance: none !important;
border: 0 !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border-radius: 50% !important;
background:
#315f7d !important;
color:
#fff !important;
font-size: 21px !important;
line-height: 38px !important;
padding: 0 !important;
cursor: pointer !important;
box-shadow:
0 2px 5px rgba(0,0,0,.22) !important;
}
.mhl-logbuch-pager-v6 button:hover {
background:
#244c66 !important;
border-radius: 50% !important;
transform:
scale(1.05) !important;
}
.mhl-logbuch-pager-v6 button:disabled {
opacity:
.35 !important;
cursor:
default !important;
transform:
none !important;
}
.mhl-logbuch-page-label-v6 {
min-width:
92px !important;
text-align:
center !important;
font-size:
14px !important;
font-weight:
600 !important;
}
/*
* ============================================================
* KALENDER – BLAUER TINTENKLECKS
* ============================================================
*/
.mhl-book-r197 button[data-logbook-day] {
transition:
transform .15s ease,
background .15s ease,
border-radius .15s ease !important;
}
.mhl-book-r197 button[data-logbook-day].is-active {
background:
#155f91 !important;
color:
#fff !important;
border-color:
#155f91 !important;
border-radius:
51% 44% 56% 47% /
45% 58% 43% 55% !important;
transform:
rotate(-2deg) !important;
box-shadow:
3px 2px 0 rgba(9,55,83,.16) !important;
}
.mhl-book-r197 button[data-logbook-day].is-active:hover {
background:
#155f91 !important;
color:
#fff !important;
border-radius:
51% 44% 56% 47% /
45% 58% 43% 55% !important;
transform:
rotate(-2deg) scale(1.03) !important;
}
/*
* ============================================================
* ZUKÜNFTIGE TAGE / JAHRE
* ============================================================
*/
.mhl-book-r197 button[data-logbook-day][aria-disabled="true"],
.mhl-book-r197 button[data-logbook-day].is-future {
opacity:
.36 !important;
cursor:
not-allowed !important;
pointer-events:
auto !important;
}
/*
* 2027 / 2028 gesperrt.
*/
.mhl-book-r197 button[data-logbook-year="2027"],
.mhl-book-r197 button[data-logbook-year="2028"] {
opacity:
.48 !important;
cursor:
not-allowed !important;
}
/*
* ============================================================
* DESKTOP
* ============================================================
*/
@media (min-width: 1400px) {
.mhl-book-r197 {
width:
min(76vw, 1180px) !important;
}
}
/*
* ============================================================
* TABLET
* ============================================================
*/
@media (min-width: 801px) and (max-width: 1399px) {
.mhl-book-r197 {
width:
92vw !important;
}
.mhl-book-r197 > :first-child {
padding:
26px 28px 32px 30px !important;
}
.mhl-book-r197 > :last-child {
padding:
26px 30px 32px 28px !important;
}
}
/*
* ============================================================
* MOBIL
* ============================================================
*/
@media (max-width: 800px) {
.mhl-captains-logbook-r197 {
padding:
8px 6px 25px !important;
}
.mhl-book-r197 {
width:
97vw !important;
display:
block !important;
margin:
5px auto 25px !important;
background:
#ead5ae !important;
}
.mhl-book-r197::before {
display:
none !important;
}
.mhl-book-r197 > :first-child,
.mhl-book-r197 > :last-child {
padding:
23px 19px 28px !important;
}
.mhl-story-r197 p,
.mhl-story-r197 .mhl-story-body-r197 {
font-size:
16px !important;
line-height:
1.6 !important;
}
}
/* ============================================================
MHL LOGBUCH – KOMPLETT REPARATUR
EIN BUCH / ZENTRIERT / INHALT INNERHALB / PAGING
============================================================ */
html.mhl-logbuch-fixed,
html.mhl-logbuch-fixed body {
overflow-x: hidden !important;
}
/* Alte Seiten-Hintergründe nicht über das Buch legen. */
html.mhl-logbuch-fixed body {
background-color: #17232d !important;
}
/* ------------------------------------------------------------
EINZIGES BUCH
------------------------------------------------------------ */
.mhl-logbuch-fixed-root {
position: relative !important;
z-index: 20 !important;
width: min(1180px, calc(100vw - 32px)) !important;
/*
* Das Buch bleibt kompakt und mittig.
* 1180 x ca. 760 auf Desktop.
*/
height: min(760px, calc(100vh - 185px)) !important;
min-height: 650px !important;
margin: 28px auto 35px auto !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Keine zweite Buchgrafik durch verschachtelte Elemente. */
.mhl-logbuch-fixed-root .mhl-book-r197,
.mhl-logbuch-fixed-root .mhl-captains-logbook-r197 {
background-image: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* ------------------------------------------------------------
LINKE BUCHSEITE
------------------------------------------------------------ */
.mhl-logbuch-fixed-root > :first-child {
min-width: 0 !important;
min-height: 0 !important;
}
.mhl-logbuch-fixed-root .mhl-logbook-left-r197,
.mhl-logbuch-fixed-root [data-logbook-calendar],
.mhl-logbuch-fixed-root [data-logbook-left] {
min-width: 0 !important;
max-width: 100% !important;
}
/* ------------------------------------------------------------
RECHTE BUCHSEITE
------------------------------------------------------------ */
.mhl-logbuch-fixed-root .mhl-story-r197,
.mhl-logbuch-fixed-root [data-logbook-story] {
position: relative !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 62px 72px 42px 58px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background: transparent !important;
}
/* ------------------------------------------------------------
STORY-KOPF
------------------------------------------------------------ */
.mhl-logbuch-fixed-root .mhl-story-r197 h1,
.mhl-logbuch-fixed-root .mhl-story-r197 h2,
.mhl-logbuch-fixed-root .mhl-story-r197 h3 {
flex: 0 0 auto !important;
margin-top: 0 !important;
color: #302015 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-weight: 700 !important;
text-shadow: none !important;
}
.mhl-logbuch-fixed-root .mhl-story-r197 p {
color: #38271a !important;
font-family:
"Segoe Print",
"Bradley Hand",
"Comic Sans MS",
cursive !important;
font-size: clamp(15px, 1.15vw, 18px) !important;
line-height: 1.62 !important;
letter-spacing: 0.01em !important;
text-shadow: none !important;
}
/* Titel nicht als Schreibschrift */
.mhl-logbuch-fixed-root .mhl-story-r197 h1,
.mhl-logbuch-fixed-root .mhl-story-r197 h2,
.mhl-logbuch-fixed-root .mhl-story-r197 h3,
.mhl-logbuch-fixed-root .mhl-story-title-r197 {
font-family:
Georgia,
"Times New Roman",
serif !important;
}
/* ------------------------------------------------------------
BILD
------------------------------------------------------------ */
.mhl-logbuch-fixed-root .mhl-story-r197 img,
.mhl-logbuch-fixed-root [data-logbook-story-image] {
flex: 0 0 auto !important;
display: block !important;
width: min(210px, 34%) !important;
max-width: 210px !important;
max-height: 145px !important;
object-fit: cover !important;
margin: 8px 0 12px auto !important;
border-radius: 12px !important;
border: 7px solid rgba(255,255,255,.72) !important;
box-shadow:
0 3px 12px rgba(52,30,10,.25) !important;
}
/* ------------------------------------------------------------
PAGINIERTER TEXTBEREICH
------------------------------------------------------------ */
.mhl-logbuch-fixed-root .mhl-story-pages-r197 {
position: relative !important;
flex: 1 1 auto !important;
min-height: 0 !important;
width: 100% !important;
overflow: hidden !important;
}
.mhl-logbuch-fixed-root .mhl-story-page-r197 {
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
.mhl-logbuch-fixed-root .mhl-story-page-r197 p {
margin:
0 0 15px 0 !important;
}
.mhl-logbuch-fixed-root .mhl-story-page-r197 p:last-child {
margin-bottom: 0 !important;
}
/* ------------------------------------------------------------
SEITENSTEUERUNG
IMMER INNERHALB DER RECHTEN BUCHSEITE
------------------------------------------------------------ */
.mhl-logbuch-fixed-root .mhl-story-pager-r197 {
position: relative !important;
flex: 0 0 auto !important;
width: 100% !important;
min-height: 46px !important;
margin: 16px 0 0 0 !important;
padding: 8px 0 0 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 18px !important;
border-top:
1px solid rgba(72,45,22,.22) !important;
}
.mhl-logbuch-fixed-root .mhl-story-pager-r197 button {
position: relative !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
padding: 0 !important;
border: 1px solid rgba(66,46,25,.35) !important;
border-radius: 50% !important;
background: rgba(43,88,117,.92) !important;
color: #fff !important;
font-size: 24px !important;
line-height: 36px !important;
cursor: pointer !important;
box-shadow: 0 2px 5px rgba(0,0,0,.18) !important;
}
.mhl-logbuch-fixed-root .mhl-story-pager-r197 button:hover {
background: rgba(30,105,143,.98) !important;
transform: none !important;
border-radius: 50% !important;
}
.mhl-logbuch-fixed-root .mhl-story-pager-r197 button:disabled {
opacity: .30 !important;
cursor: default !important;
}
.mhl-logbuch-fixed-root .mhl-story-pager-r197 span {
min-width: 105px !important;
text-align: center !important;
color: #3b291b !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: 14px !important;
}
/* ------------------------------------------------------------
BLAUER TINTENKLECKS
------------------------------------------------------------ */
.mhl-logbuch-fixed-root [data-logbook-day].is-active,
.mhl-logbuch-fixed-root .mhl-calendar-day-r197.is-active {
position: relative !important;
background:
#245f8f !important;
color: #fff !important;
border-color: transparent !important;
border-radius: 50% 42% 55% 46% !important;
box-shadow:
5px 2px 0 rgba(36,95,143,.22),
-3px -2px 0 rgba(36,95,143,.18),
2px 5px 0 rgba(36,95,143,.15) !important;
transform: rotate(-2deg) !important;
}
.mhl-logbuch-fixed-root [data-logbook-day].is-active:hover,
.mhl-logbuch-fixed-root .mhl-calendar-day-r197.is-active:hover {
background: #245f8f !important;
border-radius: 50% 42% 55% 46% !important;
transform: rotate(-2deg) !important;
}
/* Kein Hover-Quadrat bei Tagen */
.mhl-logbuch-fixed-root [data-logbook-day]:hover {
border-radius: 12px !important;
}
.mhl-logbuch-fixed-root [data-logbook-day].is-active:hover {
border-radius: 50% 42% 55% 46% !important;
}
/* ------------------------------------------------------------
GESPERRTE JAHRE / TAGE
------------------------------------------------------------ */
.mhl-logbuch-fixed-root [data-logbook-year].is-locked,
.mhl-logbuch-fixed-root [data-logbook-year]:disabled {
opacity: .52 !important;
cursor: not-allowed !important;
}
.mhl-logbuch-fixed-root [data-logbook-day].is-locked,
.mhl-logbuch-fixed-root [data-logbook-day]:disabled {
opacity: .30 !important;
cursor: not-allowed !important;
}
/* ------------------------------------------------------------
FUTURE-POPUP
------------------------------------------------------------ */
.mhl-logbuch-fixed-root .mhl-logbuch-future-notice {
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
background: rgba(0,0,0,.48) !important;
}
.mhl-logbuch-fixed-root .mhl-logbuch-future-card {
position: relative !important;
width: min(430px, calc(100vw - 40px)) !important;
padding: 30px 32px 26px 32px !important;
border-radius: 16px !important;
background: #f2dfb6 !important;
color: #33251a !important;
box-shadow: 0 18px 50px rgba(0,0,0,.4) !important;
text-align: center !important;
}
.mhl-logbuch-fixed-root .mhl-logbuch-future-card strong {
display: block !important;
margin-bottom: 12px !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: 24px !important;
}
.mhl-logbuch-fixed-root .mhl-logbuch-future-card span {
display: block !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
line-height: 1.55 !important;
}
.mhl-logbuch-fixed-root .mhl-logbuch-future-close {
position: absolute !important;
top: 8px !important;
right: 10px !important;
width: 32px !important;
height: 32px !important;
border: 0 !important;
background: transparent !important;
color: #49311f !important;
font-size: 25px !important;
cursor: pointer !important;
}
/* ------------------------------------------------------------
MOBILE
------------------------------------------------------------ */
@media (max-width: 900px) {
.mhl-logbuch-fixed-root {
width: calc(100vw - 20px) !important;
height: auto !important;
min-height: 0 !important;
margin: 12px auto 24px auto !important;
display: block !important;
background-size: 100% 100% !important;
padding-bottom: 20px !important;
}
.mhl-logbuch-fixed-root .mhl-story-r197,
.mhl-logbuch-fixed-root [data-logbook-story] {
height: auto !important;
min-height: 600px !important;
padding:
55px 45px 35px 45px !important;
}
.mhl-logbuch-fixed-root .mhl-story-pages-r197 {
min-height: 330px !important;
}
.mhl-logbuch-fixed-root .mhl-story-page-r197 {
height: 330px !important;
}
.mhl-logbuch-fixed-root .mhl-story-r197 img,
.mhl-logbuch-fixed-root [data-logbook-story-image] {
width: 150px !important;
max-width: 150px !important;
max-height: 105px !important;
}
}
@media (max-width: 600px) {
.mhl-logbuch-fixed-root {
width: calc(100vw - 12px) !important;
margin: 8px auto 16px auto !important;
background-image: none !important;
background:
linear-gradient(
135deg,
#ead4a5,
#f4e5c4 48%,
#e5c995
) !important;
border-radius: 12px !important;
box-shadow:
0 8px 30px rgba(0,0,0,.28) !important;
}
.mhl-logbuch-fixed-root .mhl-story-r197,
.mhl-logbuch-fixed-root [data-logbook-story] {
min-height: 0 !important;
padding:
30px 24px 25px 24px !important;
}
.mhl-logbuch-fixed-root .mhl-story-pages-r197 {
min-height: 390px !important;
}
.mhl-logbuch-fixed-root .mhl-story-page-r197 {
height: 390px !important;
}
.mhl-logbuch-fixed-root .mhl-story-r197 p {
font-size: 15px !important;
line-height: 1.55 !important;
}
.mhl-logbuch-fixed-root .mhl-story-r197 img,
.mhl-logbuch-fixed-root [data-logbook-story-image] {
width: 120px !important;
max-width: 120px !important;
}
}
/* ============================================================
MHL LOGBUCH OPENBOOK LAYOUT
Vorhandene WebP als Buchgrafik.
Alles bleibt innerhalb des sichtbaren Buches.
============================================================ */
html.mhl-logbuch-production-v21 body {
background:
linear-gradient(rgba(12,18,24,.46), rgba(12,18,24,.46)),
none center top / cover fixed no-repeat !important;
}
/* Das Buch selbst */
.mhl-captains-logbook-r197,
.mhl-book-r197 {
width: min(1100px, calc(100vw - 32px)) !important;
max-width: 1100px !important;
height: auto !important;
min-height: 0 !important;
margin: 30px auto 35px !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
position: relative !important;
background: transparent none center center / 100% 100% no-repeat !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Linke Seite */
.mhl-calendar-r197 {
min-height: 620px !important;
height: auto !important;
padding: 42px 42px 72px 52px !important;
position: relative !important;
z-index: 2 !important;
}
/* Rechte Seite */
.mhl-story-r197 {
min-height: 620px !important;
height: auto !important;
max-height: none !important;
padding: 42px 48px 48px 44px !important;
position: relative !important;
z-index: 3 !important;
display: flex !important;
flex-direction: column !important;
overflow: visible !important;
}
/* Bilder vollständig entfernen */
.mhl-story-r197 img,
.mhl-story-r197 figure,
.mhl-story-r197 picture,
.mhl-story-r197 .mhl-story-image,
.mhl-story-r197 [data-logbook-image],
.mhl-story-r197 [data-logbook-gallery] {
display: none !important;
}
/* Weitere Details vollständig entfernen */
.mhl-story-r197 [data-logbook-details],
.mhl-logbuch-details,
.mhl-story-details,
.mhl-logbuch-more,
.mhl-captains-logbook-r197 details,
.mhl-captains-logbook-r197 .mhl-details-r197 {
display: none !important;
}
/* Kein Abschneiden */
.mhl-story-r197,
.mhl-story-r197 > *,
.mhl-story-r197 [data-logbook-visible-paragraphs],
.mhl-story-r197 .mhl-story-body,
.mhl-story-r197 .mhl-story-content,
.mhl-story-r197 article {
overflow: visible !important;
max-height: none !important;
height: auto !important;
}
/* Lesbarer Buchtext */
.mhl-story-r197 p {
margin: 0 0 15px !important;
color: #33271d !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: clamp(16px, 1.12vw, 18px) !important;
line-height: 1.43 !important;
font-style: normal !important;
}
/* Blättern am unteren Ende der rechten Buchseite */
.mhl-logbook-pager-r197 {
width: 100% !important;
margin-top: auto !important;
padding-top: 14px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 18px !important;
flex: 0 0 auto !important;
position: relative !important;
z-index: 50 !important;
}
.mhl-logbook-pager-r197 button {
width: 46px !important;
height: 40px !important;
min-width: 46px !important;
border: 1px solid rgba(75,49,25,.35) !important;
border-radius: 11px !important;
background: rgba(221,190,139,.95) !important;
color: #33271d !important;
font: 700 22px/1 Georgia, "Times New Roman", serif !important;
cursor: pointer !important;
}
.mhl-logbook-pager-r197 button:hover {
background: rgba(205,171,116,.98) !important;
transform: translateY(-1px) !important;
}
.mhl-logbook-pager-r197 button:disabled {
opacity: .35 !important;
cursor: default !important;
transform: none !important;
}
.mhl-logbook-page-label {
min-width: 100px !important;
text-align: center !important;
color: #33271d !important;
font: 600 14px/1.2 Georgia, "Times New Roman", serif !important;
}
/* Blauer Tintenklecks – Hover bleibt ebenfalls ein Klecks */
.mhl-captains-logbook-r197 [data-logbook-day].is-active,
.mhl-captains-logbook-r197 [data-logbook-day][aria-current="date"] {
position: relative !important;
background: transparent !important;
border: 0 !important;
color: #fff !important;
box-shadow: none !important;
}
.mhl-captains-logbook-r197 [data-logbook-day].is-active::before,
.mhl-captains-logbook-r197 [data-logbook-day][aria-current="date"]::before {
content: "" !important;
position: absolute !important;
inset: -8px -10px !important;
z-index: -1 !important;
background: #1459a8 !important;
border-radius: 48% 52% 43% 57% / 56% 44% 58% 42% !important;
transform: rotate(-5deg) !important;
box-shadow:
7px 3px 0 -5px #1459a8,
-6px 5px 0 -5px #1459a8,
4px -6px 0 -5px #1459a8 !important;
}
.mhl-captains-logbook-r197 [data-logbook-day].is-active:hover,
.mhl-captains-logbook-r197 [data-logbook-day][aria-current="date"]:hover {
background: transparent !important;
box-shadow: none !important;
}
/* Responsive */
@media (max-width: 900px) {
.mhl-captains-logbook-r197,
.mhl-book-r197 {
width: min(760px, calc(100vw - 18px)) !important;
grid-template-columns: 1fr !important;
}
.mhl-calendar-r197,
.mhl-story-r197 {
min-height: 0 !important;
padding: 30px 32px 44px !important;
}
.mhl-story-r197 {
border-top: 1px solid rgba(77,51,29,.22) !important;
}
}
@media (max-width: 560px) {
.mhl-captains-logbook-r197,
.mhl-book-r197 {
width: calc(100vw - 10px) !important;
margin: 10px auto 20px !important;
}
.mhl-calendar-r197,
.mhl-story-r197 {
padding: 24px 20px 36px !important;
}
.mhl-story-r197 p {
font-size: 16px !important;
line-height: 1.43 !important;
}
}
/* ============================================================
MHL LOGBUCH SAUBERE OPENBOOK-REPARATUR
Vorhandene WebP = Buchgrafik.
HTML-Inhalt = innerhalb der beiden Papierseiten.
============================================================ */
.mhl-captains-logbook-r197,
.mhl-book-r197 {
box-sizing: border-box !important;
width: min(1200px, calc(100vw - 32px)) !important;
max-width: 1200px !important;
/* Die vorhandene WebP ist 1536 x 1024 = 3:2. */
aspect-ratio: 3 / 2 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 28px auto 34px !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
position: relative !important;
isolation: isolate !important;
background-image: none !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
.mhl-calendar-r197,
.mhl-story-r197 {
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 100% !important;
position: relative !important;
z-index: 2 !important;
}
.mhl-calendar-r197 {
padding:
clamp(52px, 5.5vw, 72px)
clamp(42px, 4.3vw, 58px)
clamp(54px, 5vw, 68px)
clamp(54px, 4.7vw, 68px) !important;
overflow: hidden !important;
}
.mhl-story-r197 {
padding:
clamp(48px, 5vw, 68px)
clamp(50px, 4.5vw, 62px)
clamp(42px, 4vw, 56px)
clamp(50px, 4.2vw, 60px) !important;
display: grid !important;
grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
align-content: stretch !important;
overflow: hidden !important;
}
.mhl-story-r197 img,
.mhl-story-r197 figure,
.mhl-story-r197 picture,
.mhl-story-r197 video,
.mhl-story-r197 canvas,
.mhl-story-r197 .mhl-story-image,
.mhl-story-r197 [data-logbook-image],
.mhl-story-r197 [data-logbook-gallery] {
display: none !important;
}
.mhl-story-r197 details,
.mhl-story-r197 [data-logbook-details],
.mhl-logbuch-details,
.mhl-story-details,
.mhl-logbuch-more,
.mhl-captains-logbook-r197 .mhl-details-r197 {
display: none !important;
}
.mhl-story-r197 [data-logbook-story-meta] {
display: block !important;
margin: 0 0 10px !important;
color: #4b3826 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: clamp(11px, .9vw, 13px) !important;
line-height: 1.35 !important;
}
.mhl-story-r197 [data-logbook-story-title] {
display: block !important;
margin: 0 0 7px !important;
color: #2d2117 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: clamp(25px, 2.25vw, 36px) !important;
line-height: 1.08 !important;
font-weight: 700 !important;
}
.mhl-story-r197 [data-logbook-story-subtitle] {
display: block !important;
margin: 0 0 15px !important;
color: #493726 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: clamp(13px, 1.05vw, 16px) !important;
line-height: 1.35 !important;
font-style: italic !important;
}
.mhl-story-r197 [data-logbook-visible-paragraphs],
.mhl-story-r197 .mhl-story-body {
box-sizing: border-box !important;
min-height: 0 !important;
max-height: 100% !important;
height: auto !important;
overflow: hidden !important;
padding: 0 2px 0 0 !important;
margin: 0 !important;
}
.mhl-story-r197 [data-logbook-visible-paragraphs] p,
.mhl-story-r197 .mhl-story-body p {
box-sizing: border-box !important;
margin: 0 0 13px !important;
color: #332519 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: clamp(14px, 1.02vw, 17px) !important;
line-height: 1.42 !important;
font-style: normal !important;
font-weight: 400 !important;
}
.mhl-logbook-pager-r197 {
box-sizing: border-box !important;
width: 100% !important;
min-height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
margin: 8px 0 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 20 !important;
}
.mhl-logbook-pager-r197 button {
box-sizing: border-box !important;
width: 42px !important;
height: 36px !important;
min-width: 42px !important;
padding: 0 !important;
border: 1px solid rgba(82, 57, 31, .42) !important;
border-radius: 10px !important;
background: rgba(224, 193, 143, .96) !important;
color: #302216 !important;
font: 700 22px/1 Georgia, "Times New Roman", serif !important;
cursor: pointer !important;
box-shadow: 0 1px 3px rgba(52, 34, 18, .18) !important;
}
.mhl-logbook-pager-r197 button:hover {
background: rgba(211, 177, 122, .98) !important;
transform: none !important;
}
.mhl-logbook-pager-r197 button:disabled {
opacity: .28 !important;
cursor: default !important;
}
.mhl-logbook-page-label {
min-width: 94px !important;
text-align: center !important;
color: #3c2d20 !important;
font: 600 13px/1.2 Georgia, "Times New Roman", serif !important;
}
.mhl-calendar-r197 [data-logbook-day] {
position: relative !important;
z-index: 1 !important;
}
.mhl-calendar-r197 [data-logbook-day].is-active,
.mhl-calendar-r197 [data-logbook-day][aria-current="date"] {
position: relative !important;
z-index: 3 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #fff !important;
}
.mhl-calendar-r197 [data-logbook-day].is-active::before,
.mhl-calendar-r197 [data-logbook-day][aria-current="date"]::before {
content: "" !important;
position: absolute !important;
z-index: -1 !important;
left: 50% !important;
top: 50% !important;
width: 44px !important;
height: 38px !important;
transform: translate(-50%, -50%) rotate(-7deg) !important;
background:
radial-gradient(circle at 30% 35%, rgba(255,255,255,.08) 0 2px, transparent 3px),
#155da8 !important;
border-radius: 48% 52% 42% 58% / 56% 44% 58% 42% !important;
box-shadow:
8px -3px 0 -5px #155da8,
-7px 5px 0 -5px #155da8,
5px 7px 0 -6px #155da8,
-4px -7px 0 -7px #155da8 !important;
}
.mhl-calendar-r197 [data-logbook-day].is-active:hover,
.mhl-calendar-r197 [data-logbook-day][aria-current="date"]:hover {
background: transparent !important;
box-shadow: none !important;
}
.mhl-calendar-r197 [data-logbook-day].is-active:hover::before,
.mhl-calendar-r197 [data-logbook-day][aria-current="date"]:hover::before {
background:
radial-gradient(circle at 30% 35%, rgba(255,255,255,.08) 0 2px, transparent 3px),
#155da8 !important;
}
.mhl-calendar-r197 [data-logbook-year][data-logbook-future],
.mhl-calendar-r197 [data-logbook-year][aria-disabled="true"] {
opacity: .42 !important;
cursor: not-allowed !important;
}
@media (max-width: 900px) {
.mhl-captains-logbook-r197,
.mhl-book-r197 {
width: calc(100vw - 20px) !important;
margin: 18px auto 24px !important;
}
.mhl-calendar-r197 {
padding: 42px 30px 46px 38px !important;
}
.mhl-story-r197 {
padding: 40px 34px 40px 34px !important;
}
.mhl-story-r197 [data-logbook-visible-paragraphs] p,
.mhl-story-r197 .mhl-story-body p {
font-size: 14px !important;
line-height: 1.38 !important;
margin-bottom: 10px !important;
}
}
@media (max-width: 680px) {
.mhl-captains-logbook-r197,
.mhl-book-r197 {
width: calc(100vw - 16px) !important;
aspect-ratio: auto !important;
display: block !important;
background-image: none !important;
background: #ead9b8 !important;
border: 1px solid rgba(78, 52, 29, .42) !important;
border-radius: 16px !important;
box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
overflow: visible !important;
}
.mhl-calendar-r197,
.mhl-story-r197 {
width: 100% !important;
min-height: 0 !important;
overflow: visible !important;
display: block !important;
padding: 28px 24px 30px !important;
}
.mhl-story-r197 {
border-top: 1px solid rgba(82, 55, 30, .25) !important;
}
.mhl-story-r197 [data-logbook-visible-paragraphs],
.mhl-story-r197 .mhl-story-body {
max-height: none !important;
overflow: visible !important;
}
.mhl-logbook-pager-r197 {
margin-top: 18px !important;
}
}
/* ============================================================
MHL LOGBUCH – OPENBOOK VORLAGE
Vorhandene WebP = Buchgrafik.
Kalender links.
Text rechts.
Pager unten rechts innerhalb der Buchseite.
============================================================ */
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
width: 100% !important;
margin: 0 !important;
padding: 20px 0 30px !important;
box-sizing: border-box !important;
position: relative !important;
overflow: visible !important;
}
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197 {
width: min(1220px, calc(100vw - 36px)) !important;
margin: 0 auto !important;
position: relative !important;
}
html.mhl-logbuch-page-r197 .mhl-book-r197 {
width: 100% !important;
aspect-ratio: 3 / 2 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
display: block !important;
background: transparent none center center / 100% 100% no-repeat !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
html.mhl-logbuch-page-r197 .mhl-book-page-r197 {
position: absolute !important;
top: 8.5% !important;
bottom: 7.5% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html.mhl-logbuch-page-r197 .mhl-book-page-r197--left {
left: 6.0% !important;
width: 43.2% !important;
}
html.mhl-logbuch-page-r197 .mhl-book-page-r197--right {
right: 6.0% !important;
width: 43.2% !important;
}
/* ---------------- LEFT: Kopf ---------------- */
html.mhl-logbuch-page-r197 .mhl-book-head-r197 {
position: absolute !important;
left: 4.5% !important;
right: 4.5% !important;
top: 3.5% !important;
height: 27% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
html.mhl-logbuch-page-r197 .mhl-book-head-r197 .mhl-label-r197 {
margin: 0 0 7px !important;
color: #087da7 !important;
font: 800 clamp(9px, .85vw, 13px)/1.1 Arial, sans-serif !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
}
html.mhl-logbuch-page-r197 .mhl-book-head-r197 h1 {
margin: 0 0 9px !important;
color: #2b2119 !important;
font: 800 clamp(24px, 2.25vw, 38px)/.98 Georgia, "Times New Roman", serif !important;
}
html.mhl-logbuch-page-r197 .mhl-book-head-r197 > p:last-child {
margin: 0 !important;
color: #4b3a2b !important;
font: 400 clamp(10px, .88vw, 14px)/1.28 Georgia, "Times New Roman", serif !important;
}
/* ---------------- LEFT: Jahre ---------------- */
html.mhl-logbuch-page-r197 .mhl-yearbar-r197 {
position: absolute !important;
left: 4.5% !important;
right: 4.5% !important;
top: 31.5% !important;
height: 8% !important;
display: flex !important;
align-items: center !important;
gap: clamp(6px, .7vw, 11px) !important;
margin: 0 !important;
padding: 0 !important;
}
html.mhl-logbuch-page-r197 .mhl-yearbar-r197 button {
height: clamp(30px, 3vw, 43px) !important;
min-width: clamp(50px, 4.4vw, 70px) !important;
padding: 0 10px !important;
border-radius: 999px !important;
border: 0 !important;
font: 800 clamp(10px, .82vw, 14px)/1 Georgia, serif !important;
cursor: pointer !important;
}
html.mhl-logbuch-page-r197 .mhl-yearbar-r197 .mhl-year-r197 {
background: rgba(125, 157, 164, .72) !important;
color: #31515b !important;
}
html.mhl-logbuch-page-r197 .mhl-yearbar-r197 .mhl-year-r197.is-active {
background: #1687b2 !important;
color: #fff !important;
}
html.mhl-logbuch-page-r197 .mhl-yearbar-r197 .mhl-year-r197:disabled {
opacity: .48 !important;
cursor: not-allowed !important;
}
html.mhl-logbuch-page-r197 .mhl-today-r197 {
margin-left: auto !important;
background: transparent !important;
border: 1px solid #1687b2 !important;
color: #15556e !important;
}
/* ---------------- LEFT: Kalender ---------------- */
html.mhl-logbuch-page-r197 .mhl-calendar-r197 {
position: absolute !important;
left: 4.5% !important;
right: 4.5% !important;
top: 41.5% !important;
bottom: 2% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-bar-r197 {
display: grid !important;
grid-template-columns: 42px 1fr 42px !important;
align-items: center !important;
gap: 8px !important;
height: 46px !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-bar-r197 button {
width: 42px !important;
height: 42px !important;
border: 0 !important;
border-radius: 11px !important;
background: #087fa8 !important;
color: #fff !important;
font: 800 20px/1 Georgia, serif !important;
cursor: pointer !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-bar-r197 button:disabled {
opacity: .35 !important;
cursor: default !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-bar-r197 strong {
text-align: center !important;
color: #39291d !important;
font: 800 clamp(13px, 1.05vw, 17px)/1 Georgia, serif !important;
}
html.mhl-logbuch-page-r197 .mhl-weekdays-r197 {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 5px !important;
margin: 4px 0 5px !important;
color: #493729 !important;
font: 800 clamp(8px, .7vw, 11px)/1 Georgia, serif !important;
text-align: center !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: clamp(4px, .4vw, 6px) !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button {
position: relative !important;
height: clamp(27px, 2.55vw, 39px) !important;
min-width: 0 !important;
border: 1px solid rgba(82,57,36,.20) !important;
border-radius: 11px !important;
background: rgba(247,231,202,.84) !important;
color: #2e241b !important;
font: 700 clamp(10px, .78vw, 13px)/1 Georgia, serif !important;
cursor: pointer !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button:disabled {
opacity: .40 !important;
cursor: not-allowed !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button.is-active,
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button[aria-current="date"] {
z-index: 2 !important;
color: #fff !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button.is-active::before,
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button[aria-current="date"]::before {
content: "" !important;
position: absolute !important;
z-index: -1 !important;
left: 50% !important;
top: 50% !important;
width: 94% !important;
height: 84% !important;
transform: translate(-50%, -50%) rotate(-6deg) !important;
background: #155da8 !important;
border-radius: 47% 53% 42% 58% / 55% 45% 57% 43% !important;
box-shadow:
7px -3px 0 -5px #155da8,
-7px 4px 0 -5px #155da8,
5px 7px 0 -6px #155da8,
-4px -6px 0 -7px #155da8 !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button.is-active:hover,
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button[aria-current="date"]:hover {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* ---------------- RIGHT: Story ---------------- */
html.mhl-logbuch-page-r197 .mhl-story-r197 {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 4.5% !important;
box-sizing: border-box !important;
display: block !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
html.mhl-logbuch-page-r197 .mhl-story-meta-r197 {
position: absolute !important;
left: 4.5% !important;
right: 4.5% !important;
top: 3.7% !important;
height: 4.5% !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
overflow: hidden !important;
white-space: nowrap !important;
color: #5a4633 !important;
font: 600 clamp(8px, .68vw, 11px)/1 Georgia, serif !important;
}
html.mhl-logbuch-page-r197 .mhl-story-r197 [data-logbook-title] {
position: absolute !important;
left: 4.5% !important;
right: 4.5% !important;
top: 9% !important;
height: 14% !important;
margin: 0 !important;
overflow: hidden !important;
color: #2b2018 !important;
font: 800 clamp(21px, 2.05vw, 34px)/1.05 Georgia, "Times New Roman", serif !important;
}
html.mhl-logbuch-page-r197 .mhl-story-subtitle-r197 {
position: absolute !important;
left: 4.5% !important;
right: 4.5% !important;
top: 23% !important;
height: 6% !important;
margin: 0 !important;
overflow: hidden !important;
color: #4b3929 !important;
font: italic 600 clamp(10px, .84vw, 14px)/1.22 Georgia, serif !important;
}
html.mhl-logbuch-page-r197 .mhl-story-main-r197,
html.mhl-logbuch-page-r197 .mhl-story-copy-r197 {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
html.mhl-logbuch-page-r197 .mhl-story-teaser-r197 {
display: none !important;
}
html.mhl-logbuch-page-r197 .mhl-story-visible-r197 {
position: absolute !important;
left: 4.5% !important;
right: 4.5% !important;
top: 30% !important;
bottom: 14% !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
color: #35271d !important;
}
html.mhl-logbuch-page-r197 .mhl-story-visible-r197 p {
margin: 0 0 13px !important;
padding: 0 !important;
color: #35271d !important;
font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive !important;
font-size: clamp(12px, 1.0vw, 16px) !important;
line-height: 1.40 !important;
font-weight: 500 !important;
}
html.mhl-logbuch-page-r197 .mhl-story-figure-r197,
html.mhl-logbuch-page-r197 .mhl-fold-r197,
html.mhl-logbuch-page-r197 .mhl-cutline-r197,
html.mhl-logbuch-page-r197 .mhl-story-r197 details {
display: none !important;
}
/* ---------------- Pager: fest auf der rechten Papierseite ---------------- */
html.mhl-logbuch-page-r197 .mhl-logbuch-pager-r197 {
position: absolute !important;
left: 4.5% !important;
right: 4.5% !important;
bottom: 3.0% !important;
height: 7% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 18px !important;
z-index: 50 !important;
}
html.mhl-logbuch-page-r197 .mhl-logbuch-pager-r197 button {
width: clamp(34px, 3.1vw, 47px) !important;
height: clamp(30px, 3.0vw, 43px) !important;
border: 1px solid rgba(92,62,35,.48) !important;
border-radius: 11px !important;
background: rgba(229,199,151,.96) !important;
color: #302117 !important;
font: 800 clamp(18px, 1.25vw, 22px)/1 Georgia, serif !important;
cursor: pointer !important;
}
html.mhl-logbuch-page-r197 .mhl-logbuch-pager-r197 button:disabled {
opacity: .30 !important;
cursor: default !important;
}
html.mhl-logbuch-page-r197 .mhl-logbuch-page-label {
min-width: 88px !important;
text-align: center !important;
color: #4a3727 !important;
font: 700 clamp(9px, .78vw, 13px)/1 Georgia, serif !important;
}
/* Kein Bild / kein Zusatzinhalt darf außerhalb der rechten Buchseite auftauchen. */
html.mhl-logbuch-page-r197 .mhl-story-figure-r197,
html.mhl-logbuch-page-r197 .mhl-story-extra-r197,
html.mhl-logbuch-page-r197 .mhl-fold-content-r197,
html.mhl-logbuch-page-r197 [data-logbook-thumb-strip] {
display: none !important;
}
/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197 {
width: calc(100vw - 18px) !important;
}
html.mhl-logbuch-page-r197 .mhl-book-r197 {
aspect-ratio: 3 / 2 !important;
}
html.mhl-logbuch-page-r197 .mhl-book-page-r197--left {
left: 6% !important;
width: 43.2% !important;
}
html.mhl-logbuch-page-r197 .mhl-book-page-r197--right {
right: 6% !important;
width: 43.2% !important;
}
html.mhl-logbuch-page-r197 .mhl-story-visible-r197 p {
font-size: clamp(9px, 1.65vw, 13px) !important;
line-height: 1.32 !important;
margin-bottom: 7px !important;
}
html.mhl-logbuch-page-r197 .mhl-book-head-r197 h1 {
font-size: clamp(17px, 3.6vw, 27px) !important;
}
html.mhl-logbuch-page-r197 .mhl-book-head-r197 > p:last-child {
font-size: clamp(7px, 1.45vw, 11px) !important;
}
html.mhl-logbuch-page-r197 .mhl-yearbar-r197 button {
min-width: 0 !important;
padding: 0 7px !important;
font-size: 8px !important;
}
html.mhl-logbuch-page-r197 .mhl-calendar-grid-r197 button {
height: clamp(19px, 4.0vw, 31px) !important;
font-size: clamp(7px, 1.55vw, 10px) !important;
}
}
@media (max-width: 560px) {
html.mhl-logbuch-page-r197 .mhl-logbook-shell-r197 {
width: calc(100vw - 6px) !important;
}
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
padding-top: 5px !important;
}
html.mhl-logbuch-page-r197 .mhl-story-visible-r197 p {
font-size: clamp(7px, 1.7vw, 10px) !important;
line-height: 1.27 !important;
}
}
/* ============================================================
MHL LOGBUCH – RECHTE BUCHSEITE + BLÄTTERN
Die vorhandene WebP ist ausschließlich die Buchgrafik.
============================================================ */
/* Buch */
html.mhl-logbook-page-r197 .mhl-book-r197 {
position: relative !important;
width: min(1280px, calc(100vw - 24px)) !important;
max-width: 1280px !important;
aspect-ratio: 1536 / 1024 !important;
height: auto !important;
min-height: 0 !important;
margin: 12px auto 28px !important;
padding: 0 !important;
display: block !important;
background: transparent none center center / 100% 100% no-repeat !important;
overflow: hidden !important;
border: 0 !important;
box-shadow: none !important;
}
/* Kalender direkt links auf dem Papier */
html.mhl-logbook-page-r197 .mhl-book-r197 > .mhl-calendar-r197 {
position: absolute !important;
left: 7.0% !important;
top: 10.0% !important;
width: 41.0% !important;
height: 78.0% !important;
padding: 0 4.5% !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
z-index: 10 !important;
}
/* Story direkt rechts auf dem Papier – NICHT mehr über dem linken Blatt */
html.mhl-logbook-page-r197 .mhl-book-r197 > .mhl-story-r197 {
position: absolute !important;
left: 51.8% !important;
right: 7.0% !important;
top: 10.0% !important;
bottom: 9.0% !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 4.5% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background: transparent !important;
z-index: 20 !important;
}
/* Falls Story innerhalb des rechten Papier-Wrappers liegt */
html.mhl-logbook-page-r197 .mhl-book-page-r197--right {
position: absolute !important;
left: 51.8% !important;
right: 7.0% !important;
top: 10.0% !important;
bottom: 9.0% !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html.mhl-logbook-page-r197 .mhl-book-page-r197--right .mhl-story-r197 {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 4.5% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* Rechte Story-Kopfzeilen */
html.mhl-logbook-page-r197 .mhl-story-r197 .mhl-story-meta-r197 {
position: relative !important;
inset: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
margin: 0 0 2% !important;
padding: 0 0 1.2% !important;
border-bottom: 1px solid rgba(75,55,35,.32) !important;
overflow: hidden !important;
white-space: nowrap !important;
color: #594735 !important;
font: 600 clamp(7px,.62vw,11px)/1.2 Georgia,"Times New Roman",serif !important;
}
html.mhl-logbook-page-r197 .mhl-story-r197 [data-logbook-title] {
position: relative !important;
inset: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
margin: 0 0 1.5% !important;
padding: 0 !important;
overflow: visible !important;
color: #2b1f17 !important;
font: 600 clamp(20px,2.0vw,35px)/1.05 "Segoe Print","Bradley Hand","URW Chancery L",cursive !important;
}
html.mhl-logbook-page-r197 .mhl-story-subtitle-r197 {
position: relative !important;
inset: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
margin: 0 0 2.5% !important;
padding: 0 !important;
overflow: visible !important;
color: #4a392b !important;
font: italic 600 clamp(9px,.82vw,14px)/1.3 Georgia,"Times New Roman",serif !important;
}
/* Nur dieser Bereich enthält den Text der jeweiligen Buchseite */
html.mhl-logbook-page-r197 .mhl-story-main-r197,
html.mhl-logbook-page-r197 .mhl-story-copy-r197 {
position: relative !important;
width: 100% !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
html.mhl-logbook-page-r197 .mhl-story-visible-r197 {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
html.mhl-logbook-page-r197 .mhl-story-visible-r197 p {
margin: 0 0 2.4% !important;
padding: 0 !important;
color: #302318 !important;
font-family: "Segoe Print","Bradley Hand","URW Chancery L",cursive !important;
font-size: clamp(10px,1.0vw,16px) !important;
line-height: 1.44 !important;
font-weight: 500 !important;
}
/* Keine Bilder und keine Zusatzdetails */
html.mhl-logbook-page-r197 .mhl-story-r197 img,
html.mhl-logbook-page-r197 .mhl-story-r197 figure,
html.mhl-logbook-page-r197 .mhl-story-r197 picture,
html.mhl-logbook-page-r197 .mhl-story-figure-r197,
html.mhl-logbook-page-r197 .mhl-story-extra-r197,
html.mhl-logbook-page-r197 .mhl-story-r197 details,
html.mhl-logbook-page-r197 [data-logbook-details] {
display: none !important;
}
/* Blauer Tintenklecks ohne Hover-Quadrat */
html.mhl-logbook-page-r197 .mhl-calendar-grid-r197 button.is-active,
html.mhl-logbook-page-r197 .mhl-calendar-grid-r197 button[aria-current="date"] {
position: relative !important;
background: transparent !important;
border: 0 !important;
color: #fff !important;
z-index: 2 !important;
box-shadow: none !important;
}
html.mhl-logbook-page-r197 .mhl-calendar-grid-r197 button.is-active::before,
html.mhl-logbook-page-r197 .mhl-calendar-grid-r197 button[aria-current="date"]::before {
content: "" !important;
position: absolute !important;
z-index: -1 !important;
inset: 7% !important;
border-radius: 47% 53% 58% 42% / 56% 43% 57% 44% !important;
transform: rotate(-7deg) !important;
background: #155da8 !important;
box-shadow:
4px -2px 0 #155da8,
-3px 2px 0 #155da8,
2px 4px 0 #155da8 !important;
}
html.mhl-logbook-page-r197 .mhl-calendar-grid-r197 button.is-active:hover,
html.mhl-logbook-page-r197 .mhl-calendar-grid-r197 button[aria-current="date"]:hover {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
html.mhl-logbook-page-r197 .mhl-calendar-grid-r197 button.is-active:hover::before,
html.mhl-logbook-page-r197 .mhl-calendar-grid-r197 button[aria-current="date"]:hover::before {
background: #155da8 !important;
}
/* Pager innerhalb der rechten Papierseite */
html.mhl-logbook-page-r197 .mhl-logbuch-pager-r197 {
position: relative !important;
inset: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
margin: 1.5% 0 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 14px !important;
z-index: 100 !important;
}
html.mhl-logbook-page-r197 .mhl-logbuch-pager-r197 button {
width: clamp(30px,3vw,44px) !important;
height: clamp(27px,2.7vw,41px) !important;
padding: 0 !important;
border: 1px solid rgba(92,62,35,.45) !important;
border-radius: 9px !important;
background: rgba(229,199,151,.96) !important;
color: #302117 !important;
font: 800 clamp(17px,1.2vw,21px)/1 Georgia,serif !important;
cursor: pointer !important;
}
html.mhl-logbook-page-r197 .mhl-logbuch-page-label {
min-width: 75px !important;
text-align: center !important;
color: #4a3727 !important;
font: 700 clamp(8px,.7vw,12px)/1 Georgia,serif !important;
}
/* ===== MOBILE: Buch proportional halten, Inhalt weiterhin auf seinen Blättern ===== */
@media (max-width: 900px) {
html.mhl-logbook-page-r197 .mhl-book-r197 {
width: calc(100vw - 8px) !important;
}
html.mhl-logbook-page-r197 .mhl-story-visible-r197 p {
font-size: clamp(8px,1.35vw,13px) !important;
line-height: 1.38 !important;
}
}
/* ============================================================
MHL LOGBUCH – RECHTE SEITE ENDGÜLTIG
============================================================ */
/*
* Das WebP ist die komplette Buchgrafik.
* Der Inhalt wird darübergelegt.
*/
html.mhl-logbook-page-r197 .mhl-book-r197 {
position: relative !important;
display: block !important;
width: min(1280px, calc(100vw - 24px)) !important;
max-width: 1280px !important;
aspect-ratio: 1536 / 1024 !important;
height: auto !important;
min-height: 0 !important;
margin: 12px auto 28px !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
box-shadow: none !important;
background:
transparent
none
center center
/ 100% 100%
no-repeat !important;
}
/* ============================================================
KALENDER – LINKES BLATT
============================================================ */
html.mhl-logbook-page-r197 .mhl-book-r197 .mhl-calendar-r197 {
position: absolute !important;
left: 7% !important;
top: 10% !important;
width: 40% !important;
height: 79% !important;
margin: 0 !important;
padding: 0 4% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
z-index: 30 !important;
}
/* ============================================================
STORY – RECHTES BLATT
============================================================ */
html.mhl-logbook-page-r197 .mhl-book-r197 > .mhl-story-r197 {
position: absolute !important;
left: 52% !important;
right: 6.5% !important;
top: 9.5% !important;
bottom: 8.5% !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 3.5% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background: transparent !important;
z-index: 40 !important;
}
/* ============================================================
STORY META
============================================================ */
html.mhl-logbook-page-r197 .mhl-story-r197 .mhl-story-meta-r197 {
position: relative !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
margin: 0 0 1.5% !important;
padding: 0 0 1% !important;
box-sizing: border-box !important;
border-bottom:
1px solid
rgba(75,55,35,.30) !important;
color: #594735 !important;
font:
600
clamp(8px, .65vw, 12px)
/ 1.2
Georgia,
"Times New Roman",
serif !important;
white-space: nowrap !important;
overflow: hidden !important;
}
/* ============================================================
STORY ÜBERSCHRIFT
============================================================ */
html.mhl-logbook-page-r197
.mhl-story-r197
[data-logbook-title] {
position: relative !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
margin: 0 0 1.5% !important;
padding: 0 !important;
box-sizing: border-box !important;
color: #2b1f17 !important;
font:
700
clamp(22px, 2vw, 36px)
/ 1.08
"Segoe Print",
"Bradley Hand",
"URW Chancery L",
cursive !important;
overflow: visible !important;
}
/* ============================================================
STORY UNTERTITEL
============================================================ */
html.mhl-logbook-page-r197
.mhl-story-r197
.mhl-story-subtitle-r197 {
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
margin: 0 0 2% !important;
padding: 0 !important;
color: #4a392b !important;
font:
italic
600
clamp(10px, .82vw, 15px)
/ 1.3
Georgia,
"Times New Roman",
serif !important;
}
/* ============================================================
TEXTBEREICH
============================================================ */
html.mhl-logbook-page-r197
.mhl-story-r197
.mhl-story-main-r197,
html.mhl-logbook-page-r197
.mhl-story-r197
.mhl-story-copy-r197,
html.mhl-logbook-page-r197
.mhl-story-r197
.mhl-story-visible-r197 {
position: relative !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* ============================================================
BUCHTEXT
============================================================ */
html.mhl-logbook-page-r197
.mhl-story-visible-r197 p {
display: block !important;
width: 100% !important;
margin: 0 0 2.8% !important;
padding: 0 !important;
box-sizing: border-box !important;
color: #302318 !important;
font-family:
"Segoe Print",
"Bradley Hand",
"URW Chancery L",
cursive !important;
font-size:
clamp(11px, 1vw, 16px) !important;
line-height: 1.42 !important;
font-weight: 500 !important;
}
/* ============================================================
BILDER RAUS
============================================================ */
html.mhl-logbook-page-r197
.mhl-story-r197 img,
html.mhl-logbook-page-r197
.mhl-story-r197 figure,
html.mhl-logbook-page-r197
.mhl-story-r197 picture,
html.mhl-logbook-page-r197
.mhl-story-r197 .mhl-story-figure-r197 {
display: none !important;
}
/* ============================================================
ZUSATZDETAILS RAUS
============================================================ */
html.mhl-logbook-page-r197
.mhl-story-r197
.mhl-story-extra-r197,
html.mhl-logbook-page-r197
.mhl-story-r197
details,
html.mhl-logbook-page-r197
[data-logbook-details] {
display: none !important;
}
/* ============================================================
PAGER – UNTEN AUF DEM RECHTEN BLATT
============================================================ */
html.mhl-logbook-page-r197
.mhl-story-r197
.mhl-logbuch-pager-r197 {
position: relative !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
margin: 1% 0 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 14px !important;
box-sizing: border-box !important;
z-index: 100 !important;
}
html.mhl-logbook-page-r197
.mhl-logbuch-pager-r197 button {
width:
clamp(32px, 3vw, 46px) !important;
height:
clamp(29px, 2.8vw, 42px) !important;
padding: 0 !important;
border:
1px solid
rgba(92,62,35,.45) !important;
border-radius: 9px !important;
background:
rgba(229,199,151,.96) !important;
color: #302117 !important;
font:
800
clamp(18px, 1.2vw, 22px)
/ 1
Georgia,
serif !important;
cursor: pointer !important;
}
html.mhl-logbook-page-r197
.mhl-logbuch-pager-r197 button:hover {
background:
rgba(229,199,151,.96) !important;
transform: none !important;
box-shadow: none !important;
}
html.mhl-logbook-page-r197
.mhl-logbuch-page-label {
min-width: 82px !important;
text-align: center !important;
color: #4a3727 !important;
font:
700
clamp(9px, .72vw, 13px)
/ 1
Georgia,
serif !important;
}
/* ============================================================
BLAUER TINTENKLECKS
============================================================ */
html.mhl-logbook-page-r197
.mhl-calendar-grid-r197
button.is-active,
html.mhl-logbook-page-r197
.mhl-calendar-grid-r197
button[aria-current="date"] {
position: relative !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
color: #fff !important;
z-index: 2 !important;
}
html.mhl-logbook-page-r197
.mhl-calendar-grid-r197
button.is-active::before,
html.mhl-logbook-page-r197
.mhl-calendar-grid-r197
button[aria-current="date"]::before {
content: "" !important;
position: absolute !important;
left: 4% !important;
right: 4% !important;
top: 4% !important;
bottom: 4% !important;
z-index: -1 !important;
border-radius:
48% 52% 57% 43%
/
55% 44% 56% 45% !important;
transform: rotate(-7deg) !important;
background: #155da8 !important;
box-shadow:
5px -3px 0 #155da8,
-4px 2px 0 #155da8,
2px 5px 0 #155da8,
-2px -5px 0 #155da8 !important;
}
/* Hover darf KEIN Quadrat erzeugen */
html.mhl-logbook-page-r197
.mhl-calendar-grid-r197
button.is-active:hover,
html.mhl-logbook-page-r197
.mhl-calendar-grid-r197
button[aria-current="date"]:hover {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
html.mhl-logbook-page-r197
.mhl-calendar-grid-r197
button.is-active:hover::before,
html.mhl-logbook-page-r197
.mhl-calendar-grid-r197
button[aria-current="date"]:hover::before {
background: #155da8 !important;
transform: rotate(-7deg) !important;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
html.mhl-logbook-page-r197
.mhl-book-r197 {
width:
calc(100vw - 8px) !important;
}
html.mhl-logbook-page-r197
.mhl-story-r197 {
left: 52% !important;
right: 5.5% !important;
top: 9.5% !important;
bottom: 8% !important;
padding-left: 2.5% !important;
padding-right: 2.5% !important;
}
html.mhl-logbook-page-r197
.mhl-story-visible-r197 p {
font-size:
clamp(8px, 1.3vw, 13px) !important;
line-height: 1.36 !important;
}
}
/* ============================================================
MHL LOGBUCH SAUBER FINAL
============================================================ */
html.mhl-logbuch-clean-final,
html.mhl-logbuch-clean-final body {
min-height: 100%;
}
html.mhl-logbuch-clean-final body {
overflow-x: hidden;
}
/*
* Äußere Logbuchfläche.
* Das WebP ist das eigentliche Buch.
*/
html.mhl-logbuch-clean-final .mhl-captains-logbook-r197,
html.mhl-logbuch-clean-final .mhl-logbuch-r197,
html.mhl-logbuch-clean-final [data-logbook-root] {
width: min(1100px, calc(100vw - 32px)) !important;
max-width: 1100px !important;
margin: 24px auto 40px auto !important;
position: relative !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
box-sizing: border-box !important;
/*
* Die Höhe richtet sich ausschließlich nach dem Seitenverhältnis
* des vorhandenen Buchbildes.
*/
aspect-ratio: 1536 / 1024 !important;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: grid !important;
/*
* Linke und rechte Buchseite.
*/
grid-template-columns: 50% 50% !important;
grid-template-rows: 100% !important;
}
/*
* Alte Hintergrundelemente komplett aus dem Logbuch entfernen.
*/
html.mhl-logbuch-clean-final .mhl-news-v25__background,
html.mhl-logbuch-clean-final .mhl-news-v25__overlay,
html.mhl-logbuch-clean-final .mhl-logbuch-background,
html.mhl-logbuch-clean-final .mhl-book-background {
display: none !important;
}
/*
* Alle direkten Buchseiten transparent machen.
*/
html.mhl-logbuch-clean-final .mhl-book-r197,
html.mhl-logbuch-clean-final .mhl-book-page,
html.mhl-logbuch-clean-final .mhl-book-page-left,
html.mhl-logbuch-clean-final .mhl-book-page-right {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/*
* Linke Seite.
*/
html.mhl-logbuch-clean-final .mhl-book-page-left,
html.mhl-logbuch-clean-final [data-logbook-left-page] {
grid-column: 1 !important;
grid-row: 1 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 8% 10% 9% 10% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/*
* Rechte Seite.
*/
html.mhl-logbuch-clean-final .mhl-book-page-right,
html.mhl-logbuch-clean-final [data-logbook-right-page] {
grid-column: 2 !important;
grid-row: 1 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 8% 10% 9% 10% !important;
box-sizing: border-box !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
/*
* Falls die vorhandene View keine expliziten Page-Klassen besitzt,
* wird die Story trotzdem auf die rechte Hälfte gezwungen.
*/
html.mhl-logbuch-clean-final .mhl-story-r197 {
grid-column: 2 !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
/*
* Story-Inhalt selbst.
*/
html.mhl-logbuch-clean-final .mhl-story-r197 > * {
box-sizing: border-box !important;
max-width: 100% !important;
}
/*
* Überschrift.
*/
html.mhl-logbuch-clean-final .mhl-story-r197 h1,
html.mhl-logbuch-clean-final .mhl-story-r197 h2,
html.mhl-logbuch-clean-final .mhl-story-r197 h3 {
font-family: Georgia, "Times New Roman", serif !important;
color: #24170f !important;
text-shadow: none !important;
overflow-wrap: normal !important;
word-break: normal !important;
margin-top: 0 !important;
}
/*
* Fließtext:
* lesbare Buchschrift, keine Schreibschrift mehr.
*/
html.mhl-logbuch-clean-final .mhl-story-r197 p {
font-family: Georgia, "Times New Roman", serif !important;
color: #2b1b12 !important;
font-size: clamp(13px, 1.15vw, 17px) !important;
line-height: 1.55 !important;
margin: 0 0 0.8em 0 !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/*
* Metadaten.
*/
html.mhl-logbuch-clean-final .mhl-story-r197 small,
html.mhl-logbuch-clean-final .mhl-story-r197 .meta,
html.mhl-logbuch-clean-final .mhl-story-r197 .mhl-story-meta {
font-family: Georgia, "Times New Roman", serif !important;
color: #4a3527 !important;
}
/*
* Bilder innerhalb der Geschichte:
* ausdrücklich raus.
*/
html.mhl-logbuch-clean-final .mhl-story-r197 img,
html.mhl-logbuch-clean-final .mhl-story-r197 figure,
html.mhl-logbuch-clean-final .mhl-story-r197 picture,
html.mhl-logbuch-clean-final .mhl-story-r197 .gallery,
html.mhl-logbuch-clean-final .mhl-story-r197 .mhl-gallery,
html.mhl-logbuch-clean-final .mhl-story-r197 [data-gallery] {
display: none !important;
}
/*
* Weitere Logbuchdetails:
* ausdrücklich raus.
*/
html.mhl-logbuch-clean-final .mhl-story-details,
html.mhl-logbuch-clean-final .mhl-logbook-details,
html.mhl-logbuch-clean-final [data-logbook-details],
html.mhl-logbuch-clean-final [data-logbuch-more],
html.mhl-logbuch-clean-final details {
display: none !important;
}
/*
* Pagination innerhalb der rechten Buchseite.
*/
html.mhl-logbuch-clean-final .mhl-book-pager-final {
margin-top: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 18px !important;
padding: 8px 0 0 0 !important;
box-sizing: border-box !important;
}
/*
* Blätter-Pfeile.
*/
html.mhl-logbuch-clean-final .mhl-book-pager-final button {
width: 46px !important;
height: 38px !important;
min-width: 46px !important;
min-height: 38px !important;
border-radius: 9px !important;
border: 1px solid rgba(92, 59, 28, .55) !important;
background: rgba(226, 193, 142, .92) !important;
color: #2b1b12 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 23px !important;
font-weight: bold !important;
cursor: pointer !important;
box-shadow:
0 2px 5px rgba(45, 25, 10, .25) !important;
transition:
transform .12s ease,
background .12s ease !important;
}
html.mhl-logbuch-clean-final .mhl-book-pager-final button:hover {
/*
* Kein Quadrat/keine eckige Hover-Markierung.
*/
background: rgba(239, 211, 167, .98) !important;
transform: translateY(-1px) !important;
}
html.mhl-logbuch-clean-final .mhl-book-pager-final button:disabled {
opacity: .35 !important;
cursor: default !important;
transform: none !important;
}
html.mhl-logbuch-clean-final .mhl-book-pager-final span {
min-width: 92px !important;
text-align: center !important;
color: #38251a !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 14px !important;
}
/*
* Kalender.
*/
html.mhl-logbuch-clean-final .mhl-calendar-r197,
html.mhl-logbuch-clean-final [data-logbook-calendar] {
width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/*
* Kalendertage.
*/
html.mhl-logbuch-clean-final .mhl-day-r197,
html.mhl-logbuch-clean-final [data-logbook-day] {
position: relative !important;
box-sizing: border-box !important;
border: 0 !important;
background: transparent !important;
color: #2d2118 !important;
box-shadow: none !important;
border-radius: 50% !important;
transition: none !important;
}
/*
* Aktiver Tag = blauer Tintenklecks.
*/
html.mhl-logbuch-clean-final .mhl-day-r197.is-active,
html.mhl-logbuch-clean-final .mhl-day-r197[aria-current="date"],
html.mhl-logbuch-clean-final [data-logbook-day].is-active {
background:
radial-gradient(
ellipse at center,
rgba(17, 91, 166, .96) 0%,
rgba(17, 91, 166, .90) 48%,
rgba(17, 91, 166, .70) 68%,
rgba(17, 91, 166, 0) 72%
) !important;
color: white !important;
border-radius: 47% 53% 51% 49% / 55% 46% 54% 45% !important;
transform: rotate(-4deg) scale(1.05) !important;
text-shadow: 0 1px 1px rgba(0,0,0,.25) !important;
}
/*
* Wichtig:
* Hover darf den Tintenklecks NICHT in ein Quadrat verwandeln.
*/
html.mhl-logbuch-clean-final .mhl-day-r197:hover,
html.mhl-logbuch-clean-final .mhl-day-r197.is-active:hover,
html.mhl-logbuch-clean-final [data-logbook-day]:hover {
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
outline: none !important;
}
html.mhl-logbuch-clean-final .mhl-day-r197.is-active:hover,
html.mhl-logbuch-clean-final [data-logbook-day].is-active:hover {
background:
radial-gradient(
ellipse at center,
rgba(17, 91, 166, .96) 0%,
rgba(17, 91, 166, .90) 48%,
rgba(17, 91, 166, .70) 68%,
rgba(17, 91, 166, 0) 72%
) !important;
}
/*
* Zukunftsjahre.
*/
html.mhl-logbuch-clean-final
.mhl-year-r197[data-logbook-year="2027"],
html.mhl-logbuch-clean-final
.mhl-year-r197[data-logbook-year="2028"] {
opacity: .55 !important;
cursor: not-allowed !important;
}
/*
* Mobile.
*/
@media (max-width: 760px) {
html.mhl-logbuch-clean-final
.mhl-captains-logbook-r197,
html.mhl-logbuch-clean-final
.mhl-logbuch-r197,
html.mhl-logbuch-clean-final
[data-logbook-root] {
width: calc(100vw - 12px) !important;
margin: 8px auto 20px auto !important;
aspect-ratio: 1536 / 1024 !important;
}
html.mhl-logbuch-clean-final
.mhl-book-page-left,
html.mhl-logbuch-clean-final
[data-logbook-left-page] {
padding: 8% 8% 8% 8% !important;
}
html.mhl-logbuch-clean-final
.mhl-book-page-right,
html.mhl-logbuch-clean-final
[data-logbook-right-page] {
padding: 8% 8% 8% 8% !important;
}
html.mhl-logbuch-clean-final .mhl-story-r197 p {
font-size: clamp(9px, 2.15vw, 13px) !important;
line-height: 1.42 !important;
}
html.mhl-logbuch-clean-final .mhl-story-r197 h1,
html.mhl-logbuch-clean-final .mhl-story-r197 h2 {
font-size: clamp(15px, 4vw, 25px) !important;
line-height: 1.1 !important;
}
html.mhl-logbuch-clean-final .mhl-book-pager-final {
gap: 8px !important;
}
html.mhl-logbuch-clean-final .mhl-book-pager-final button {
width: 36px !important;
height: 32px !important;
min-width: 36px !important;
min-height: 32px !important;
font-size: 19px !important;
}
}
/* ============================================================
MHL LOGBUCH ENDGÜLTIG – OPENBOOK LAYOUT
============================================================ */
html:has([data-logbook-root]),
body:has([data-logbook-root]) {
overflow-x: hidden !important;
}
/* Alte Seiten-/Küsten-Hintergründe deaktivieren */
html:has([data-logbook-root]),
html:has([data-logbook-root]) body {
background-image: none !important;
}
html:has([data-logbook-root]) body::before,
html:has([data-logbook-root]) body::after {
background-image: none !important;
}
/* Hauptbereich */
[data-logbook-root] {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: clamp(18px, 3vw, 42px) 16px 80px !important;
box-sizing: border-box !important;
}
/* Das Buch */
[data-logbook-root] .mhl-book-r197,
[data-logbook-root] .mhl-captains-logbook-r197 {
position: relative !important;
width: min(1180px, 94vw) !important;
max-width: 1180px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
aspect-ratio: 1536 / 1024 !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
display: grid !important;
grid-template-columns: 50% 50% !important;
align-items: stretch !important;
}
/*
* Die beiden Buchseiten bilden exakt die zwei Hälften
* des vorhandenen WebP.
*/
[data-logbook-root] .mhl-book-r197 > *,
[data-logbook-root] .mhl-captains-logbook-r197 > * {
box-sizing: border-box !important;
}
/* Linke Seite */
[data-logbook-root] .mhl-calendar-r197 {
grid-column: 1 !important;
grid-row: 1 !important;
position: relative !important;
width: 100% !important;
height: 100% !important;
padding:
clamp(7%, 5vw, 11%)
clamp(7%, 4vw, 10%)
clamp(7%, 4vw, 10%) !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Story IMMER rechte Buchseite */
[data-logbook-root] .mhl-story-r197 {
grid-column: 2 !important;
grid-row: 1 !important;
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding:
clamp(7%, 5vw, 10%)
clamp(7%, 4vw, 10%)
clamp(10%, 5vw, 12%) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
overflow: visible !important;
}
/* Alles, was bisher absolut positioniert war, zurücksetzen */
[data-logbook-root] .mhl-story-r197 > *,
[data-logbook-root] .mhl-story-r197 .mhl-story-content,
[data-logbook-root] .mhl-story-r197 [data-logbook-story],
[data-logbook-root] .mhl-story-r197 [data-logbook-visible-paragraphs] {
position: relative !important;
inset: auto !important;
transform: none !important;
}
/* Keine Artikelbilder */
[data-logbook-root] .mhl-story-r197 img,
[data-logbook-root] .mhl-story-r197 figure,
[data-logbook-root] .mhl-story-r197 picture,
[data-logbook-root] .mhl-story-r197 .mhl-story-image,
[data-logbook-root] .mhl-story-r197 .mhl-story-gallery {
display: none !important;
}
/* Artikelüberschrift */
[data-logbook-root] .mhl-story-r197 h1,
[data-logbook-root] .mhl-story-r197 h2,
[data-logbook-root] .mhl-story-r197 .mhl-story-title {
width: 100% !important;
max-width: 100% !important;
margin:
0 0
clamp(10px, 1.2vw, 18px) !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-weight: 700 !important;
line-height: 1.08 !important;
color: #302014 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
/* Untertitel / Metadaten */
[data-logbook-root] .mhl-story-r197 .mhl-story-subtitle,
[data-logbook-root] .mhl-story-r197 .mhl-story-meta,
[data-logbook-root] .mhl-story-r197 .mhl-story-location {
width: 100% !important;
max-width: 100% !important;
color: #4b3828 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
line-height: 1.35 !important;
}
/* Der eigentliche Tagebuchtext */
[data-logbook-root] .mhl-story-r197 p,
[data-logbook-root] .mhl-story-r197 .mhl-story-text {
width: 100% !important;
max-width: 100% !important;
margin:
0 0
clamp(10px, 1.1vw, 17px) !important;
color: #302014 !important;
/*
* Schreibschrift, aber bewusst lesbar.
* Wenn die Schrift nicht geladen wird, fällt sie
* automatisch auf Georgia zurück.
*/
font-family:
"Segoe Print",
"Bradley Hand",
"Comic Sans MS",
cursive !important;
font-size: clamp(14px, 1.15vw, 19px) !important;
line-height: 1.55 !important;
font-weight: 500 !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
overflow: visible !important;
}
/* Story-Seitenbereich */
[data-logbook-root] [data-logbook-story],
[data-logbook-root] [data-logbook-visible-paragraphs] {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 auto !important;
overflow: visible !important;
min-height: 0 !important;
max-height: none !important;
}
/* Keine künstliche Begrenzung */
[data-logbook-root] .mhl-story-r197,
[data-logbook-root] .mhl-story-r197 *,
[data-logbook-root] [data-logbook-story],
[data-logbook-root] [data-logbook-visible-paragraphs] {
max-height: none !important;
}
/* Blättersteuerung */
[data-logbook-root] .mhl-logbuch-pager,
[data-logbook-root] [data-logbook-pager] {
position: relative !important;
width: 100% !important;
margin-top: auto !important;
padding-top: clamp(10px, 1vw, 18px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(12px, 2vw, 28px) !important;
flex-shrink: 0 !important;
}
/* Pfeile */
[data-logbook-root] .mhl-logbuch-pager button,
[data-logbook-root] [data-logbook-pager] button {
width: clamp(38px, 3.4vw, 52px) !important;
height: clamp(32px, 2.8vw, 44px) !important;
border-radius: 50% !important;
border: 1px solid rgba(76, 48, 24, .45) !important;
background:
linear-gradient(
180deg,
#ead4a7 0%,
#c9a56b 100%
) !important;
color: #352313 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(18px, 1.5vw, 24px) !important;
font-weight: 700 !important;
cursor: pointer !important;
box-shadow:
0 2px 5px rgba(40, 20, 8, .25) !important;
transition:
transform .15s ease,
box-shadow .15s ease !important;
}
[data-logbook-root] .mhl-logbuch-pager button:hover,
[data-logbook-root] [data-logbook-pager] button:hover {
transform: scale(1.06) !important;
box-shadow:
0 3px 8px rgba(40, 20, 8, .35) !important;
}
/* Seitenzähler */
[data-logbook-root] .mhl-logbuch-pager span,
[data-logbook-root] [data-logbook-pager] span {
color: #3d2a1b !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(12px, 1vw, 16px) !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
/* Kalender nicht abschneiden */
[data-logbook-root] .mhl-calendar-r197,
[data-logbook-root] .mhl-calendar-r197 *,
[data-logbook-root] .mhl-calendar-grid,
[data-logbook-root] .mhl-days-r197 {
overflow: visible !important;
}
/* Keine quadratische Hover-Markierung für Tage */
[data-logbook-root] [data-logbook-day]:hover {
border-radius: 50% !important;
}
/* Aktiver Tag: blauer Tintenklecks */
[data-logbook-root] [data-logbook-day].is-active,
[data-logbook-root] [data-logbook-day][aria-current="date"] {
position: relative !important;
border-radius: 50% !important;
background: #146aa1 !important;
color: #fff !important;
border: 0 !important;
box-shadow:
0 0 0 2px rgba(20,106,161,.18),
0 3px 7px rgba(20,70,110,.35) !important;
}
/* Future-Jahre */
[data-logbook-root] [data-logbook-year][data-logbook-locked],
[data-logbook-root] [data-logbook-year][aria-disabled="true"] {
opacity: .48 !important;
cursor: not-allowed !important;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
[data-logbook-root] {
padding:
14px 8px 60px !important;
}
[data-logbook-root] .mhl-book-r197,
[data-logbook-root] .mhl-captains-logbook-r197 {
width: min(98vw, 760px) !important;
}
[data-logbook-root] .mhl-story-r197 {
padding:
8% 8% 10% !important;
}
[data-logbook-root] .mhl-story-r197 p,
[data-logbook-root] .mhl-story-r197 .mhl-story-text {
font-size: clamp(12px, 1.7vw, 16px) !important;
line-height: 1.45 !important;
}
}
@media (max-width: 620px) {
/*
* Auf Mobil wird das Buch weiterhin als Doppelseite
* dargestellt, aber kleiner skaliert.
*/
[data-logbook-root] .mhl-book-r197,
[data-logbook-root] .mhl-captains-logbook-r197 {
width: 100% !important;
aspect-ratio: 1536 / 1024 !important;
}
[data-logbook-root] .mhl-calendar-r197 {
padding: 7% 6% !important;
}
[data-logbook-root] .mhl-story-r197 {
padding: 7% 6% 8% !important;
}
[data-logbook-root] .mhl-story-r197 h1,
[data-logbook-root] .mhl-story-r197 h2,
[data-logbook-root] .mhl-story-r197 .mhl-story-title {
font-size: clamp(14px, 4vw, 20px) !important;
}
[data-logbook-root] .mhl-story-r197 p,
[data-logbook-root] .mhl-story-r197 .mhl-story-text {
font-size: clamp(9px, 2.6vw, 13px) !important;
line-height: 1.38 !important;
}
[data-logbook-root] .mhl-logbuch-pager button,
[data-logbook-root] [data-logbook-pager] button {
width: 30px !important;
height: 30px !important;
font-size: 16px !important;
}
}
/* ============================================================
MHL LOGBUCH – OPENBOOK FINAL LAYOUT 2026
============================================================ */
html:has([data-logbook-root]),
html:has(.mhl-captains-logbook-r197) {
min-height: 100%;
}
html:has([data-logbook-root]) body,
html:has(.mhl-captains-logbook-r197) body {
min-height: 100%;
overflow-x: hidden;
}
/* Alte Seiten-Hintergründe neutralisieren */
html:has([data-logbook-root]) .mhl-news-v25__background,
html:has([data-logbook-root]) .mhl-news-v25__overlay {
display: none !important;
}
/* Äußerer Logbuchbereich */
.mhl-captains-logbook-r197 {
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding: clamp(18px, 3vw, 42px) clamp(10px, 3vw, 40px) 50px !important;
box-sizing: border-box !important;
}
/*
DAS WEBP IST DAS KOMPLETTE BUCH.
Es wird NICHT mehr als normales ![]()
in den Content gedrückt.
*/
.mhl-book-r197 {
position: relative !important;
width: min(1280px, 94vw) !important;
max-width: 1280px !important;
aspect-ratio: 1536 / 1024 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Keine zusätzliche Buchgrafik */
.mhl-book-r197 > img,
.mhl-book-r197 > picture,
.mhl-book-r197 .mhl-openbook-image,
.mhl-book-r197 .mhl-book-image {
display: none !important;
}
/* ------------------------------------------------------------
LINKES BLATT
------------------------------------------------------------ */
.mhl-book-r197 > :first-child {
min-width: 0 !important;
}
.mhl-book-r197 .mhl-calendar-r197,
.mhl-book-r197 [data-logbook-calendar],
.mhl-book-r197 .mhl-logbook-calendar {
position: relative !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding:
clamp(7%, 8vw, 11%)
clamp(9%, 8vw, 12%)
clamp(7%, 7vw, 10%)
clamp(9%, 8vw, 12%) !important;
box-sizing: border-box !important;
min-width: 0 !important;
}
/* ------------------------------------------------------------
RECHTES BLATT – GESCHICHTE
------------------------------------------------------------ */
/*
Die Story wird unabhängig vom Kalender auf das rechte Blatt
gelegt. Dadurch kann sie nicht mehr unter den Kalender rutschen.
*/
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 [data-logbook-story],
.mhl-book-r197 .mhl-logbook-story {
position: relative !important;
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding:
clamp(8%, 7vw, 11%)
clamp(10%, 8vw, 13%)
clamp(8%, 7vw, 11%)
clamp(10%, 8vw, 13%) !important;
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
display: block !important;
z-index: 20 !important;
}
/* Story-Inhalt niemals wieder auf die linke Seite drücken */
.mhl-book-r197 .mhl-story-r197 > *,
.mhl-book-r197 [data-logbook-story] > *,
.mhl-book-r197 .mhl-logbook-story > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Überschrift */
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2,
.mhl-book-r197 .mhl-story-r197 h3,
.mhl-book-r197 [data-logbook-story] h1,
.mhl-book-r197 [data-logbook-story] h2,
.mhl-book-r197 [data-logbook-story] h3 {
width: 100% !important;
max-width: 100% !important;
margin-top: 0 !important;
line-height: 1.12 !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/* Artikeltext */
.mhl-book-r197 .mhl-story-r197 p,
.mhl-book-r197 [data-logbook-story] p,
.mhl-book-r197 .mhl-logbook-story p {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
line-height: 1.55 !important;
overflow-wrap: break-word !important;
word-break: normal !important;
white-space: normal !important;
}
/* Bilder innerhalb der Geschichte */
.mhl-book-r197 .mhl-story-r197 img,
.mhl-book-r197 [data-logbook-story] img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
margin: 12px auto 18px !important;
}
/* ------------------------------------------------------------
KALENDER – NICHT VOM STORY-CONTENT ÜBERDECKEN
------------------------------------------------------------ */
.mhl-book-r197 .mhl-year-r197 {
position: relative !important;
z-index: 30 !important;
}
.mhl-book-r197 .mhl-calendar-grid-r197,
.mhl-book-r197 .mhl-days-r197,
.mhl-book-r197 [data-logbook-days] {
position: relative !important;
z-index: 30 !important;
}
/* Blaue Tagesmarkierung */
.mhl-book-r197 .mhl-day-r197.is-active,
.mhl-book-r197 .mhl-day-r197.is-selected,
.mhl-book-r197 [data-logbook-day].is-active,
.mhl-book-r197 [data-logbook-day].is-selected {
background: #197da7 !important;
color: #fff !important;
border-color: #197da7 !important;
box-shadow: none !important;
}
/* Hover darf KEIN Quadrat erzeugen */
.mhl-book-r197 .mhl-day-r197.is-active:hover,
.mhl-book-r197 .mhl-day-r197.is-selected:hover,
.mhl-book-r197 [data-logbook-day].is-active:hover,
.mhl-book-r197 [data-logbook-day].is-selected:hover {
background: #197da7 !important;
color: #fff !important;
border-color: #197da7 !important;
box-shadow: none !important;
}
/* Zukunftsjahre */
.mhl-book-r197 .mhl-year-r197[aria-disabled="true"],
.mhl-book-r197 .mhl-year-r197.is-disabled {
opacity: .55 !important;
cursor: not-allowed !important;
}
/* ------------------------------------------------------------
STORY-SEITEN
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-page-r197 {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
}
.mhl-book-r197 .mhl-story-page-r197[hidden] {
display: none !important;
}
/* Kein künstlicher Scrollcontainer */
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 .mhl-story-page-r197,
.mhl-book-r197 [data-logbook-visible-paragraphs] {
overflow: visible !important;
}
/* ------------------------------------------------------------
DESKTOP – mehr Platz auf dem Buch
------------------------------------------------------------ */
@media (min-width: 1100px) {
.mhl-captains-logbook-r197 {
padding-top: 28px !important;
}
.mhl-book-r197 {
width: min(1280px, 94vw) !important;
}
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 [data-logbook-story],
.mhl-book-r197 .mhl-logbook-story {
padding-left: 10% !important;
padding-right: 11% !important;
padding-top: 10% !important;
padding-bottom: 9% !important;
}
}
/* ------------------------------------------------------------
TABLET
------------------------------------------------------------ */
@media (min-width: 700px) and (max-width: 1099px) {
.mhl-captains-logbook-r197 {
padding: 18px 8px 35px !important;
}
.mhl-book-r197 {
width: min(100%, 980px) !important;
}
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 [data-logbook-story],
.mhl-book-r197 .mhl-logbook-story {
padding:
9% 10% 9% 10% !important;
}
.mhl-book-r197 .mhl-story-r197 p,
.mhl-book-r197 [data-logbook-story] p {
line-height: 1.45 !important;
}
}
/* ------------------------------------------------------------
MOBIL
------------------------------------------------------------ */
@media (max-width: 699px) {
.mhl-captains-logbook-r197 {
padding: 10px 6px 25px !important;
}
/*
Auf Mobil wird das Buch weiterhin als ein Buch dargestellt,
aber der Inhalt wird innerhalb der beiden Seiten verkleinert.
*/
.mhl-book-r197 {
width: 100% !important;
max-width: none !important;
}
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 [data-logbook-story],
.mhl-book-r197 .mhl-logbook-story {
padding:
8% 8% 8% 8% !important;
}
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2,
.mhl-book-r197 [data-logbook-story] h1,
.mhl-book-r197 [data-logbook-story] h2 {
font-size: clamp(17px, 4vw, 25px) !important;
}
.mhl-book-r197 .mhl-story-r197 p,
.mhl-book-r197 [data-logbook-story] p {
font-size: clamp(10px, 2.3vw, 15px) !important;
line-height: 1.45 !important;
}
}
/* ------------------------------------------------------------
SEHR KLEINE MOBILGERÄTE
------------------------------------------------------------ */
@media (max-width: 430px) {
.mhl-book-r197 {
aspect-ratio: 1536 / 1024 !important;
}
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 [data-logbook-story],
.mhl-book-r197 .mhl-logbook-story {
padding: 7% !important;
}
.mhl-book-r197 .mhl-story-r197 p,
.mhl-book-r197 [data-logbook-story] p {
font-size: 9px !important;
line-height: 1.35 !important;
}
}
/* ============================================================
ENDE MHL LOGBUCH – OPENBOOK FINAL LAYOUT 2026
============================================================ */
/* ============================================================
MHL LOGBUCH VORLAGE FINAL
============================================================ */
/*
* WICHTIG:
* Die WebP ist 1536 x 1024.
* Das sichtbare Buch soll GROSS dargestellt werden.
*/
html.mhl-logbuch-final body {
overflow-x: hidden !important;
}
/* Äußere Logbuch-Container */
html.mhl-logbuch-final .mhl-captains-logbook-r197 {
width: min(96vw, 1536px) !important;
max-width: 1536px !important;
margin-left: auto !important;
margin-right: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Das eigentliche Buch.
*/
html.mhl-logbuch-final .mhl-captains-logbook-r197 .mhl-book-r197,
html.mhl-logbuch-final .mhl-book-r197 {
position: relative !important;
display: block !important;
width: min(96vw, 1536px) !important;
max-width: 1536px !important;
height: auto !important;
aspect-ratio: 1536 / 1024 !important;
margin:
clamp(8px, 2vh, 24px)
auto
!important;
padding: 0 !important;
background-image:
none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* ALLE bisherigen Layoutversuche im Buch neutralisieren.
*/
html.mhl-logbuch-final .mhl-book-r197 > * {
box-sizing: border-box !important;
}
/* Keine künstlichen Höhen / Scrollbereiche */
html.mhl-logbuch-final .mhl-book-r197,
html.mhl-logbuch-final .mhl-book-r197 *,
html.mhl-logbuch-final .mhl-captains-logbook-r197 {
max-height: none !important;
}
/* ============================================================
NEUES CONTENT-GRID
============================================================ */
html.mhl-logbuch-final .mhl-book-r197 .mhl-logbuch-content-final {
position: absolute !important;
/*
* Das Overlay entspricht exakt der WebP.
*/
left: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
display: grid !important;
grid-template-columns:
50% 50% !important;
pointer-events: none !important;
z-index: 20 !important;
}
/* Beide Seiten */
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-left-final,
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-right-final {
position: relative !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
box-sizing: border-box !important;
pointer-events: auto !important;
background: transparent !important;
}
/* ============================================================
LINKE SEITE
============================================================ */
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-left-final {
padding:
10.2% 11.5% 9%
!important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
overflow: visible !important;
}
/* ============================================================
RECHTE SEITE
============================================================ */
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-right-final {
padding:
10.2% 11.5% 9%
!important;
display: block !important;
overflow: visible !important;
}
/*
* Der komplette Storybereich sitzt NUR rechts.
*/
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-right-final
.mhl-story-r197 {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
color: #2b2119 !important;
}
/* Falls Story über data-Attribut angesprochen wird */
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-story] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* ============================================================
STORY-TYPOGRAFIE
============================================================ */
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 h1,
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 h2,
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 h3 {
font-family:
Georgia,
"Times New Roman",
serif !important;
color: #241a13 !important;
font-weight: 700 !important;
line-height: 1.08 !important;
margin:
0 0 3.5%
!important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/*
* Überschrift rechts:
* groß, aber innerhalb der rechten Seite.
*/
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 h1 {
font-size:
clamp(20px, 2.25vw, 38px)
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 h2 {
font-size:
clamp(18px, 1.9vw, 31px)
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 h3 {
font-size:
clamp(15px, 1.45vw, 24px)
!important;
}
/*
* Artikeltext:
* bewusst kompakt, damit die komplette Geschichte auf
* das rechte Blatt passt.
*/
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 p,
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-story] p {
font-family:
Georgia,
"Times New Roman",
serif !important;
color: #34281e !important;
font-size:
clamp(12px, 1.05vw, 17px)
!important;
line-height:
1.38 !important;
letter-spacing:
0 !important;
width: 100% !important;
max-width: 100% !important;
margin:
0 0 3.2%
!important;
padding: 0 !important;
overflow-wrap:
break-word !important;
word-break:
normal !important;
}
/* ============================================================
STORY-BILD
============================================================ */
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 img,
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-story] img {
display: block !important;
width:
min(100%, 360px)
!important;
height: auto !important;
max-height:
180px
!important;
object-fit: cover !important;
margin:
8px auto 12px
!important;
border-radius: 2px !important;
box-shadow:
0 2px 7px rgba(35, 23, 12, .25)
!important;
}
/* ============================================================
KALENDER
============================================================ */
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-calendar],
html.mhl-logbuch-final
.mhl-book-r197
.mhl-calendar-r197 {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/*
* Keine riesigen Abstände mehr im Kalender.
*/
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-calendar] * {
box-sizing: border-box !important;
}
/* ============================================================
BLAUER TINTENKLECKS
============================================================ */
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-day].is-active,
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-day][aria-current="date"] {
background:
#176fa8 !important;
color: #fff !important;
border: 0 !important;
border-radius:
46% 54% 51% 49% /
55% 46% 54% 45%
!important;
transform:
rotate(-3deg)
!important;
box-shadow:
3px 1px 0 rgba(23,111,168,.28),
-2px 2px 0 rgba(23,111,168,.20),
1px -2px 0 rgba(23,111,168,.22)
!important;
}
/*
* Ganz wichtig:
* Beim Hover NICHT zum Quadrat werden.
*/
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-day].is-active:hover,
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-day][aria-current="date"]:hover {
background:
#176fa8 !important;
color:
#fff !important;
border-radius:
46% 54% 51% 49% /
55% 46% 54% 45%
!important;
transform:
rotate(-3deg)
!important;
box-shadow:
3px 1px 0 rgba(23,111,168,.28),
-2px 2px 0 rgba(23,111,168,.20),
1px -2px 0 rgba(23,111,168,.22)
!important;
}
/* ============================================================
2027 / 2028 GESPERRT
============================================================ */
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-year="2027"],
html.mhl-logbuch-final
.mhl-book-r197
[data-logbook-year="2028"] {
opacity:
.48 !important;
cursor:
not-allowed !important;
filter:
saturate(.55)
!important;
}
/* ============================================================
DESKTOP – BUCH MAXIMAL GROSS
============================================================ */
@media (min-width: 1200px) {
html.mhl-logbuch-final
.mhl-book-r197 {
width:
min(96vw, 1536px)
!important;
max-width:
1536px
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-right-final {
padding:
10.5% 11.8% 8.5%
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 p {
font-size:
clamp(13px, 1.02vw, 17px)
!important;
line-height:
1.4
!important;
}
}
/* ============================================================
TABLET
============================================================ */
@media (max-width: 1199px) and (min-width: 701px) {
html.mhl-logbuch-final
.mhl-book-r197 {
width:
97vw
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-left-final {
padding:
9% 10% 8%
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-right-final {
padding:
9% 10% 8%
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 p {
font-size:
clamp(10px, 1.35vw, 15px)
!important;
line-height:
1.35
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 h1 {
font-size:
clamp(17px, 2.1vw, 28px)
!important;
}
}
/* ============================================================
MOBIL
============================================================ */
@media (max-width: 700px) {
html.mhl-logbuch-final
.mhl-book-r197 {
width:
99vw
!important;
margin:
5px auto
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-left-final {
padding:
8% 8% 7%
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-logbook-right-final {
padding:
8% 8% 7%
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 p {
font-size:
clamp(8px, 1.75vw, 12px)
!important;
line-height:
1.3
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 h1 {
font-size:
clamp(13px, 3vw, 20px)
!important;
}
html.mhl-logbuch-final
.mhl-book-r197
.mhl-story-r197 img {
max-height:
90px
!important;
}
}
/* ============================================================
MHL LOGBUCH LAYOUT RECHTS – FINAL
============================================================ */
/*
* Grundprinzip:
*
* Die WebP ist ausschließlich die Buchgrafik.
* Die HTML-Inhalte liegen darüber.
*
* LINKES BLATT:
* Titel + Erklärung + Jahre + Kalender
*
* RECHTES BLATT:
* Datum + Überschrift + Story + Bild
*
* Keine künstliche fixe Seitenhöhe.
* Kein overflow:hidden.
* Kein Scrollen innerhalb der Story.
*/
html.mhl-logbuch-layout-final,
html.mhl-logbuch-layout-final body {
min-height: 100%;
}
html.mhl-logbuch-layout-final body {
overflow-x: hidden !important;
}
/* ------------------------------------------------------------
Äußerer Logbuchbereich
------------------------------------------------------------ */
.mhl-captains-logbook-r197 {
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding: clamp(10px, 2vw, 28px) !important;
box-sizing: border-box !important;
}
.mhl-captains-logbook-r197 * {
box-sizing: border-box;
}
/* ------------------------------------------------------------
DAS BUCH
------------------------------------------------------------ */
.mhl-book-r197 {
position: relative !important;
width: min(
1450px,
calc(100vw - 40px)
) !important;
max-width: 1450px !important;
margin: 0 auto !important;
aspect-ratio: 1536 / 1024 !important;
min-height: 0 !important;
height: auto !important;
background-image:
none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
display: block !important;
}
/* ------------------------------------------------------------
ALTE FLEX-/GRID-ZWÄNGE neutralisieren
------------------------------------------------------------ */
.mhl-book-r197 > *,
.mhl-book-r197 .mhl-book-page,
.mhl-book-r197 .mhl-book-left,
.mhl-book-r197 .mhl-book-right,
.mhl-book-r197 .mhl-left-page,
.mhl-book-r197 .mhl-right-page {
min-width: 0 !important;
min-height: 0 !important;
}
/* ------------------------------------------------------------
LINKES BLATT
------------------------------------------------------------ */
/*
* Der vorhandene Kalender darf nicht mehr durch den Story-Block
* zusammengedrückt werden.
*/
.mhl-book-r197 [data-logbook-calendar],
.mhl-book-r197 .mhl-calendar-r197,
.mhl-book-r197 .mhl-calendar,
.mhl-book-r197 .mhl-logbook-calendar {
position: absolute !important;
left: 8.0% !important;
top: 25.0% !important;
width: 38.0% !important;
max-width: 38.0% !important;
margin: 0 !important;
z-index: 20 !important;
}
/* ------------------------------------------------------------
TITEL / LINKER KOPFBEREICH
------------------------------------------------------------ */
.mhl-book-r197 .mhl-logbook-header,
.mhl-book-r197 .mhl-book-header,
.mhl-book-r197 [data-logbook-header] {
max-width: 38% !important;
}
/* ------------------------------------------------------------
STORY – KOMPLETT AUF DAS RECHTE BLATT
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 {
position: absolute !important;
/*
* Rechte Seite beginnt ungefähr bei 50 %.
* Wir gehen bewusst etwas weiter nach rechts,
* damit nichts über die Ringbindung läuft.
*/
left: 54.5% !important;
top: 10.5% !important;
width: 37.5% !important;
max-width: 37.5% !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
display: block !important;
z-index: 30 !important;
/*
* Keine Flex-Spalte mehr.
* Das war die Ursache für die schmale Textsäule.
*/
flex: none !important;
}
/* ------------------------------------------------------------
Story-Inhalt
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 > *,
.mhl-book-r197 .mhl-story-r197 .mhl-story-content,
.mhl-book-r197 .mhl-story-r197 .mhl-story-body,
.mhl-book-r197 .mhl-story-r197 article {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ------------------------------------------------------------
DATUM
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 time,
.mhl-book-r197 .mhl-story-r197 .mhl-story-date,
.mhl-book-r197 .mhl-story-r197 .story-date {
display: block !important;
width: 100% !important;
margin: 0 0 12px !important;
font-size: clamp(11px, 0.9vw, 15px) !important;
line-height: 1.35 !important;
text-align: left !important;
}
/* ------------------------------------------------------------
STORY-ÜBERSCHRIFT
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2,
.mhl-book-r197 .mhl-story-r197 .mhl-story-title,
.mhl-book-r197 .mhl-story-r197 .story-title {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-weight: 700 !important;
font-size: clamp(
25px,
2.25vw,
39px
) !important;
line-height: 1.08 !important;
letter-spacing: -0.01em !important;
color: #302018 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
/* ------------------------------------------------------------
UNTERTITEL
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 h3,
.mhl-book-r197 .mhl-story-r197 .mhl-story-subtitle,
.mhl-book-r197 .mhl-story-r197 .story-subtitle {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 18px !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(
14px,
1.05vw,
18px
) !important;
line-height: 1.4 !important;
font-style: italic !important;
color: #47362b !important;
}
/* ------------------------------------------------------------
STORY-TEXT
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 p,
.mhl-book-r197 .mhl-story-r197 .mhl-story-text,
.mhl-book-r197 .mhl-story-r197 .story-text {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 16px !important;
padding: 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(
14px,
1.08vw,
18px
) !important;
line-height: 1.52 !important;
font-weight: 400 !important;
color: #33261e !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/* ------------------------------------------------------------
LISTEN / SONSTIGE TEXTBLÖCKE
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 ul,
.mhl-book-r197 .mhl-story-r197 ol {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 16px !important;
padding-left: 22px !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(
14px,
1.08vw,
18px
) !important;
line-height: 1.5 !important;
}
/* ------------------------------------------------------------
STORY-BILD
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 img,
.mhl-book-r197 .mhl-story-r197 picture,
.mhl-book-r197 .mhl-story-r197 figure {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 260px !important;
margin: 14px 0 18px !important;
object-fit: contain !important;
border-radius: 5px !important;
}
/* Falls ein figure einen Bildtext besitzt */
.mhl-book-r197 .mhl-story-r197 figcaption {
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: 12px !important;
line-height: 1.35 !important;
color: #5a4636 !important;
margin-top: 5px !important;
}
/* ------------------------------------------------------------
ALLE PAGINATION-/BLÄTTER-ELEMENTE AUSBLENDEN
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-pager,
.mhl-book-r197 .mhl-story-pagination,
.mhl-book-r197 [data-logbook-story-pager],
.mhl-book-r197 [data-logbook-page-controls],
.mhl-book-r197 .mhl-logbuch-page-controls {
display: none !important;
}
/* ------------------------------------------------------------
KALENDER-TAGE
------------------------------------------------------------ */
.mhl-book-r197 [data-logbook-day],
.mhl-book-r197 .mhl-day-r197 {
position: relative !important;
border-radius: 7px !important;
transition:
background-color .12s ease,
transform .12s ease !important;
}
/*
* Aktiver Tag:
* kein Quadrat,
* sondern runder/blotiger blauer Marker.
*/
.mhl-book-r197 [data-logbook-day].is-active,
.mhl-book-r197 [data-logbook-day][aria-current="date"],
.mhl-book-r197 .mhl-day-r197.is-active {
background:
radial-gradient(
circle at 45% 45%,
#145f91 0%,
#0b6f9f 58%,
#0b638f 72%,
transparent 73%
) !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 50% !important;
box-shadow: none !important;
transform: rotate(-2deg) !important;
}
/*
* Ganz wichtig:
* Hover darf KEIN Rechteck erzeugen.
*/
.mhl-book-r197 [data-logbook-day]:hover,
.mhl-book-r197 .mhl-day-r197:hover {
background-color: transparent !important;
box-shadow: none !important;
border-color: transparent !important;
}
.mhl-book-r197 [data-logbook-day].is-active:hover,
.mhl-book-r197 [data-logbook-day][aria-current="date"]:hover,
.mhl-book-r197 .mhl-day-r197.is-active:hover {
background:
radial-gradient(
circle at 45% 45%,
#145f91 0%,
#0b6f9f 58%,
#0b638f 72%,
transparent 73%
) !important;
color: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
}
/* ------------------------------------------------------------
ZUKUNFTSJAHRE 2027 / 2028
------------------------------------------------------------ */
.mhl-book-r197 [data-logbook-year="2027"],
.mhl-book-r197 [data-logbook-year="2028"] {
opacity: .55 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* ------------------------------------------------------------
DESKTOP – viel Platz für die Geschichte
------------------------------------------------------------ */
@media (min-width: 1200px) {
.mhl-book-r197 {
width: min(
1450px,
calc(100vw - 36px)
) !important;
}
.mhl-book-r197 .mhl-story-r197 {
left: 54.2% !important;
top: 10.5% !important;
width: 38.0% !important;
max-width: 38.0% !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: clamp(
15px,
1.03vw,
18px
) !important;
line-height: 1.52 !important;
}
}
/* ------------------------------------------------------------
TABLET
------------------------------------------------------------ */
@media (min-width: 700px) and (max-width: 1199px) {
.mhl-captains-logbook-r197 {
padding: 10px !important;
}
.mhl-book-r197 {
width: calc(100vw - 20px) !important;
max-width: none !important;
}
.mhl-book-r197 [data-logbook-calendar],
.mhl-book-r197 .mhl-calendar-r197,
.mhl-book-r197 .mhl-calendar,
.mhl-book-r197 .mhl-logbook-calendar {
left: 8% !important;
top: 25% !important;
width: 38% !important;
max-width: 38% !important;
}
.mhl-book-r197 .mhl-story-r197 {
left: 54% !important;
top: 10% !important;
width: 38% !important;
max-width: 38% !important;
}
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2 {
font-size: clamp(
20px,
2.7vw,
30px
) !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: clamp(
12px,
1.55vw,
16px
) !important;
line-height: 1.45 !important;
}
}
/* ------------------------------------------------------------
MOBIL
------------------------------------------------------------ */
@media (max-width: 699px) {
.mhl-captains-logbook-r197 {
padding: 6px !important;
}
.mhl-book-r197 {
width: 100% !important;
max-width: none !important;
aspect-ratio: auto !important;
min-height: 0 !important;
background-size: 100% 100% !important;
}
/*
* Auf Mobil wird die Buchgrafik weiterhin genutzt,
* aber die beiden Seiten werden untereinander angeordnet.
*/
.mhl-book-r197 [data-logbook-calendar],
.mhl-book-r197 .mhl-calendar-r197,
.mhl-book-r197 .mhl-calendar,
.mhl-book-r197 .mhl-logbook-calendar {
position: relative !important;
left: auto !important;
top: auto !important;
width: 82% !important;
max-width: 82% !important;
margin: 15% auto 0 !important;
}
.mhl-book-r197 .mhl-story-r197 {
position: relative !important;
left: auto !important;
top: auto !important;
width: 78% !important;
max-width: 78% !important;
margin: 30px auto 40px !important;
padding-bottom: 30px !important;
}
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2 {
font-size: clamp(
24px,
7vw,
32px
) !important;
line-height: 1.08 !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: clamp(
15px,
4.2vw,
18px
) !important;
line-height: 1.5 !important;
}
}
/* ============================================================
MHL LOGBUCH – EIN BUCH / RECHTE SEITE / FINAL
============================================================ */
/*
* Grundregel:
* Die vorhandene WebP ist NUR die Buchgrafik.
* HTML-Inhalt wird darübergelegt.
* Es wird KEIN zweites Buch erzeugt.
*/
html.mhl-logbuch-final,
html.mhl-logbuch-final body,
body.mhl-logbuch-final {
min-height: 100%;
}
/* Keine zweite Buchgrafik */
.mhl-logbuch-final .mhl-book-r197 .mhl-book-r197 {
background: transparent !important;
background-image: none !important;
}
/* Hauptbuch */
.mhl-book-r197 {
position: relative !important;
width: min(1180px, 92vw) !important;
max-width: 1180px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 30px auto 50px !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* Linke Seite:
* vorhandener Kalender bleibt links.
*/
.mhl-book-r197 > .mhl-logbook-left,
.mhl-book-r197 > .mhl-calendar-r197,
.mhl-book-r197 > [data-logbook-calendar] {
position: relative !important;
grid-column: 1 !important;
width: auto !important;
max-width: none !important;
}
/*
* Rechte Seite:
* komplette Story ausschließlich hier.
*/
.mhl-book-r197 .mhl-story-r197 {
position: relative !important;
grid-column: 2 !important;
grid-row: 1 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
/*
* Sicherheitsabstand zur Ringbindung.
*/
padding:
clamp(72px, 8vw, 105px)
clamp(48px, 5vw, 82px)
clamp(65px, 7vw, 95px)
clamp(68px, 7vw, 100px) !important;
box-sizing: border-box !important;
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #302319 !important;
/*
* NICHT kursiv:
* gut lesbare historische Serifenschrift.
*/
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(16px, 1.35vw, 19px) !important;
line-height: 1.65 !important;
}
/* Keine Story außerhalb der rechten Seite */
.mhl-book-r197 > .mhl-story-r197 {
grid-column: 2 !important;
}
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2,
.mhl-book-r197 .mhl-story-r197 h3 {
width: 100% !important;
max-width: 100% !important;
margin:
0 0 18px
!important;
color: #24180f !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-weight: 700 !important;
line-height: 1.15 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.mhl-book-r197 .mhl-story-r197 h1 {
font-size: clamp(28px, 2.8vw, 42px) !important;
}
.mhl-book-r197 .mhl-story-r197 h2 {
font-size: clamp(24px, 2.3vw, 34px) !important;
}
.mhl-book-r197 .mhl-story-r197 h3 {
font-size: clamp(20px, 2vw, 28px) !important;
}
/* Datum / Untertitel */
.mhl-book-r197 .mhl-story-r197 .mhl-story-meta-r197,
.mhl-book-r197 .mhl-story-r197 .mhl-story-date-r197,
.mhl-book-r197 .mhl-story-r197 .mhl-story-location-r197 {
display: block !important;
margin: 0 0 14px !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(13px, 1.05vw, 16px) !important;
line-height: 1.45 !important;
color: #5a4030 !important;
}
/* Absatztext */
.mhl-book-r197 .mhl-story-r197 p {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin:
0 0 18px
!important;
padding: 0 !important;
color: #302319 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(15px, 1.25vw, 18px) !important;
line-height: 1.65 !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/*
* Bilder der Geschichte:
* nicht über die Buchkante hinaus.
*/
.mhl-book-r197 .mhl-story-r197 img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 20px 0 !important;
object-fit: contain !important;
border-radius: 5px !important;
}
/*
* Alle bisher möglichen absoluten/festen Story-Positionen
* ausschalten.
*/
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 .mhl-story-r197 > *,
.mhl-book-r197 .mhl-story-r197 article,
.mhl-book-r197 .mhl-story-r197 section {
box-sizing: border-box !important;
}
.mhl-book-r197 .mhl-story-r197 > *,
.mhl-book-r197 .mhl-story-r197 article,
.mhl-book-r197 .mhl-story-r197 section {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Alte Story-Pager/Blätterelemente vollständig entfernen.
*/
.mhl-book-r197 [data-logbook-pager],
.mhl-book-r197 [data-logbook-page],
.mhl-book-r197 .mhl-story-pager-r197,
.mhl-book-r197 .mhl-logbook-pager,
.mhl-book-r197 .mhl-page-controls,
.mhl-book-r197 .mhl-story-controls,
.mhl-book-r197 .mhl-story-navigation {
display: none !important;
}
/*
* Keine künstliche Scrollbox.
*/
.mhl-book-r197,
.mhl-book-r197 *,
.mhl-captains-logbook-r197 {
scrollbar-width: auto;
}
.mhl-book-r197 .mhl-story-r197 {
overflow: visible !important;
}
/*
* Linke Seite darf nicht über die Mitte rutschen.
*/
.mhl-book-r197 > *:not(.mhl-story-r197) {
max-width: 100% !important;
}
/* ============================================================
DESKTOP
============================================================ */
@media (min-width: 1101px) {
.mhl-book-r197 {
width: min(1180px, 90vw) !important;
}
.mhl-book-r197 .mhl-story-r197 {
padding:
78px 70px 75px 78px !important;
}
}
/* ============================================================
TABLET
============================================================ */
@media (min-width: 701px) and (max-width: 1100px) {
.mhl-book-r197 {
width: 94vw !important;
}
.mhl-book-r197 .mhl-story-r197 {
padding:
7vw 5vw 7vw 6vw !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
.mhl-book-r197 .mhl-story-r197 h1 {
font-size: 28px !important;
}
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 700px) {
.mhl-book-r197 {
width: 96vw !important;
/*
* Auf Mobil wird das Buch nicht abgeschnitten.
*/
background-size: 100% 100% !important;
grid-template-columns: 1fr 1fr !important;
}
.mhl-book-r197 .mhl-story-r197 {
padding:
12vw 5vw 10vw 6vw !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
.mhl-book-r197 .mhl-story-r197 h1 {
font-size: 20px !important;
}
.mhl-book-r197 .mhl-story-r197 h2 {
font-size: 18px !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: 12px !important;
line-height: 1.45 !important;
margin-bottom: 10px !important;
}
}
/*
* Wichtig:
* Kein Hover-Quadrat über dem Buch.
*/
.mhl-book-r197 button:hover,
.mhl-book-r197 a:hover {
box-shadow: none;
}
/* ============================================================
MHL LOGBUCH EIN BUCH FINAL
EIN Buchbild.
Kalender links.
Geschichte ausschließlich rechts.
Keine zweite Buchkarte.
============================================================ */
html.mhl-logbuch-single-book,
body.mhl-logbuch-single-book {
min-height: 100%;
}
html.mhl-logbuch-single-book body {
background-image: none !important;
}
/* Alte äußere Hintergrundgrafiken abschalten */
html.mhl-logbuch-single-book .mhl-news-v25__background,
html.mhl-logbuch-single-book .mhl-news-v25__overlay {
display: none !important;
}
/* Hauptbuch */
.mhl-book-r197 {
position: relative !important;
width: min(1180px, 94vw) !important;
max-width: 1180px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 1536 / 1024 !important;
margin: 18px auto 40px auto !important;
padding: 0 !important;
display: block !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/*
* ALLE verschachtelten Buchflächen werden entwaffnet.
* Dadurch entsteht niemals ein zweites Buch.
*/
.mhl-book-r197 .mhl-book-r197 {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* Alte Karten-/Panel-Optik entfernen */
.mhl-book-r197 .card,
.mhl-book-r197 .panel,
.mhl-book-r197 .mhl-card,
.mhl-book-r197 .mhl-panel {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ============================================================
LINKE BUCHSEITE
============================================================ */
.mhl-book-r197 .mhl-logbook-calendar,
.mhl-book-r197 [data-logbook-calendar],
.mhl-book-r197 .mhl-calendar-r197 {
position: absolute !important;
left: 8% !important;
top: 9% !important;
width: 38% !important;
max-width: 38% !important;
z-index: 5 !important;
box-sizing: border-box !important;
}
/* ============================================================
RECHTE BUCHSEITE
============================================================ */
.mhl-book-r197 .mhl-story-r197 {
position: absolute !important;
left: 54.5% !important;
top: 9% !important;
width: 37% !important;
max-width: 37% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 1% !important;
box-sizing: border-box !important;
display: block !important;
z-index: 20 !important;
overflow: visible !important;
color: #302318 !important;
text-align: left !important;
}
/*
* Keine alte Grid-/Flex-Positionierung innerhalb der Story.
*/
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 .mhl-story-r197 > *,
.mhl-book-r197 .mhl-story-r197 article,
.mhl-book-r197 .mhl-story-r197 section {
max-height: none !important;
overflow: visible !important;
}
/* Überschrift */
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2,
.mhl-book-r197 .mhl-story-r197 h3 {
font-family: Georgia, "Times New Roman", serif !important;
color: #2c2117 !important;
text-align: left !important;
margin: 0 0 14px 0 !important;
line-height: 1.08 !important;
max-width: 100% !important;
}
/* Haupttitel */
.mhl-book-r197 .mhl-story-r197 h1 {
font-size: clamp(25px, 2.5vw, 42px) !important;
}
/* Untertitel */
.mhl-book-r197 .mhl-story-r197 h2 {
font-size: clamp(18px, 1.65vw, 27px) !important;
}
/* Datum / Ort */
.mhl-book-r197 .mhl-story-r197 time,
.mhl-book-r197 .mhl-story-r197 .story-meta,
.mhl-book-r197 .mhl-story-r197 .mhl-story-meta {
display: block !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: clamp(11px, 0.9vw, 15px) !important;
line-height: 1.45 !important;
color: #5a4630 !important;
margin: 0 0 14px 0 !important;
}
/* Fließtext */
.mhl-book-r197 .mhl-story-r197 p {
display: block !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: clamp(14px, 1.05vw, 18px) !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
color: #302318 !important;
text-align: left !important;
margin: 0 0 13px 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/* Bild gehört ebenfalls ausschließlich auf die rechte Seite */
.mhl-book-r197 .mhl-story-r197 img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 14px 0 16px 0 !important;
border-radius: 4px !important;
object-fit: cover !important;
}
/* Keine Bilder auf der linken Kalenderseite */
.mhl-book-r197 .mhl-logbook-calendar img {
max-width: 100% !important;
height: auto !important;
}
/* ============================================================
SEITEN-NAVIGATION
============================================================ */
.mhl-book-r197 .mhl-story-pager-r197 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
width: 100% !important;
margin: 22px 0 0 0 !important;
padding: 0 !important;
}
.mhl-book-r197 .mhl-story-pager-r197 button {
appearance: none !important;
border: 0 !important;
min-width: 38px !important;
min-height: 34px !important;
padding: 6px 11px !important;
border-radius: 999px !important;
background: #147da1 !important;
color: #fff !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 14px !important;
cursor: pointer !important;
box-shadow: none !important;
}
.mhl-book-r197 .mhl-story-pager-r197 button:hover {
background: #116b88 !important;
transform: none !important;
}
.mhl-book-r197 .mhl-story-pager-r197 button:disabled {
opacity: .35 !important;
cursor: default !important;
}
.mhl-book-r197 .mhl-story-pager-r197 span {
font-family: Georgia, "Times New Roman", serif !important;
font-size: 13px !important;
color: #4b3827 !important;
white-space: nowrap !important;
}
/* ============================================================
TAGE – BLAUER TINTENKLECKS
KEIN QUADRAT BEI HOVER
============================================================ */
.mhl-book-r197 button[data-logbook-day],
.mhl-book-r197 [data-logbook-day] {
position: relative !important;
border-radius: 50% !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.mhl-book-r197 button[data-logbook-day]::before,
.mhl-book-r197 [data-logbook-day]::before {
content: "" !important;
position: absolute !important;
inset: 2px !important;
border-radius: 48% 57% 52% 44% / 55% 46% 58% 47% !important;
background: transparent !important;
transform: rotate(-7deg) !important;
z-index: -1 !important;
}
.mhl-book-r197 button[data-logbook-day]:hover,
.mhl-book-r197 [data-logbook-day]:hover,
.mhl-book-r197 button[data-logbook-day]:focus,
.mhl-book-r197 [data-logbook-day]:focus {
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
.mhl-book-r197 button[data-logbook-day].is-active::before,
.mhl-book-r197 [data-logbook-day].is-active::before,
.mhl-book-r197 button[data-logbook-day][aria-current="date"]::before,
.mhl-book-r197 [data-logbook-day][aria-current="date"]::before {
background:
radial-gradient(circle at 45% 42%,
rgba(13,74,113,.95) 0%,
rgba(13,74,113,.88) 48%,
rgba(13,74,113,.68) 70%,
rgba(13,74,113,0) 100%) !important;
box-shadow:
3px 1px 5px rgba(8,44,65,.28),
-2px 2px 4px rgba(8,44,65,.18) !important;
transform: rotate(-7deg) scale(1.05) !important;
}
.mhl-book-r197 button[data-logbook-day].is-active,
.mhl-book-r197 [data-logbook-day].is-active,
.mhl-book-r197 button[data-logbook-day][aria-current="date"],
.mhl-book-r197 [data-logbook-day][aria-current="date"] {
color: #fff !important;
background: transparent !important;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
.mhl-book-r197 {
width: 96vw !important;
margin-top: 10px !important;
}
.mhl-book-r197 .mhl-story-r197 {
left: 54% !important;
top: 8% !important;
width: 38% !important;
max-width: 38% !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: clamp(12px, 1.7vw, 16px) !important;
line-height: 1.45 !important;
}
.mhl-book-r197 .mhl-story-r197 h1 {
font-size: clamp(20px, 3.3vw, 30px) !important;
}
.mhl-book-r197 .mhl-story-r197 h2 {
font-size: clamp(15px, 2.4vw, 22px) !important;
}
}
@media (max-width: 700px) {
.mhl-book-r197 {
width: 98vw !important;
aspect-ratio: auto !important;
background-size: 100% auto !important;
padding-bottom: 66% !important;
}
.mhl-book-r197 .mhl-story-r197 {
left: 53% !important;
top: 8% !important;
width: 41% !important;
max-width: 41% !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: 12px !important;
line-height: 1.35 !important;
}
.mhl-book-r197 .mhl-story-r197 h1 {
font-size: 20px !important;
}
.mhl-book-r197 .mhl-story-r197 h2 {
font-size: 15px !important;
}
}
/* ============================================================
MHL LOGBUCH – STORY AUSSCHLIESSLICH RECHTE BUCHSEITE
============================================================ */
.mhl-book-r197 {
position: relative !important;
}
/* Alte Story-Positionierung komplett neutralisieren */
.mhl-book-r197 .mhl-story-r197 {
position: absolute !important;
left: 53.5% !important;
right: auto !important;
top: 8% !important;
bottom: auto !important;
width: 38% !important;
max-width: 38% !important;
margin: 0 !important;
padding: 2% 2.5% 3% 2.5% !important;
box-sizing: border-box !important;
display: block !important;
z-index: 50 !important;
overflow: visible !important;
transform: none !important;
}
/* Jeder direkte Inhalt bleibt innerhalb der rechten Seite */
.mhl-book-r197 .mhl-story-r197 > *,
.mhl-book-r197 .mhl-story-r197 article,
.mhl-book-r197 .mhl-story-r197 section,
.mhl-book-r197 .mhl-story-r197 header,
.mhl-book-r197 .mhl-story-r197 div {
position: relative !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
box-sizing: border-box !important;
}
/* Keine Storyteile dürfen wieder auf die linke Seite wandern */
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2,
.mhl-book-r197 .mhl-story-r197 h3,
.mhl-book-r197 .mhl-story-r197 p,
.mhl-book-r197 .mhl-story-r197 time,
.mhl-book-r197 .mhl-story-r197 img {
position: relative !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
text-align: left !important;
box-sizing: border-box !important;
}
/* Gut lesbare Schrift */
.mhl-book-r197 .mhl-story-r197 h1,
.mhl-book-r197 .mhl-story-r197 h2,
.mhl-book-r197 .mhl-story-r197 h3,
.mhl-book-r197 .mhl-story-r197 p,
.mhl-book-r197 .mhl-story-r197 time {
font-family: Georgia, "Times New Roman", serif !important;
color: #302318 !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: clamp(14px, 1.05vw, 18px) !important;
line-height: 1.52 !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* Bild ebenfalls rechts innerhalb der Story */
.mhl-book-r197 .mhl-story-r197 img {
height: auto !important;
object-fit: contain !important;
}
/* Pager ebenfalls rechts */
.mhl-book-r197 .mhl-story-pager-r197 {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Verschachtelte alte Buchgrafiken vollständig unsichtbar */
.mhl-book-r197 .mhl-book-r197,
.mhl-book-r197 .mhl-logbook-secondary-r197 {
background-image: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Tablet */
@media (max-width: 900px) {
.mhl-book-r197 .mhl-story-r197 {
left: 53% !important;
width: 39% !important;
max-width: 39% !important;
top: 8% !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: 13px !important;
line-height: 1.42 !important;
}
}
/* Mobil */
@media (max-width: 700px) {
.mhl-book-r197 .mhl-story-r197 {
left: 52% !important;
width: 42% !important;
max-width: 42% !important;
top: 7% !important;
}
.mhl-book-r197 .mhl-story-r197 p {
font-size: 11px !important;
line-height: 1.35 !important;
}
}
/* ============================================================
MHL CLEANUP – NUR DAS GROSSE OPENBOOK BLEIBT
============================================================ */
/* Alte kleine Buch-/Story-Ebene komplett entfernen */
.mhl-book-r197,
.mhl-story-r197,
.mhl-logbook-story,
.mhl-captains-logbook-r197 .mhl-story-r197,
.mhl-captains-logbook-r197 .mhl-book-r197 {
background: none !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Zweites Buch / alte Overlay-Flächen */
.mhl-book-r197 {
min-height: 0 !important;
height: auto !important;
max-height: none !important;
}
/* Artikeltext zunächst vollständig entfernen */
.mhl-story-r197,
[data-logbook-story],
[data-logbook-visible-paragraphs],
[data-logbook-image],
[data-logbook-pager],
[data-logbook-page-controls] {
display: none !important;
}
/* Keine transparente Overlay-Grafik */
.mhl-book-r197::before,
.mhl-book-r197::after,
.mhl-captains-logbook-r197::before,
.mhl-captains-logbook-r197::after {
background-image: none !important;
content: none !important;
}
/* ============================================================ */
/* ============================================================
MHL LOGBUCH CLEANUP – ALTES KLEINES BUCH ENTFERNT
============================================================ */
/* Alte kleine Story-/Artikelbox */
.mhl-story-r197,
.mhl-logbook-story,
.mhl-logbook-story-card,
.mhl-logbook-article,
.mhl-logbook-overlay,
[data-logbook-story],
[data-logbook-visible-paragraphs],
[data-logbook-pager],
[data-logbook-page-controls],
[data-logbook-image] {
display: none !important;
}
/* Keine alten kleinen Buchflächen */
.mhl-captains-logbook-r197 .mhl-story-r197,
.mhl-captains-logbook-r197 .mhl-logbook-story,
.mhl-captains-logbook-r197 .mhl-logbook-overlay {
display: none !important;
}
/* Keine Pager-/Blätterbox */
.mhl-logbook-pager,
.mhl-story-pager,
.mhl-page-controls,
.mhl-logbook-page-controls {
display: none !important;
}
/* Keine zusätzlichen Buchbilder */
.mhl-captains-logbook-r197 img[src*="logbuch-openbook"],
.mhl-captains-logbook-r197 img[src*="logbuch-openbook-final"],
.mhl-captains-logbook-r197 img[src*="logbuch-openbook-background"],
.mhl-book-r197 > img,
.mhl-book-r197 img.mhl-book-background,
.mhl-book-r197 img.mhl-logbuch-background {
display: none !important;
visibility: hidden !important;
}
/* Keine pseudo-element-basierten zweiten Bücher */
.mhl-captains-logbook-r197::before,
.mhl-captains-logbook-r197::after,
.mhl-book-r197::before,
.mhl-book-r197::after {
background-image: none !important;
}
/* Kein separates kleines Buch */
.mhl-book-r197 {
position: relative !important;
}
.mhl-book-r197 .mhl-book-r197,
.mhl-captains-logbook-r197 .mhl-book-r197 .mhl-book-r197 {
display: none !important;
}
/* Alte transparente Story-/Bildflächen entfernen */
.mhl-captains-logbook-r197 [class*="transparent"],
.mhl-captains-logbook-r197 [class*="overlay-image"],
.mhl-captains-logbook-r197 [class*="background-image"] {
background-image: none !important;
}
/* ============================================================
NUR DAS HAUPT-LOGBUCH BLEIBT
============================================================ */
.mhl-captains-logbook-r197 {
position: relative !important;
}
.mhl-captains-logbook-r197 > .mhl-book-r197 {
display: block !important;
}
/* ============================================================
STORY-INHALT VORÜBERGEHEND AUSBLENDEN
Das kleine/überlagernde Textfenster verschwindet.
Der eigentliche Inhalt kann danach sauber neu platziert werden.
============================================================ */
.mhl-book-r197 .mhl-story-r197 {
position: relative !important;
background: transparent !important;
}
/* Keine alten künstlichen Karten-/Fensterflächen */
.mhl-story-r197 .mhl-story-card,
.mhl-story-r197 .mhl-story-overlay,
.mhl-story-r197 .mhl-story-image-overlay,
.mhl-story-r197 [data-logbook-overlay] {
background: transparent !important;
box-shadow: none !important;
}
/* ============================================================
MHL LOGBUCH – SINGLE MAIN BOOK V2
EIN Buch.
Kein zweites Buch.
Kein transparentes Overlay.
Text ausschließlich auf der rechten Seite.
============================================================ */
.mhl-captains-logbook-r197 {
position: relative !important;
width: 100% !important;
max-width: 1500px !important;
margin: 0 auto !important;
padding: 24px !important;
box-sizing: border-box !important;
background: transparent !important;
}
/* ------------------------------------------------------------
NUR DAS HAUPTBUCH
------------------------------------------------------------ */
.mhl-captains-logbook-r197 > .mhl-book-r197 {
position: relative !important;
width: min(1180px, 92vw) !important;
min-height: 760px !important;
margin: 20px auto !important;
background-image:
url("/assets/images/mhl-logbuch-old-openbook-disabled.webp") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 100% 100% !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
display: grid !important;
grid-template-columns: 50% 50% !important;
align-items: stretch !important;
}
/* ------------------------------------------------------------
KEIN ZWEITES / VERSCHACHTELTES BUCH
------------------------------------------------------------ */
.mhl-captains-logbook-r197
.mhl-book-r197
.mhl-book-r197 {
display: none !important;
}
.mhl-captains-logbook-r197
.mhl-book-r197
.mhl-book-r197::before,
.mhl-captains-logbook-r197
.mhl-book-r197
.mhl-book-r197::after {
display: none !important;
}
/* ------------------------------------------------------------
ALTE BILD-OVERLAYS WEG
------------------------------------------------------------ */
.mhl-captains-logbook-r197 img[src*="logbuch-openbook-background"],
.mhl-captains-logbook-r197 img[src*="logbuch-openbook-final"] {
display: none !important;
}
/* ------------------------------------------------------------
LINKE SEITE
Kalender bleibt links.
------------------------------------------------------------ */
.mhl-book-r197 > :first-child {
min-width: 0 !important;
}
/* ------------------------------------------------------------
RECHTE SEITE
HIER MUSS DIE GESCHICHTE HIN
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197 {
position: relative !important;
grid-column: 2 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding:
clamp(70px, 7vw, 105px)
clamp(65px, 7vw, 105px)
clamp(65px, 6vw, 95px)
clamp(55px, 6vw, 95px) !important;
box-sizing: border-box !important;
background: transparent !important;
color: #241a10 !important;
overflow: visible !important;
display: block !important;
}
/* ------------------------------------------------------------
STORY-INHALT NICHT MEHR IN DER BUCHMITTE
------------------------------------------------------------ */
.mhl-book-r197 .mhl-story-r197,
.mhl-book-r197 .mhl-story-r197 * {
box-sizing: border-box !important;
}
.mhl-story-r197 h1,
.mhl-story-r197 h2,
.mhl-story-r197 h3 {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.mhl-story-r197 p {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/* ------------------------------------------------------------
ALTE SCHWEBENDE POSITIONIERUNGEN NEUTRALISIEREN
------------------------------------------------------------ */
.mhl-story-r197 [style*="position:absolute"],
.mhl-story-r197 [style*="position: absolute"] {
position: relative !important;
inset: auto !important;
}
.mhl-story-r197 [style*="left:"],
.mhl-story-r197 [style*="right:"],
.mhl-story-r197 [style*="top:"],
.mhl-story-r197 [style*="bottom:"] {
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
/* ------------------------------------------------------------
TRANSPARENTE STORY-KÄSTEN ENTFERNEN
------------------------------------------------------------ */
.mhl-story-r197 .mhl-story-overlay,
.mhl-story-r197 .mhl-story-card,
.mhl-story-r197 .mhl-story-image-overlay,
.mhl-story-r197 [data-logbook-overlay] {
background: transparent !important;
box-shadow: none !important;
}
/* ------------------------------------------------------------
BILD INNERHALB DER STORY
------------------------------------------------------------ */
.mhl-story-r197 img {
position: relative !important;
display: block !important;
width: min(100%, 430px) !important;
height: auto !important;
margin: 0 auto 22px auto !important;
max-height: 240px !important;
object-fit: cover !important;
}
/* ------------------------------------------------------------
STORY-TYPOGRAFIE
Schreibschrift nur für Überschrift,
Lesbarkeit für Fließtext.
------------------------------------------------------------ */
.mhl-story-r197 h1,
.mhl-story-r197 h2 {
font-family:
Georgia,
"Times New Roman",
serif !important;
font-weight: 700 !important;
line-height: 1.08 !important;
color: #21170e !important;
}
.mhl-story-r197 p,
.mhl-story-r197 li,
.mhl-story-r197 .story-body {
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(15px, 1.2vw, 19px) !important;
line-height: 1.58 !important;
color: #2b2117 !important;
}
/* ------------------------------------------------------------
BLÄTTERN
------------------------------------------------------------ */
.mhl-story-r197 [data-logbook-prev],
.mhl-story-r197 [data-logbook-next],
.mhl-story-r197 .mhl-logbook-page-button {
position: relative !important;
z-index: 20 !important;
cursor: pointer !important;
}
/* ------------------------------------------------------------
DESKTOP
------------------------------------------------------------ */
@media (min-width: 1000px) {
.mhl-captains-logbook-r197 > .mhl-book-r197 {
min-height: 760px !important;
}
.mhl-book-r197 .mhl-story-r197 {
grid-column: 2 !important;
padding-top: 90px !important;
padding-left: 85px !important;
padding-right: 85px !important;
padding-bottom: 75px !important;
}
}
/* ------------------------------------------------------------
TABLET
------------------------------------------------------------ */
@media (min-width: 700px) and (max-width: 999px) {
.mhl-captains-logbook-r197 {
padding: 10px !important;
}
.mhl-captains-logbook-r197 > .mhl-book-r197 {
width: 96vw !important;
min-height: 620px !important;
}
.mhl-book-r197 .mhl-story-r197 {
padding:
65px
55px
55px
55px !important;
}
.mhl-story-r197 p {
font-size: 16px !important;
}
}
/* ------------------------------------------------------------
MOBIL
------------------------------------------------------------ */
@media (max-width: 699px) {
.mhl-captains-logbook-r197 {
padding: 5px !important;
}
.mhl-captains-logbook-r197 > .mhl-book-r197 {
width: 100% !important;
min-height: 0 !important;
background-size: 100% 100% !important;
grid-template-columns: 1fr !important;
}
.mhl-book-r197 .mhl-story-r197 {
grid-column: 1 !important;
padding:
55px
35px
55px
35px !important;
}
.mhl-story-r197 p {
font-size: 15px !important;
line-height: 1.5 !important;
}
.mhl-story-r197 img {
max-height: 180px !important;
}
}
/*
* Nur EIN Logbuchbild.
* Keine zweite Grafik.
* Kein eingebettetes/transparentes Zusatzbild.
* Keine feste Seitenhöhe.
* Kein Scrollen innerhalb des Logbuchs.
*/
html.mhl-logbuch-production-v21,
html.mhl-logbuch-production-v21 body,
body {
background-image: none !important;
}
html.mhl-logbuch-production-v21::before,
html.mhl-logbuch-production-v21::after,
body::before,
body::after {
display: none !important;
}
.mhl-news-v25__background,
.mhl-news-v25__overlay {
display: none !important;
}
/* Hauptbereich */
.mhl-captains-logbook-r197,
.mhl-logbuch-r197,
[data-logbook-root] {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
height: auto !important;
margin: 0 auto !important;
padding: 24px 16px 40px !important;
overflow: visible !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
box-sizing: border-box !important;
}
/* DAS EINE LOGBUCHBILD */
.mhl-book-r197 {
position: relative !important;
width: min(100%, 1536px) !important;
max-width: 1536px !important;
height: auto !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
display: block !important;
background-image: url("/assets/images/logbuch-openbook-clean.webp") !important;
background-repeat: no-repeat !important;
background-position: center top !important;
background-size: 100% auto !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/*
* Seitenflächen der alten HTML-Version nicht mehr als
* zusätzliche Bücher/Grafiken darstellen.
*/
.mhl-book-r197 > .mhl-book-page,
.mhl-book-r197 .mhl-book-left,
.mhl-book-r197 .mhl-book-right {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* Alte kleine Buch-/Overlay-Grafiken komplett ausblenden */
.mhl-book-r197 img[src*="logbuch-openbook"],
.mhl-book-r197 img[src*="logbuch-der-küste"],
.mhl-book-r197 img[src*="logbuch-der-kueste"],
.mhl-book-r197 img[src*="openbook"] {
display: none !important;
}
/* Keine abgeschnittenen Inhalte */
.mhl-book-r197,
.mhl-book-r197 *,
.mhl-story-r197,
.mhl-story-r197 *,
[data-logbook-story],
[data-logbook-story] * {
max-height: none !important;
overflow: visible !important;
}
/* Alte Story-Inhalte zunächst aus dem Bildbereich nehmen.
Das Bild selbst bleibt allein sichtbar. */
.mhl-story-r197 {
display: none !important;
}
/* Kalender-/Steuerelemente ebenfalls vorerst entfernen.
Dadurch bleibt wirklich nur das eine saubere Buchbild. */
.mhl-book-r197 [data-logbook-calendar],
.mhl-book-r197 [data-logbook-years],
.mhl-book-r197 [data-logbook-controls],
.mhl-book-r197 .mhl-logbook-calendar,
.mhl-book-r197 .mhl-logbook-years {
display: none !important;
}
/* Desktop: Bild vollständig innerhalb des sichtbaren Bereichs */
@media (min-width: 1200px) {
.mhl-book-r197 {
width: min(92vw, 1536px) !important;
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
.mhl-captains-logbook-r197,
.mhl-logbuch-r197,
[data-logbook-root] {
padding: 16px 10px 24px !important;
}
.mhl-book-r197 {
width: 96vw !important;
}
}
/* Mobil */
@media (max-width: 767px) {
.mhl-captains-logbook-r197,
.mhl-logbuch-r197,
[data-logbook-root] {
padding: 8px 4px 16px !important;
}
.mhl-book-r197 {
width: 100% !important;
}
}
/* MHL LOGBUCH DIRECT IMAGE V1 */
/* Alten Logbuch-Hintergrund vollständig neutralisieren */
html.mhl-logbuch-production-v21,
html.mhl-logbuch-production-v21 body {
background-image: none !important;
}
html.mhl-logbuch-production-v21::before,
html.mhl-logbuch-production-v21::after,
html.mhl-logbuch-production-v21 body::before,
html.mhl-logbuch-production-v21 body::after {
display: none !important;
}
/* Logbuch-Hauptbereich */
[data-logbook-root] {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 12px 12px 20px !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Alles alte innerhalb des Logbuchbereichs entfernen */
[data-logbook-root] > * {
display: none !important;
}
/* Das einzige sichtbare Element */
#mhl-logbuch-direct-image {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 96vw !important;
max-height: calc(100vh - 175px) !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
[data-logbook-root] {
padding: 8px !important;
}
#mhl-logbuch-direct-image {
max-width: 98vw !important;
max-height: calc(100vh - 150px) !important;
}
}
/* Mobil */
@media (max-width: 767px) {
[data-logbook-root] {
padding: 4px !important;
}
#mhl-logbuch-direct-image {
max-width: 100vw !important;
max-height: calc(100vh - 115px) !important;
}
}
/*
* KOMPLETT NEUER ZWISCHENSCHRITT:
* - nur EIN Logbuchbild
* - keine HTML-Buchseiten
* - kein Text
* - kein Kalender
* - keine zweite Grafik
* - kein Scrollen
* - Bild vollständig sichtbar
* - horizontal und vertikal zentriert
*/
html.mhl-logbuch-page-r197,
html.mhl-logbuch-page-r197 body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Alten Seiten-/Hintergrundaufbau vollständig ausblenden */
html.mhl-logbuch-page-r197 body {
background-image: none !important;
background-color: #20262b !important;
}
html.mhl-logbuch-page-r197::before,
html.mhl-logbuch-page-r197::after,
html.mhl-logbuch-page-r197 body::before,
html.mhl-logbuch-page-r197 body::after {
display: none !important;
}
/* Alte Küsten-Hintergrundgrafik weg */
.mhl-news-v25__background,
.mhl-news-v25__overlay {
display: none !important;
}
/* Logbuch-Root = exakt der sichtbare Bildbereich */
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197,
html.mhl-logbuch-page-r197 [data-logbook-root] {
position: relative !important;
width: 100vw !important;
height: calc(100vh - 145px) !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
overflow: hidden !important;
box-sizing: border-box !important;
background-image: url("/assets/images/logbuch-openbook-clean.webp") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: contain !important;
background-color: #20262b !important;
}
/*
* Alle bisherigen HTML-Inhalte ausblenden.
* Das Logbuchbild bleibt als Hintergrund des Root-Elements.
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 > *,
html.mhl-logbuch-page-r197 [data-logbook-root] > * {
display: none !important;
}
/* Sicherheit gegen alte direkte Bilder */
html.mhl-logbuch-page-r197 img[src*="logbuch-openbook"],
html.mhl-logbuch-page-r197 img[src*="logbuch-der-kueste"],
html.mhl-logbuch-page-r197 img[src*="logbuch-der-küste"],
html.mhl-logbuch-page-r197 img[src*="openbook"] {
display: none !important;
}
/*
* Desktop:
* Bild wird proportional so groß wie möglich,
* ohne oben/unten oder links/rechts abgeschnitten zu werden.
*/
@media (min-width: 1200px) {
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197,
html.mhl-logbuch-page-r197 [data-logbook-root] {
height: calc(100vh - 145px) !important;
background-size: contain !important;
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197,
html.mhl-logbuch-page-r197 [data-logbook-root] {
height: calc(100vh - 120px) !important;
background-size: contain !important;
}
}
/* Mobil */
@media (max-width: 767px) {
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197,
html.mhl-logbuch-page-r197 [data-logbook-root] {
width: 100vw !important;
height: calc(100vh - 100px) !important;
background-size: contain !important;
background-position: center center !important;
}
}
/* MHL LOGBUCH BILD SICHTBAR V2 */
/*
* AKTUELLER ZUSTAND:
* Nur das Logbuchbild.
* Kein HTML-Logbuch.
* Kein Kalender.
* Kein Text.
* Keine zweite Grafik.
*/
html.mhl-logbuch-page-r197 body {
background-image: none !important;
background-color: #20262b !important;
}
/* Alte Seiten-/Overlay-Hintergründe ausschalten */
html.mhl-logbuch-page-r197 .mhl-news-v25__background,
html.mhl-logbuch-page-r197 .mhl-news-v25__overlay {
display: none !important;
}
/*
* Der sichtbare Logbuchbereich.
* Direkt auf die echte Section angewendet,
* ohne Abhängigkeit von verschachtelten Elementen.
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
position: relative !important;
width: 100vw !important;
height: calc(100vh - 145px) !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
background-color: #20262b !important;
background-image: url("/assets/images/logbuch-openbook-clean.webp") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: contain !important;
box-sizing: border-box !important;
}
/*
* Alle bisherigen HTML-Inhalte verschwinden.
* Das eigentliche Bild liegt direkt auf der Section.
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 > * {
display: none !important;
}
/*
* Sicherheit:
* Falls irgendein altes Bild als IMG eingebunden wird,
* wird es entfernt.
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 img {
display: none !important;
}
/*
* Sicherheit gegen alte ::before / ::after Grafiken.
*/
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197::before,
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197::after {
display: none !important;
content: none !important;
}
/* Desktop */
@media (min-width: 1200px) {
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
width: 100vw !important;
height: calc(100vh - 145px) !important;
background-size: contain !important;
background-position: center center !important;
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
width: 100vw !important;
height: calc(100vh - 120px) !important;
background-size: contain !important;
background-position: center center !important;
}
}
/* Mobil */
@media (max-width: 767px) {
html.mhl-logbuch-page-r197 .mhl-captains-logbook-r197 {
width: 100vw !important;
height: calc(100vh - 100px) !important;
background-size: contain !important;
background-position: center center !important;
}
}
/* ============================================================
MHL LOGBUCH CLEAN IMAGE FINAL V2
EIN Bild – vollständig sichtbar – zentriert
============================================================ */
/* Alte Seiten-/Story-Darstellung komplett aus dem sichtbaren
Bereich nehmen. Das ist bewusst nur ein Darstellungs-Reset. */
html.mhl-logbuch-production-v21,
html.mhl-logbuch-production-v21 body,
body {
background-image: none !important;
background-color: #101820 !important;
}
html.mhl-logbuch-production-v21::before,
html.mhl-logbuch-production-v21::after,
body::before,
body::after {
display: none !important;
content: none !important;
}
/* Alte Küsten-Hintergrundebenen */
.mhl-news-v25__background,
.mhl-news-v25__overlay {
display: none !important;
visibility: hidden !important;
}
/* Gesamter Logbuchbereich */
.mhl-captains-logbook-r197,
.mhl-logbuch-r197,
[data-logbook-root] {
position: relative !important;
width: 100% !important;
max-width: none !important;
height: calc(100vh - 92px) !important;
min-height: 0 !important;
max-height: calc(100vh - 92px) !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-sizing: border-box !important;
background: transparent !important;
background-image: none !important;
}
/*
* Das vorhandene HTML-Logbuch wird komplett unsichtbar.
* Dadurch können alte JS-/CSS-Reste das Bild nicht mehr
* verschieben oder überlagern.
*/
.mhl-captains-logbook-r197 > *,
.mhl-logbuch-r197 > *,
[data-logbook-root] > * {
visibility: hidden !important;
}
/*
* Das eigentliche Buch:
* wird nicht mehr als Hintergrundgrafik benutzt.
*/
.mhl-book-r197 {
display: none !important;
}
/* Alte Story-/Kalender-/Navigationsbereiche */
.mhl-story-r197,
.mhl-logbook-calendar,
.mhl-logbook-years,
.mhl-logbook-controls,
[data-logbook-calendar],
[data-logbook-years],
[data-logbook-controls],
[data-logbook-story] {
display: none !important;
}
/*
* EINZIGES SICHTBARES LOGBUCHBILD
*
* Pseudo-Element liegt unabhängig vom alten HTML-Layout
* direkt im Logbuchcontainer.
*/
.mhl-captains-logbook-r197::after,
.mhl-logbuch-r197::after,
[data-logbook-root]::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: 100% !important;
height: 100% !important;
background-image: url("/assets/images/logbuch-openbook-clean.webp") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: contain !important;
pointer-events: none !important;
visibility: visible !important;
display: block !important;
z-index: 999 !important;
}
/* Falls der konkrete Container nicht existiert,
trotzdem keine alte Hintergrundgrafik zulassen. */
html.mhl-logbuch-production-v21 .mhl-captains-logbook-r197 {
background: transparent !important;
}
/* ============================================================
TABLET
============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
.mhl-captains-logbook-r197,
.mhl-logbuch-r197,
[data-logbook-root] {
height: calc(100vh - 86px) !important;
max-height: calc(100vh - 86px) !important;
}
}
/* ============================================================
MOBIL
============================================================ */
@media (max-width: 767px) {
.mhl-captains-logbook-r197,
.mhl-logbuch-r197,
[data-logbook-root] {
height: calc(100vh - 76px) !important;
max-height: calc(100vh - 76px) !important;
}
}
/* ============================================================
MHL LOGBUCH ECHTES WEBP V3
ECHTES IMG / 100% SICHTBAR / KEIN SCROLLEN
============================================================ */
.mhl-logbuch-echtes-bild-v3 {
position: relative !important;
width: 100% !important;
height: calc(100vh - 110px) !important;
min-height: 0 !important;
max-height: calc(100vh - 110px) !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
}
.mhl-logbuch-echtes-bild-v3__img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
flex: 0 1 auto !important;
}
/* Keine pseudo-generierte zweite Buchgrafik */
.mhl-logbuch-echtes-bild-v3::before,
.mhl-logbuch-echtes-bild-v3::after {
display: none !important;
content: none !important;
}
/* Desktop */
@media (min-width: 1200px) {
.mhl-logbuch-echtes-bild-v3 {
height: calc(100vh - 110px) !important;
max-height: calc(100vh - 110px) !important;
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
.mhl-logbuch-echtes-bild-v3 {
height: calc(100vh - 95px) !important;
max-height: calc(100vh - 95px) !important;
}
}
/* Mobil */
@media (max-width: 767px) {
.mhl-logbuch-echtes-bild-v3 {
height: calc(100vh - 75px) !important;
max-height: calc(100vh - 75px) !important;
}
}
/* Verhindert horizontales Überlaufen */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
/* ============================================================
MHL LOGBUCH – TEXT RECHTE SEITE V1
============================================================ */
.mhl-logbuch-text-stage-v1 {
position: relative !important;
width: min(
calc(100vw - 20px),
calc((100vh - 110px) * 1.5)
) !important;
aspect-ratio: 1536 / 1024 !important;
margin: 0 auto !important;
display: block !important;
overflow: hidden !important;
}
.mhl-logbuch-text-stage-v1__img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
pointer-events: none !important;
}
.mhl-logbuch-text-rechts-v1 {
position: absolute !important;
/*
* Koordinaten bezogen auf das 1536x1024-WebP.
* Beginn auf der rechten Papierseite.
*/
left: 56.5% !important;
top: 24.5% !important;
width: 35.5% !important;
height: 55% !important;
box-sizing: border-box !important;
padding: 1.5% 2.5% 1% 2% !important;
overflow: hidden !important;
color: #352313 !important;
/*
* Schreibschrift – bevorzugt vorhandene Handschriftfonts,
* danach Browser-Fallback.
*/
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
"Bradley Hand",
"Comic Sans MS",
cursive !important;
font-size: clamp(12px, 1.35vw, 21px) !important;
line-height: 1.42 !important;
text-align: left !important;
transform: rotate(-0.35deg) !important;
z-index: 10 !important;
}
.mhl-logbuch-text-rechts-v1 h1 {
margin: 0 0 0.25em 0 !important;
padding: 0 !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
"Bradley Hand",
cursive !important;
font-size: clamp(21px, 2.35vw, 36px) !important;
line-height: 1.05 !important;
font-weight: 700 !important;
color: #2b1b0f !important;
text-align: center !important;
letter-spacing: 0.015em !important;
}
.mhl-logbuch-text-rechts-v1__datum {
margin: 0 0 0.9em 0 !important;
font-size: 0.72em !important;
font-style: italic !important;
text-align: right !important;
opacity: 0.78 !important;
}
.mhl-logbuch-text-rechts-v1 p {
margin: 0 0 0.8em 0 !important;
padding: 0 !important;
font: inherit !important;
color: inherit !important;
}
.mhl-logbuch-text-rechts-v1__schluss {
margin-top: 1em !important;
text-align: right !important;
font-style: italic !important;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
.mhl-logbuch-text-stage-v1 {
width: min(
calc(100vw - 12px),
calc((100vh - 95px) * 1.5)
) !important;
}
.mhl-logbuch-text-rechts-v1 {
font-size: clamp(10px, 1.55vw, 17px) !important;
line-height: 1.38 !important;
}
.mhl-logbuch-text-rechts-v1 h1 {
font-size: clamp(17px, 2.6vw, 27px) !important;
}
}
/* Mobil */
@media (max-width: 767px) {
.mhl-logbuch-text-stage-v1 {
width: calc(100vw - 4px) !important;
}
.mhl-logbuch-text-rechts-v1 {
left: 56.5% !important;
top: 24% !important;
width: 35% !important;
height: 56% !important;
padding: 1% 1.5% !important;
font-size: clamp(7px, 2.35vw, 12px) !important;
line-height: 1.3 !important;
}
.mhl-logbuch-text-rechts-v1 h1 {
font-size: clamp(10px, 4vw, 18px) !important;
}
}
/* ============================================================
MHL LOGBUCH – DATUMSSELECTOR + ZUKUNFTSSPERRE V1
============================================================ */
.mhl-logbuch-datum-stage-v1 {
position: relative !important;
width: min(
calc(100vw - 20px),
calc((100vh - 110px) * 1.5)
) !important;
aspect-ratio: 1536 / 1024 !important;
margin: 0 auto !important;
display: block !important;
overflow: hidden !important;
}
.mhl-logbuch-datum-stage-v1__img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
/* ------------------------------------------------------------
LINKER KALENDER
------------------------------------------------------------ */
.mhl-logbuch-datum-selector-v1 {
position: absolute !important;
left: 10.5% !important;
top: 19% !important;
width: 36% !important;
height: 64% !important;
z-index: 20 !important;
box-sizing: border-box !important;
color: #38220f !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
}
.mhl-logbuch-jahre-v1 {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 5% !important;
margin-bottom: 3% !important;
}
.mhl-logbuch-jahr-v1 {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: #5b3517 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(18px, 2.3vw, 35px) !important;
font-weight: 700 !important;
line-height: 1 !important;
padding: 3% 5% !important;
cursor: pointer !important;
transition:
transform .15s ease,
opacity .15s ease !important;
text-shadow:
1px 1px 0 rgba(255,255,255,.35) !important;
}
.mhl-logbuch-jahr-v1:hover {
transform: scale(1.05) !important;
}
.mhl-logbuch-jahr-v1.is-active {
color: #2e1a0d !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 5px !important;
}
.mhl-logbuch-jahr-v1.is-locked {
opacity: .34 !important;
cursor: not-allowed !important;
text-decoration: none !important;
filter: grayscale(.7) !important;
}
/* ------------------------------------------------------------
KALENDER
------------------------------------------------------------ */
.mhl-logbuch-kalender-v1 {
width: 100% !important;
}
.mhl-logbuch-kalender-kopf-v1 {
display: grid !important;
grid-template-columns: 12% 1fr 12% !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 2.5% !important;
}
.mhl-logbuch-monat-v1 {
font-size: clamp(15px, 1.65vw, 25px) !important;
font-weight: 700 !important;
text-transform: capitalize !important;
}
.mhl-logbuch-monat-prev-v1,
.mhl-logbuch-monat-next-v1 {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: #4a2b14 !important;
font-family: Georgia, serif !important;
font-size: clamp(22px, 2.5vw, 38px) !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
}
.mhl-logbuch-monat-prev-v1:hover,
.mhl-logbuch-monat-next-v1:hover {
transform: scale(1.15) !important;
}
.mhl-logbuch-monat-prev-v1:disabled,
.mhl-logbuch-monat-next-v1:disabled {
opacity: .18 !important;
cursor: not-allowed !important;
}
/* Wochentage */
.mhl-logbuch-wochentage-v1 {
display: grid !important;
grid-template-columns:
repeat(7, 1fr) !important;
gap: 1.2% !important;
margin-bottom: 1.5% !important;
text-align: center !important;
font-size: clamp(8px, .9vw, 14px) !important;
font-weight: 700 !important;
opacity: .72 !important;
}
/* Tage */
.mhl-logbuch-tage-v1 {
display: grid !important;
grid-template-columns:
repeat(7, 1fr) !important;
gap: 1.8% !important;
align-items: center !important;
}
.mhl-logbuch-tag-v1 {
appearance: none !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
min-width: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #3d2411 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(9px, 1.05vw, 17px) !important;
font-weight: 700 !important;
cursor: pointer !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
transition:
transform .12s ease,
background .12s ease !important;
}
.mhl-logbuch-tag-v1.is-available:hover {
transform: scale(1.13) !important;
background:
rgba(75, 42, 18, .13) !important;
}
.mhl-logbuch-tag-v1.is-today {
background:
rgba(61, 32, 12, .18) !important;
box-shadow:
0 0 0 2px rgba(61, 32, 12, .2) !important;
}
.mhl-logbuch-tag-v1.is-selected {
background:
rgba(47, 25, 10, .30) !important;
box-shadow:
0 2px 7px rgba(48, 25, 10, .24) !important;
}
.mhl-logbuch-tag-v1.is-locked {
color: rgba(55, 32, 14, .34) !important;
cursor: not-allowed !important;
background:
rgba(80, 55, 30, .045) !important;
text-decoration: line-through !important;
text-decoration-thickness: 1px !important;
}
.mhl-logbuch-tag-v1.leer {
pointer-events: none !important;
}
/* Hinweis */
.mhl-logbuch-datum-hinweis-v1 {
margin-top: 3% !important;
text-align: center !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
cursive !important;
font-size: clamp(9px, 1vw, 15px) !important;
font-style: italic !important;
opacity: .68 !important;
}
/* ------------------------------------------------------------
ZUKUNFTS-POPUP
------------------------------------------------------------ */
.mhl-logbuch-zukunft-popup-v1 {
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background:
rgba(20, 12, 6, .48) !important;
opacity: 0 !important;
transition: opacity .16s ease !important;
}
.mhl-logbuch-zukunft-popup-v1[hidden] {
display: none !important;
}
.mhl-logbuch-zukunft-popup-v1.is-visible {
opacity: 1 !important;
}
.mhl-logbuch-zukunft-popup-v1__box {
position: relative !important;
width: min(420px, calc(100vw - 40px)) !important;
box-sizing: border-box !important;
padding: 30px 32px 27px !important;
border: 2px solid rgba(83, 48, 20, .65) !important;
border-radius: 8px !important;
background:
linear-gradient(
135deg,
#ead3a5,
#d9b87e
) !important;
color: #321d0d !important;
text-align: center !important;
box-shadow:
0 18px 50px rgba(0,0,0,.45) !important;
}
.mhl-logbuch-zukunft-popup-v1__title {
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: 25px !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
}
.mhl-logbuch-zukunft-popup-v1__text {
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
cursive !important;
font-size: 18px !important;
line-height: 1.4 !important;
}
.mhl-logbuch-zukunft-popup-v1__close {
position: absolute !important;
top: 5px !important;
right: 9px !important;
width: 30px !important;
height: 30px !important;
border: 0 !important;
background: transparent !important;
color: #3b210e !important;
font-size: 27px !important;
line-height: 30px !important;
cursor: pointer !important;
}
/* ------------------------------------------------------------
TABLET
------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) {
.mhl-logbuch-datum-stage-v1 {
width: min(
calc(100vw - 12px),
calc((100vh - 95px) * 1.5)
) !important;
}
.mhl-logbuch-datum-selector-v1 {
left: 10.5% !important;
top: 19% !important;
width: 36% !important;
height: 64% !important;
}
.mhl-logbuch-jahr-v1 {
font-size: clamp(14px, 2.5vw, 27px) !important;
}
.mhl-logbuch-monat-v1 {
font-size: clamp(12px, 1.8vw, 20px) !important;
}
.mhl-logbuch-tag-v1 {
font-size: clamp(7px, 1.2vw, 13px) !important;
}
}
/* ------------------------------------------------------------
MOBIL
------------------------------------------------------------ */
@media (max-width: 767px) {
.mhl-logbuch-datum-stage-v1 {
width: calc(100vw - 4px) !important;
aspect-ratio: 1536 / 1024 !important;
}
.mhl-logbuch-datum-selector-v1 {
left: 9.5% !important;
top: 19% !important;
width: 38% !important;
height: 63% !important;
}
.mhl-logbuch-jahre-v1 {
gap: 1% !important;
}
.mhl-logbuch-jahr-v1 {
font-size: clamp(10px, 3.8vw, 18px) !important;
}
.mhl-logbuch-monat-v1 {
font-size: clamp(9px, 3.1vw, 15px) !important;
}
.mhl-logbuch-monat-prev-v1,
.mhl-logbuch-monat-next-v1 {
font-size: clamp(15px, 5vw, 24px) !important;
}
.mhl-logbuch-wochentage-v1 {
font-size: clamp(5px, 1.9vw, 9px) !important;
}
.mhl-logbuch-tag-v1 {
font-size: clamp(5px, 2vw, 9px) !important;
}
.mhl-logbuch-datum-hinweis-v1 {
font-size: clamp(5px, 2vw, 9px) !important;
}
}
/* ============================================================
MHL LOGBUCH V2
KALENDER + GESCHICHTEN
============================================================ */
.mhl-logbuch-v2 {
position: relative !important;
width: min(
calc(100vw - 20px),
calc((100vh - 110px) * 1.5)
) !important;
aspect-ratio: 1536 / 1024 !important;
margin: 0 auto !important;
overflow: hidden !important;
}
.mhl-logbuch-v2__bild {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
display: block !important;
pointer-events: none !important;
}
/* ============================================================
LINKER BEREICH
============================================================ */
.mhl-logbuch-v2__kalender {
position: absolute !important;
left: 10.5% !important;
top: 20% !important;
width: 36% !important;
z-index: 20 !important;
color: #3b2512 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
box-sizing: border-box !important;
}
.mhl-logbuch-v2__jahre {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 3.5% !important;
}
.mhl-logbuch-v2__jahr {
position: relative !important;
border: 0 !important;
background: transparent !important;
color: #4b2d14 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(
17px,
2.25vw,
34px
) !important;
font-weight: 700 !important;
padding: 2% 3% !important;
cursor: pointer !important;
text-shadow:
1px 1px 0 rgba(255,255,255,.35) !important;
}
.mhl-logbuch-v2__jahr.is-active {
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 5px !important;
color: #241408 !important;
}
.mhl-logbuch-v2__jahr.gesperrt {
opacity: .35 !important;
cursor: not-allowed !important;
text-decoration: none !important;
}
.mhl-logbuch-v2__schloss {
font-size: .55em !important;
vertical-align: middle !important;
opacity: .75 !important;
}
/* ============================================================
MONAT
============================================================ */
.mhl-logbuch-v2__monatkopf {
display: grid !important;
grid-template-columns:
12% 1fr 12% !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 2.5% !important;
text-align: center !important;
}
.mhl-logbuch-v2__monatkopf strong {
font-size: clamp(
13px,
1.55vw,
24px
) !important;
text-transform: capitalize !important;
}
.mhl-logbuch-v2__monatbutton {
border: 0 !important;
background: transparent !important;
color: #4b2b13 !important;
font-family: Georgia, serif !important;
font-size: clamp(
22px,
2.5vw,
38px
) !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
}
.mhl-logbuch-v2__monatbutton:disabled {
opacity: .18 !important;
cursor: not-allowed !important;
}
/* ============================================================
WOCHENTAGE
============================================================ */
.mhl-logbuch-v2__wochentage {
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
width: 100% !important;
margin-bottom: 1.5% !important;
text-align: center !important;
font-size: clamp(
8px,
.9vw,
14px
) !important;
font-weight: 700 !important;
opacity: .68 !important;
}
/* ============================================================
DATUMSTAGE
============================================================ */
.mhl-logbuch-v2__tage {
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
gap: 3% 2.5% !important;
width: 100% !important;
}
.mhl-logbuch-v2__tag {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
min-width: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #3b2410 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size: clamp(
9px,
1vw,
16px
) !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
.mhl-logbuch-v2__tag.verfügbar:hover {
background:
rgba(66, 37, 15, .12) !important;
transform: scale(1.08) !important;
}
.mhl-logbuch-v2__tag.heute {
background:
rgba(66, 37, 15, .18) !important;
}
.mhl-logbuch-v2__tag.ausgewählt {
background:
rgba(53, 28, 10, .30) !important;
box-shadow:
0 2px 7px rgba(40,20,5,.25) !important;
}
.mhl-logbuch-v2__tag.gesperrt {
color:
rgba(55,32,14,.30) !important;
background:
rgba(70,45,20,.035) !important;
cursor: not-allowed !important;
text-decoration: line-through !important;
}
.mhl-logbuch-v2__tag.leer {
pointer-events: none !important;
}
/* ============================================================
RECHTE GESCHICHTE
============================================================ */
.mhl-logbuch-v2__geschichte {
position: absolute !important;
left: 56.5% !important;
top: 23.5% !important;
width: 35.5% !important;
height: 57% !important;
box-sizing: border-box !important;
z-index: 25 !important;
padding:
1% 2.5% 1% 2% !important;
overflow: hidden !important;
color: #302010 !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
"Bradley Hand",
cursive !important;
font-size: clamp(
11px,
1.25vw,
19px
) !important;
line-height: 1.42 !important;
transform: rotate(-.25deg) !important;
}
.mhl-logbuch-v2__geschichte h1 {
margin: 0 0 .25em !important;
padding: 0 !important;
text-align: center !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
cursive !important;
font-size: clamp(
19px,
2.25vw,
34px
) !important;
line-height: 1.05 !important;
color: #28170c !important;
}
.mhl-logbuch-v2__datum {
margin-bottom: .8em !important;
text-align: right !important;
font-size: .72em !important;
font-style: italic !important;
opacity: .75 !important;
}
.mhl-logbuch-v2__text p {
margin:
0 0 .75em 0 !important;
padding: 0 !important;
}
.mhl-logbuch-v2__signatur {
margin-top: .8em !important;
text-align: right !important;
font-style: italic !important;
}
/* ============================================================
POPUP
============================================================ */
.mhl-logbuch-v2__popup {
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background:
rgba(20,12,5,.48) !important;
opacity: 0 !important;
transition: opacity .15s ease !important;
}
.mhl-logbuch-v2__popup[hidden] {
display: none !important;
}
.mhl-logbuch-v2__popup.is-visible {
opacity: 1 !important;
}
.mhl-logbuch-v2__popupbox {
position: relative !important;
width: min(
420px,
calc(100vw - 40px)
) !important;
padding: 30px !important;
box-sizing: border-box !important;
border:
2px solid rgba(75,45,20,.55) !important;
border-radius: 8px !important;
background:
linear-gradient(
135deg,
#ead3a5,
#d9b87e
) !important;
color: #321d0d !important;
text-align: center !important;
box-shadow:
0 18px 50px rgba(0,0,0,.45) !important;
}
.mhl-logbuch-v2__popupbox h2 {
margin: 0 0 12px !important;
font-family:
Georgia,
serif !important;
}
.mhl-logbuch-v2__popupbox p {
margin: 0 !important;
font-family:
"URW Chancery L",
"Brush Script MT",
cursive !important;
font-size: 18px !important;
line-height: 1.4 !important;
}
.mhl-logbuch-v2__popupclose {
position: absolute !important;
top: 3px !important;
right: 8px !important;
border: 0 !important;
background: transparent !important;
color: #321d0d !important;
font-size: 28px !important;
cursor: pointer !important;
}
/* ============================================================
TABLET
============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
.mhl-logbuch-v2 {
width: min(
calc(100vw - 10px),
calc((100vh - 95px) * 1.5)
) !important;
}
.mhl-logbuch-v2__kalender {
left: 10.5% !important;
top: 20% !important;
width: 36% !important;
}
.mhl-logbuch-v2__jahr {
font-size:
clamp(13px, 2.4vw, 25px) !important;
}
.mhl-logbuch-v2__tag {
font-size:
clamp(7px, 1.15vw, 12px) !important;
}
.mhl-logbuch-v2__geschichte {
font-size:
clamp(8px, 1.45vw, 15px) !important;
line-height: 1.34 !important;
}
.mhl-logbuch-v2__geschichte h1 {
font-size:
clamp(15px, 2.5vw, 25px) !important;
}
}
/* ============================================================
MOBIL
============================================================ */
@media (max-width: 767px) {
.mhl-logbuch-v2 {
width: calc(100vw - 4px) !important;
}
.mhl-logbuch-v2__kalender {
left: 9.5% !important;
top: 19% !important;
width: 38% !important;
}
.mhl-logbuch-v2__jahr {
font-size:
clamp(8px, 3.5vw, 17px) !important;
}
.mhl-logbuch-v2__schloss {
font-size: .5em !important;
}
.mhl-logbuch-v2__monatkopf strong {
font-size:
clamp(7px, 2.8vw, 14px) !important;
}
.mhl-logbuch-v2__monatbutton {
font-size:
clamp(13px, 4.5vw, 24px) !important;
}
.mhl-logbuch-v2__wochentage {
font-size:
clamp(4px, 1.8vw, 9px) !important;
}
.mhl-logbuch-v2__tag {
font-size:
clamp(4px, 1.9vw, 9px) !important;
}
.mhl-logbuch-v2__geschichte {
left: 56.5% !important;
top: 23% !important;
width: 35.5% !important;
height: 58% !important;
font-size:
clamp(6px, 2.2vw, 11px) !important;
line-height: 1.28 !important;
}
.mhl-logbuch-v2__geschichte h1 {
font-size:
clamp(9px, 3.7vw, 17px) !important;
}
.mhl-logbuch-v2__popupbox {
padding: 24px !important;
}
}
/* ============================================================
MHL LOGBUCH – 1095 TAGE
KALENDER LINKS / GESCHICHTEN RECHTS
============================================================ */
#mhlLogbuch1095 {
position: relative !important;
width: min(
calc(100vw - 12px),
calc((100vh - 105px) * 1.5)
) !important;
aspect-ratio: 1536 / 1024 !important;
margin: 0 auto !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* ============================================================
ECHTES BUCHBILD
============================================================ */
#mhlLogbuch1095 .mhl-logbuch-1095__bild {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
/* ============================================================
KALENDER
============================================================ */
#mhlLogbuch1095 .mhl-logbuch-1095__calendar {
position: absolute !important;
left: 10.2% !important;
top: 20.0% !important;
width: 36.3% !important;
z-index: 50 !important;
color: #3b2410 !important;
box-sizing: border-box !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
}
/* Jahre */
#mhlLogbuch1095 .mhl-logbuch-1095__years {
display: grid !important;
grid-template-columns:
repeat(3, 1fr) !important;
align-items: center !important;
width: 100% !important;
margin: 0 0 3.5% 0 !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__year {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: #42260f !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(18px, 2.25vw, 34px) !important;
font-weight: 700 !important;
line-height: 1 !important;
padding: 4px 2px !important;
margin: 0 !important;
cursor: pointer !important;
text-align: center !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__year.is-active {
color: #211105 !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 6px !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__year.is-locked {
color:
rgba(66,38,15,.30) !important;
cursor: not-allowed !important;
}
/* Monat */
#mhlLogbuch1095 .mhl-logbuch-1095__month-row {
display: grid !important;
grid-template-columns:
14% 72% 14% !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 2.0% !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__month {
text-align: center !important;
font-size:
clamp(14px, 1.55vw, 24px) !important;
font-weight: 700 !important;
text-transform: capitalize !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__nav {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: #4a2a12 !important;
font-family: Georgia, serif !important;
font-size:
clamp(24px, 2.6vw, 39px) !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
text-align: center !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__nav:disabled {
opacity: .18 !important;
cursor: not-allowed !important;
}
/* Wochentage */
#mhlLogbuch1095 .mhl-logbuch-1095__weekdays {
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
width: 100% !important;
margin-bottom: 1.2% !important;
text-align: center !important;
font-size:
clamp(8px, .88vw, 14px) !important;
font-weight: 700 !important;
opacity: .72 !important;
}
/* ============================================================
TAGE
============================================================ */
#mhlLogbuch1095 .mhl-logbuch-1095__days {
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
grid-auto-rows: auto !important;
column-gap: 2.8% !important;
row-gap: 3.5% !important;
width: 100% !important;
min-height: 0 !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__day {
appearance: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #38200e !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(9px, 1.02vw, 17px) !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__day.is-available:hover {
background:
rgba(70,40,15,.12) !important;
transform: scale(1.08) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__day.is-today {
background:
rgba(63,34,12,.22) !important;
box-shadow:
0 0 0 2px rgba(63,34,12,.16) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__day.is-selected {
background:
rgba(50,25,8,.30) !important;
box-shadow:
0 2px 7px rgba(42,20,5,.22) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__day.is-locked {
color:
rgba(60,35,15,.27) !important;
background:
rgba(70,40,15,.035) !important;
text-decoration:
line-through !important;
cursor: not-allowed !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__day.is-empty {
pointer-events: none !important;
}
/* Hinweis */
#mhlLogbuch1095 .mhl-logbuch-1095__calendar-note {
margin-top: 3% !important;
min-height: 1.2em !important;
text-align: center !important;
color:
rgba(55,31,12,.72) !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
cursive !important;
font-size:
clamp(8px, .9vw, 14px) !important;
font-style: italic !important;
}
/* ============================================================
RECHTE GESCHICHTE
============================================================ */
#mhlLogbuch1095 .mhl-logbuch-1095__story {
position: absolute !important;
left: 56.6% !important;
top: 23.0% !important;
width: 35.0% !important;
height: 58.5% !important;
z-index: 60 !important;
box-sizing: border-box !important;
padding:
1.0% 2.0% 1.0% 1.6% !important;
overflow: hidden !important;
color: #2d1a0b !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
"Bradley Hand",
cursive !important;
font-size:
clamp(10px, 1.22vw, 19px) !important;
line-height: 1.40 !important;
transform: rotate(-.25deg) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story h1 {
margin: 0 0 .20em 0 !important;
padding: 0 !important;
text-align: center !important;
color: #28170a !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
cursive !important;
font-size:
clamp(19px, 2.25vw, 34px) !important;
line-height: 1.05 !important;
font-weight: 700 !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story-date {
margin:
0 0 .75em 0 !important;
text-align: right !important;
font-size: .72em !important;
font-style: italic !important;
opacity: .74 !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story-text p {
margin:
0 0 .72em 0 !important;
padding: 0 !important;
font: inherit !important;
color: inherit !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story-signature {
margin-top: .6em !important;
text-align: right !important;
font-style: italic !important;
}
/* ============================================================
POPUP
============================================================ */
#mhlLogbuch1095 .mhl-logbuch-1095__popup {
position: fixed !important;
inset: 0 !important;
z-index: 999999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background:
rgba(20,12,5,.48) !important;
opacity: 0 !important;
transition: opacity .15s ease !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__popup[hidden] {
display: none !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__popup.is-visible {
opacity: 1 !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__popup-box {
position: relative !important;
width: min(
420px,
calc(100vw - 40px)
) !important;
box-sizing: border-box !important;
padding: 30px !important;
border:
2px solid rgba(74,43,19,.55) !important;
border-radius: 8px !important;
background:
linear-gradient(
135deg,
#ead3a5,
#d8b77f
) !important;
color: #321d0c !important;
text-align: center !important;
box-shadow:
0 18px 50px rgba(0,0,0,.45) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__popup-box h2 {
margin:
0 0 10px 0 !important;
font-family:
Georgia,
serif !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__popup-box p {
margin: 0 !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
cursive !important;
font-size: 18px !important;
line-height: 1.4 !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__popup-close {
position: absolute !important;
top: 3px !important;
right: 8px !important;
border: 0 !important;
background: transparent !important;
color: #321d0c !important;
font-size: 28px !important;
cursor: pointer !important;
}
/* ============================================================
TABLET
============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
#mhlLogbuch1095 {
width: min(
calc(100vw - 8px),
calc((100vh - 92px) * 1.5)
) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__year {
font-size:
clamp(13px, 2.35vw, 26px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__day {
font-size:
clamp(7px, 1.15vw, 13px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story {
font-size:
clamp(8px, 1.42vw, 15px) !important;
line-height: 1.34 !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story h1 {
font-size:
clamp(14px, 2.4vw, 25px) !important;
}
}
/* ============================================================
MOBIL
============================================================ */
@media (max-width: 767px) {
#mhlLogbuch1095 {
width: calc(100vw - 4px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__calendar {
left: 9.5% !important;
top: 19.5% !important;
width: 38.0% !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__year {
font-size:
clamp(8px, 3.45vw, 17px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__month {
font-size:
clamp(7px, 2.65vw, 14px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__nav {
font-size:
clamp(13px, 4.5vw, 24px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__weekdays {
font-size:
clamp(4px, 1.75vw, 9px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__day {
font-size:
clamp(4px, 1.85vw, 9px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__calendar-note {
font-size:
clamp(4px, 1.8vw, 9px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story {
left: 56.4% !important;
top: 22.5% !important;
width: 35.4% !important;
height: 59% !important;
font-size:
clamp(6px, 2.15vw, 11px) !important;
line-height: 1.27 !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story h1 {
font-size:
clamp(9px, 3.65vw, 17px) !important;
}
#mhlLogbuch1095 .mhl-logbuch-1095__story-date {
font-size: .68em !important;
}
}
/* ============================================================
MHL LOGBUCH FINAL V1
EIN BUCH / KALENDER LINKS / GESCHICHTE RECHTS
============================================================ */
#mhlLogbuchFinal {
position: relative !important;
width: min(
calc(100vw - 12px),
calc((100vh - 105px) * 1.5)
) !important;
aspect-ratio: 1536 / 1024 !important;
margin: 0 auto !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__book {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
/* ============================================================
KALENDER LINKS
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__calendar {
position: absolute !important;
left: 10.7% !important;
top: 20.0% !important;
width: 35.7% !important;
z-index: 100 !important;
color: #38200e !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
box-sizing: border-box !important;
}
/* Jahre */
#mhlLogbuchFinal .mhl-logbuch-final__years {
display: grid !important;
grid-template-columns:
repeat(3, 1fr) !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 4.0% !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__year {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: #45270f !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(18px, 2.25vw, 34px) !important;
font-weight: 700 !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
text-align: center !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__year.is-active {
color: #241508 !important;
text-decoration:
underline !important;
text-decoration-thickness:
2px !important;
text-underline-offset:
6px !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__year.is-locked {
opacity: .30 !important;
cursor: not-allowed !important;
text-decoration: none !important;
}
/* Monat */
#mhlLogbuchFinal .mhl-logbuch-final__monthbar {
display: grid !important;
grid-template-columns:
12% 76% 12% !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 2.5% !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__monthname {
text-align: center !important;
font-size:
clamp(14px, 1.5vw, 24px) !important;
font-weight: 700 !important;
text-transform: capitalize !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__monthnav {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: #4a2b13 !important;
font-family: Georgia, serif !important;
font-size:
clamp(24px, 2.5vw, 38px) !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__monthnav:disabled {
opacity: .18 !important;
cursor: not-allowed !important;
}
/* Wochentage */
#mhlLogbuchFinal .mhl-logbuch-final__weekdays {
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
width: 100% !important;
margin-bottom: 1.5% !important;
text-align: center !important;
font-size:
clamp(8px, .9vw, 14px) !important;
font-weight: 700 !important;
opacity: .72 !important;
}
/* Tage */
#mhlLogbuchFinal .mhl-logbuch-final__days {
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
column-gap: 2.3% !important;
row-gap: 2.4% !important;
width: 100% !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day {
appearance: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #38200e !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(9px, 1.0vw, 16px) !important;
font-weight: 700 !important;
line-height: 1 !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-available:hover {
background:
rgba(65, 36, 13, .13) !important;
transform: scale(1.08) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today {
background:
rgba(60, 31, 9, .20) !important;
box-shadow:
0 0 0 2px rgba(60,31,9,.14) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected {
background:
rgba(48, 24, 7, .30) !important;
box-shadow:
0 2px 7px rgba(40,18,5,.24) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-locked {
color:
rgba(60, 35, 15, .25) !important;
background:
rgba(70, 40, 15, .035) !important;
text-decoration:
line-through !important;
cursor:
not-allowed !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-empty {
pointer-events: none !important;
}
/* ============================================================
GESCHICHTE RECHTS
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__story {
position: absolute !important;
left: 56.7% !important;
top: 22.5% !important;
width: 34.8% !important;
height: 59.5% !important;
z-index: 110 !important;
box-sizing: border-box !important;
padding:
1.0% 2.0% 1.0% 1.6% !important;
overflow: hidden !important;
color: #2b190a !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
"Bradley Hand",
cursive !important;
font-size:
clamp(10px, 1.20vw, 19px) !important;
line-height: 1.40 !important;
text-align: left !important;
transform: rotate(-.2deg) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__story h1 {
margin:
0 0 .25em 0 !important;
padding: 0 !important;
color: #27160a !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
cursive !important;
font-size:
clamp(19px, 2.2vw, 34px) !important;
line-height: 1.05 !important;
font-weight: 700 !important;
text-align: center !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__storydate {
margin:
0 0 .75em 0 !important;
text-align: right !important;
font-size: .72em !important;
font-style: italic !important;
opacity: .74 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__storytext {
width: 100% !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__storytext p {
margin:
0 0 .70em 0 !important;
padding: 0 !important;
color: #2b190a !important;
font: inherit !important;
line-height: inherit !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__signature {
margin-top:
.7em !important;
text-align: right !important;
font-size: .85em !important;
font-style: italic !important;
}
/* ============================================================
POPUP
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__popup {
position: fixed !important;
inset: 0 !important;
z-index: 999999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background:
rgba(15, 9, 4, .50) !important;
opacity: 0 !important;
transition:
opacity .16s ease !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popup[hidden] {
display: none !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popup.is-visible {
opacity: 1 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupbox {
position: relative !important;
width:
min(420px, calc(100vw - 40px)) !important;
box-sizing: border-box !important;
padding: 30px !important;
border:
2px solid rgba(75,45,20,.55) !important;
border-radius: 8px !important;
background:
linear-gradient(
135deg,
#ead3a5,
#d8b77f
) !important;
color: #321d0c !important;
text-align: center !important;
box-shadow:
0 18px 50px rgba(0,0,0,.45) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupbox h2 {
margin:
0 0 10px 0 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupbox p {
margin: 0 !important;
font-family:
"URW Chancery L",
"Brush Script MT",
"Segoe Print",
cursive !important;
font-size: 18px !important;
line-height: 1.4 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 2px !important;
right: 8px !important;
width: 30px !important;
height: 30px !important;
border: 0 !important;
background: transparent !important;
color: #321d0c !important;
font-size: 28px !important;
line-height: 30px !important;
cursor: pointer !important;
}
/* ============================================================
TABLET
============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
#mhlLogbuchFinal {
width: min(
calc(100vw - 8px),
calc((100vh - 92px) * 1.5)
) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__year {
font-size:
clamp(13px, 2.4vw, 26px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__monthname {
font-size:
clamp(11px, 1.7vw, 19px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day {
font-size:
clamp(7px, 1.15vw, 13px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__story {
font-size:
clamp(8px, 1.38vw, 15px) !important;
line-height: 1.34 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__story h1 {
font-size:
clamp(14px, 2.35vw, 24px) !important;
}
}
/* ============================================================
MOBIL
============================================================ */
@media (max-width: 767px) {
#mhlLogbuchFinal {
width: calc(100vw - 4px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__calendar {
left: 9.5% !important;
top: 19.5% !important;
width: 37.8% !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__year {
font-size:
clamp(8px, 3.5vw, 17px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__monthname {
font-size:
clamp(7px, 2.7vw, 14px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__monthnav {
font-size:
clamp(13px, 4.5vw, 24px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__weekdays {
font-size:
clamp(4px, 1.8vw, 9px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day {
font-size:
clamp(4px, 1.9vw, 9px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__story {
left: 56.3% !important;
top: 22.5% !important;
width: 35.7% !important;
height: 59.5% !important;
font-size:
clamp(6px, 2.1vw, 11px) !important;
line-height: 1.25 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__story h1 {
font-size:
clamp(9px, 3.6vw, 17px) !important;
}
}
/* ============================================================
MHL LOGBUCH – KALENDER FINALER SICHTBARKEITSFIX
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__days {
position: relative !important;
display: grid !important;
grid-template-columns:
repeat(7, minmax(0, 1fr)) !important;
column-gap: 2.3% !important;
row-gap: 2.4% !important;
width: 100% !important;
min-height: 120px !important;
visibility: visible !important;
opacity: 1 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
min-width: 0 !important;
min-height: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #38200e !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-weight: 700 !important;
cursor: pointer !important;
z-index: 150 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-empty {
visibility: hidden !important;
pointer-events: none !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-locked {
color: rgba(60,35,15,.28) !important;
cursor: not-allowed !important;
text-decoration: line-through !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected {
background:
rgba(55,28,8,.24) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__story {
visibility: visible !important;
opacity: 1 !important;
z-index: 180 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__storytext {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__storytext p {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin:
0 0 .70em 0 !important;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
#mhlLogbuchFinal .mhl-logbuch-final__days {
min-height: 100px !important;
}
}
/* Mobil */
@media (max-width: 767px) {
#mhlLogbuchFinal .mhl-logbuch-final__days {
min-height: 80px !important;
}
}
/* ============================================================
MHL LOGBUCH – POPUP / STORY FINAL V2
============================================================ */
/*
* Popup-Schließen:
* X vollständig entfernen
* Anker als Symbol verwenden
*/
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
font-size: 0 !important;
width: 38px !important;
height: 38px !important;
top: 5px !important;
right: 7px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
background: transparent !important;
color: #4a2b14 !important;
cursor: pointer !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose::before {
content: "⚓" !important;
display: block !important;
font-family:
"Segoe UI Symbol",
"Noto Sans Symbols 2",
"Arial Unicode MS",
sans-serif !important;
font-size: 27px !important;
line-height: 1 !important;
transform: rotate(-8deg) !important;
}
/*
* Popup-Überschrift etwas größer
*/
#mhlLogbuchFinal .mhl-logbuch-final__popupbox h2 {
font-size: 29px !important;
line-height: 1.1 !important;
margin-bottom: 13px !important;
}
/*
* Popup-Text größer und besser lesbar
*/
#mhlLogbuchFinal .mhl-logbuch-final__popupbox p {
font-size: 21px !important;
line-height: 1.48 !important;
padding: 0 5px !important;
}
/*
* Rechte Geschichte:
* deutlich größer und nutzt die Buchseite besser aus.
*/
#mhlLogbuchFinal .mhl-logbuch-final__story {
left: 56.3% !important;
top: 21.7% !important;
width: 35.6% !important;
height: 61.5% !important;
padding:
1.0% 1.8% 1.0% 1.4% !important;
font-size:
clamp(12px, 1.38vw, 22px) !important;
line-height: 1.47 !important;
}
/*
* Überschrift der Geschichte größer
*/
#mhlLogbuchFinal .mhl-logbuch-final__story h1 {
font-size:
clamp(21px, 2.45vw, 38px) !important;
line-height: 1.07 !important;
margin-bottom: .30em !important;
}
/*
* Datum etwas größer
*/
#mhlLogbuchFinal .mhl-logbuch-final__storydate {
font-size: .78em !important;
margin-bottom: .85em !important;
}
/*
* Absätze:
* mehr Fläche nutzen, aber sauber innerhalb der Seite bleiben.
*/
#mhlLogbuchFinal .mhl-logbuch-final__storytext p {
margin-bottom: .78em !important;
line-height: 1.47 !important;
}
/*
* Signatur
*/
#mhlLogbuchFinal .mhl-logbuch-final__signature {
font-size: .88em !important;
margin-top: .8em !important;
}
/* ============================================================
TABLET
============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
#mhlLogbuchFinal .mhl-logbuch-final__story {
left: 56.2% !important;
top: 21.7% !important;
width: 35.8% !important;
height: 61.5% !important;
font-size:
clamp(9px, 1.58vw, 17px) !important;
line-height: 1.42 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__story h1 {
font-size:
clamp(16px, 2.75vw, 28px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__storydate {
font-size: .74em !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupbox p {
font-size: 19px !important;
}
}
/* ============================================================
MOBIL
============================================================ */
@media (max-width: 767px) {
#mhlLogbuchFinal .mhl-logbuch-final__story {
left: 56.0% !important;
top: 21.5% !important;
width: 36.0% !important;
height: 62.0% !important;
font-size:
clamp(7px, 2.35vw, 12px) !important;
line-height: 1.34 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__story h1 {
font-size:
clamp(10px, 4.0vw, 19px) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupbox {
width:
min(440px, calc(100vw - 28px)) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupbox h2 {
font-size: 24px !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupbox p {
font-size: 17px !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose::before {
font-size: 23px !important;
}
}
/* ============================================================
MHL LOGBUCH – EIN EINZIGER ANIMIERTER ANKER
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__anchor-v1 {
position: absolute !important;
left: 47.7% !important;
bottom: 7.0% !important;
z-index: 200 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
color: rgba(67, 43, 21, .88) !important;
font-family:
"Segoe UI Symbol",
"Noto Sans Symbols 2",
sans-serif !important;
font-size: 34px !important;
line-height: 1 !important;
transform-origin: 50% 45% !important;
pointer-events: none !important;
user-select: none !important;
animation:
mhl-logbuch-anker-schaukeln-v1
3.8s
ease-in-out
infinite !important;
filter:
drop-shadow(
1px 2px 1px rgba(40,20,5,.24)
) !important;
}
@keyframes mhl-logbuch-anker-schaukeln-v1 {
0% {
transform:
rotate(-8deg)
translateY(0);
}
25% {
transform:
rotate(-2deg)
translateY(-2px);
}
50% {
transform:
rotate(7deg)
translateY(0);
}
75% {
transform:
rotate(2deg)
translateY(-1px);
}
100% {
transform:
rotate(-8deg)
translateY(0);
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
#mhlLogbuchFinal .mhl-logbuch-final__anchor-v1 {
left: 47.7% !important;
bottom: 6.5% !important;
width: 32px !important;
height: 32px !important;
font-size: 27px !important;
}
}
/* Mobil */
@media (max-width: 767px) {
#mhlLogbuchFinal .mhl-logbuch-final__anchor-v1 {
left: 47.5% !important;
bottom: 5.5% !important;
width: 24px !important;
height: 24px !important;
font-size: 20px !important;
}
}
/* ============================================================
MHL LOGBUCH – FAVICON ALS POPUP-SCHLIESSER
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 5px !important;
right: 7px !important;
width: 34px !important;
height: 34px !important;
padding: 3px !important;
border: 0 !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 10 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon {
display: block !important;
width: 25px !important;
height: 25px !important;
max-width: 25px !important;
max-height: 25px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
opacity: .92 !important;
transition:
transform .15s ease,
opacity .15s ease !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover
.mhl-logbuch-final__popupclose-icon {
transform: scale(1.10) !important;
opacity: 1 !important;
}
/* ============================================================
MHL LOGBUCH – POPUP FAVICON IM KREIS
============================================================ */
/*
* Alle bisherigen Anker-/Symbol-Dekorationen am Popupbutton
* ausschalten.
*/
#mhlLogbuchFinal .mhl-logbuch-final__popupclose::before,
#mhlLogbuchFinal .mhl-logbuch-final__popupclose::after {
content: none !important;
display: none !important;
}
/* Kein Text-X, kein Anker */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 7px !important;
right: 9px !important;
width: 42px !important;
height: 42px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background:
radial-gradient(
circle at 35% 30%,
#f4dfa9 0%,
#dfbc78 70%,
#bd9251 100%
) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow:
0 3px 8px rgba(60,35,10,.28),
inset 0 1px 2px rgba(255,255,255,.42) !important;
cursor: pointer !important;
z-index: 20 !important;
}
/*
* Das Favicon sitzt mittig im Kreis.
* Das vorhandene Favicon selbst ist das einzige Symbol.
*/
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon {
display: block !important;
width: 26px !important;
height: 26px !important;
max-width: 26px !important;
max-height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
object-fit: contain !important;
opacity: 1 !important;
pointer-events: none !important;
}
/* Hover */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover {
transform: scale(1.06) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:active {
transform: scale(.97) !important;
}
/* Falls alte Styles den Anker direkt im Popup erzeugen */
#mhlLogbuchFinal .mhl-logbuch-final__popupbox > .anchor,
#mhlLogbuchFinal .mhl-logbuch-final__popupbox > .anchor-icon,
#mhlLogbuchFinal .mhl-logbuch-final__popupbox > [data-anchor],
#mhlLogbuchFinal .mhl-logbuch-final__popupbox .anchor-icon,
#mhlLogbuchFinal .mhl-logbuch-final__popupbox .anchor {
display: none !important;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
width: 38px !important;
height: 38px !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon {
width: 23px !important;
height: 23px !important;
max-width: 23px !important;
max-height: 23px !important;
min-width: 23px !important;
min-height: 23px !important;
}
}
/* Mobil */
@media (max-width: 767px) {
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
width: 34px !important;
height: 34px !important;
top: 5px !important;
right: 6px !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon {
width: 21px !important;
height: 21px !important;
max-width: 21px !important;
max-height: 21px !important;
min-width: 21px !important;
min-height: 21px !important;
}
}
/* ============================================================
MHL LOGBUCH – ECHTES FAVICON-X
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 4px !important;
right: 7px !important;
width: 34px !important;
height: 34px !important;
padding: 4px !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 20 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon {
display: block !important;
width: 24px !important;
height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
object-fit: contain !important;
object-position: center !important;
border: 0 !important;
border-radius: 50% !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
box-shadow:
0 1px 4px rgba(0,0,0,.20) !important;
transition:
transform .15s ease,
opacity .15s ease !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover
.mhl-logbuch-final__popupclose-icon {
transform: scale(1.08) !important;
}
/* ============================================================
MHL LOGBUCH – MHL SAILBOAT FAVICON ALS SCHLIESS-X
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 4px !important;
right: 6px !important;
width: 34px !important;
height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
z-index: 50 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon {
display: block !important;
width: 25px !important;
height: 25px !important;
min-width: 25px !important;
min-height: 25px !important;
max-width: 25px !important;
max-height: 25px !important;
object-fit: contain !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
opacity: 1 !important;
box-shadow:
0 1px 4px rgba(0,0,0,.22) !important;
transition:
transform .15s ease !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover
.mhl-logbuch-final__popupclose-icon {
transform: scale(1.08) !important;
}
/* ============================================================
MHL LOGBUCH – FESTES MHL FAVICON ALS SCHLIESS-SYMBOL
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 4px !important;
right: 7px !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 3px !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
z-index: 100 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon {
display: block !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center !important;
border: 0 !important;
border-radius: 50% !important;
opacity: 1 !important;
box-shadow:
0 1px 4px rgba(0,0,0,.18) !important;
transition:
transform .15s ease !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover
.mhl-logbuch-final__popupclose-icon {
transform: scale(1.08) !important;
}
/* ============================================================
MHL LOGBUCH – 1 ANKER ALS SCHLIESSEN-SYMBOL
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 3px !important;
right: 7px !important;
width: 34px !important;
height: 34px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 50 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor {
display: block !important;
font-family:
"Segoe UI Symbol",
"Noto Sans Symbols 2",
"DejaVu Sans",
sans-serif !important;
font-size: 23px !important;
line-height: 1 !important;
color: #6b481d !important;
text-shadow:
0 1px 1px rgba(255,255,255,.45),
0 1px 3px rgba(50,30,10,.25) !important;
transform: rotate(-8deg) !important;
transition:
transform .15s ease,
color .15s ease !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover
.mhl-logbuch-final__popup-anchor {
color: #43270f !important;
transform: rotate(-8deg) scale(1.10) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon {
display: none !important;
}
/* ============================================================
MHL LOGBUCH – CLEAN SINGLE ANCHOR
============================================================ */
/* Alte Varianten vollständig deaktivieren */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon,
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor {
display: none !important;
}
/* Kein Kreis / keine Fläche */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 4px !important;
right: 7px !important;
width: 38px !important;
height: 38px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #6d481d !important;
cursor: pointer !important;
z-index: 100 !important;
}
/* DER EINE ANKER */
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor-svg {
display: block !important;
width: 25px !important;
height: 25px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
color: #6d481d !important;
fill: none !important;
filter:
drop-shadow(
0 1px 1px rgba(255,255,255,.45)
)
drop-shadow(
0 1px 2px rgba(50,30,10,.20)
) !important;
transform: rotate(-4deg) !important;
transition:
transform .15s ease,
color .15s ease !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover
.mhl-logbuch-final__popup-anchor-svg {
color: #43270f !important;
transform:
rotate(-4deg)
scale(1.10) !important;
}
/* ============================================================
MHL LOGBUCH – EINZIGES SCHLIESS-SYMBOL
============================================================ */
/* Alles bisherige innerhalb des Buttons aus */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose > *,
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon,
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor,
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor-svg {
display: none !important;
}
/* Button selbst */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 5px !important;
right: 7px !important;
width: 38px !important;
height: 38px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 999 !important;
}
/* GENAU EIN ANKER */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose::before {
content: "⚓" !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
color: #6b451b !important;
font-family:
"Segoe UI Symbol",
"Noto Sans Symbols 2",
"DejaVu Sans",
sans-serif !important;
font-size: 25px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow:
0 1px 1px rgba(255,255,255,.45),
0 1px 2px rgba(50,30,10,.28) !important;
transform: rotate(-5deg) !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover::before {
color: #43270f !important;
transform:
rotate(-5deg)
scale(1.10) !important;
}
/* ============================================================
MHL LOGBUCH – SEGELBOOT ALS SCHLIESS-SYMBOL
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose {
position: absolute !important;
top: 4px !important;
right: 7px !important;
width: 38px !important;
height: 38px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 999 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose-icon,
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor,
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor-svg {
display: none !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popup-boat {
display: block !important;
color: #6b451b !important;
font-family:
"Segoe UI Symbol",
"Noto Sans Symbols 2",
"DejaVu Sans",
sans-serif !important;
font-size: 24px !important;
line-height: 1 !important;
text-shadow:
0 1px 1px rgba(255,255,255,.45),
0 1px 2px rgba(50,30,10,.25) !important;
transform: rotate(-7deg) !important;
transition:
transform .15s ease,
color .15s ease !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__popupclose:hover
.mhl-logbuch-final__popup-boat {
color: #43270f !important;
transform: rotate(-7deg) scale(1.10) !important;
}
/* ============================================================
MHL LOGBUCH – ECHTES SEGELBOOT
/mhl-sailboat-header.ico
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-popup-close-echt {
position: absolute !important;
top: 4px !important;
right: 7px !important;
width: 40px !important;
height: 40px !important;
padding: 3px !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 99999 !important;
}
#mhlLogbuchFinal .mhl-logbuch-popup-close-echt__img {
display: block !important;
width: 29px !important;
height: 29px !important;
min-width: 29px !important;
min-height: 29px !important;
max-width: 29px !important;
max-height: 29px !important;
object-fit: contain !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 1 !important;
visibility: visible !important;
filter:
drop-shadow(0 1px 1px rgba(255,255,255,.45))
drop-shadow(0 1px 2px rgba(40,20,5,.28)) !important;
transform: none !important;
pointer-events: none !important;
}
#mhlLogbuchFinal .mhl-logbuch-popup-close-echt:hover
.mhl-logbuch-popup-close-echt__img {
transform: scale(1.08) !important;
}
/* ============================================================
MHL LOGBUCH – KONTRAST-SEGELBOOT
============================================================ */
/* Alle alten Varianten aus */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose,
#mhlLogbuchFinal .mhl-logbuch-popup-close-echt {
display: none !important;
}
/* Neuer Schließenbutton */
#mhlLogbuchFinal .mhl-logbuch-popup-close-kontrast {
position: absolute !important;
top: 4px !important;
right: 6px !important;
width: 42px !important;
height: 42px !important;
margin: 0 !important;
padding: 3px !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 999999 !important;
}
/*
* Heller Kreis hinter dem Boot für sicheren Kontrast.
*/
#mhlLogbuchFinal .mhl-logbuch-popup-boat-wrap {
width: 34px !important;
height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
border-radius: 50% !important;
background: #ead3a5 !important;
border: 2px solid #4b2b12 !important;
box-shadow:
0 2px 6px rgba(0,0,0,.30) !important;
}
/* Das echte Segelboot */
#mhlLogbuchFinal .mhl-logbuch-popup-boat-img {
display: block !important;
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
max-width: 26px !important;
max-height: 26px !important;
object-fit: contain !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 1 !important;
/*
* ICO kann je nach Datei sehr hell sein.
* Kontrast wird über dunkle Kontur + helle Fläche
* hinter dem eigentlichen Boot hergestellt.
*/
filter:
drop-shadow(
0 1px 0 #2d1808
)
drop-shadow(
0 1px 2px rgba(0,0,0,.45)
) !important;
pointer-events: none !important;
}
#mhlLogbuchFinal .mhl-logbuch-popup-close-kontrast:hover
.mhl-logbuch-popup-boat-wrap {
transform: scale(1.08) !important;
}
/* ============================================================
MHL LOGBUCH – ECHTES SEGELBOOT FINAL
============================================================ */
/* ALLES Alte deaktivieren */
#mhlLogbuchFinal .mhl-logbuch-final__popupclose,
#mhlLogbuchFinal .mhl-logbuch-popup-close-echt,
#mhlLogbuchFinal .mhl-logbuch-popup-close-kontrast,
#mhlLogbuchFinal .mhl-logbuch-popupclose,
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor,
#mhlLogbuchFinal .mhl-logbuch-final__popup-anchor-svg,
#mhlLogbuchFinal .mhl-logbuch-final__popup-boat,
#mhlLogbuchFinal .mhl-logbuch-final__popup-boat-wrap {
display: none !important;
}
/* NEUER BUTTON */
#mhlLogbuchFinal .mhl-logbuch-popup-segelboot-final {
position: absolute !important;
top: 5px !important;
right: 7px !important;
width: 40px !important;
height: 40px !important;
padding: 4px !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: #5a3517 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow:
0 2px 5px rgba(0,0,0,.35) !important;
cursor: pointer !important;
z-index: 100000 !important;
}
/* ECHTES SEGELBOOT-ICO */
#mhlLogbuchFinal .mhl-logbuch-popup-segelboot-final__img {
display: block !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 1 !important;
visibility: visible !important;
/*
* ICO bleibt erkennbar, wird aber dunkel genug
* für den hellen Papierhintergrund.
*/
filter:
brightness(.25)
contrast(1.8)
saturate(.85) !important;
pointer-events: none !important;
}
#mhlLogbuchFinal .mhl-logbuch-popup-segelboot-final:hover {
background: #42240e !important;
transform: scale(1.06) !important;
}
/* ============================================================
MHL LOGBUCH
VORHANDENE AUSWAHL BEIBEHALTEN
NUR OPTIK DES GRAUEN KREISES ERSETZEN
============================================================ */
/*
* Die bestehende Funktion verwendet weiterhin
* .is-selected.
*
* Wir ändern ausschließlich die Darstellung.
*/
/* Grauen Kreis vollständig entfernen */
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected {
position: relative !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #f4ecdc !important;
z-index: 5 !important;
}
/*
* Keine zusätzlichen Punkte / Spritzer.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::after,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::after {
content: none !important;
display: none !important;
background: transparent !important;
box-shadow: none !important;
}
/*
* LETZTER TINTENKLECKS
*
* Unregelmäßige Form statt perfektem Kreis.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::before,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 142% !important;
height: 138% !important;
transform:
translate(-50%, -50%)
rotate(-11deg) !important;
z-index: -1 !important;
clip-path: polygon(
8% 30%,
13% 20%,
24% 14%,
35% 11%,
45% 5%,
57% 9%,
68% 6%,
79% 13%,
89% 22%,
94% 33%,
91% 44%,
98% 55%,
92% 66%,
94% 77%,
83% 87%,
70% 88%,
59% 97%,
48% 91%,
36% 97%,
25% 90%,
15% 88%,
8% 78%,
11% 67%,
4% 57%,
9% 46%,
4% 38%
) !important;
background:
radial-gradient(
ellipse at 35% 35%,
rgba(3,51,125,.98) 0 22%,
rgba(5,61,140,.96) 23% 39%,
transparent 56%
),
radial-gradient(
ellipse at 65% 29%,
rgba(7,68,153,.98) 0 18%,
rgba(8,72,157,.86) 19% 36%,
transparent 53%
),
radial-gradient(
ellipse at 74% 63%,
rgba(3,49,120,.99) 0 21%,
rgba(5,59,137,.87) 22% 39%,
transparent 57%
),
radial-gradient(
ellipse at 31% 73%,
rgba(5,61,140,.97) 0 20%,
rgba(7,67,148,.84) 21% 40%,
transparent 58%
),
radial-gradient(
ellipse at 52% 52%,
rgba(4,59,138,.99) 0 30%,
rgba(6,67,150,.96) 31% 48%,
rgba(8,72,156,.72) 49% 57%,
transparent 70%
) !important;
filter:
blur(.35px)
saturate(1.16)
contrast(1.04) !important;
opacity: .98 !important;
pointer-events: none !important;
}
/*
* Zahl bleibt auf dem Klecks sichtbar.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected {
font-weight: 800 !important;
text-shadow:
0 1px 2px rgba(0,0,0,.42) !important;
}
/*
* Auch is-today allein darf keinen grauen Kreis erzeugen.
* Die vorhandene Funktion bleibt vollständig erhalten.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today:not(.is-selected),
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today:not(.is-selected) {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* ============================================================
MHL LOGBUCH
GRAUER AUSWAHLKREIS -> BLAUER TINTENKLECKS
============================================================ */
/*
* Alte graue Kreise vollständig entfernen.
*/
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
border: 0 !important;
}
/*
* Der aktuelle/ausgewählte Tag bekommt ausschließlich
* diesen einen Tintenklecks.
*/
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::after,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::after,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today::after,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today::after {
content: none !important;
display: none !important;
}
/*
* Klecks – bewusst unregelmäßig und leicht verlaufen.
*/
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::before,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::before,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today::before,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 142% !important;
height: 136% !important;
transform:
translate(-50%, -50%)
rotate(-9deg) !important;
z-index: -1 !important;
clip-path: polygon(
7% 31%,
13% 20%,
24% 14%,
35% 10%,
46% 6%,
58% 9%,
69% 5%,
80% 13%,
90% 22%,
95% 34%,
91% 45%,
98% 56%,
92% 68%,
95% 79%,
83% 88%,
70% 89%,
59% 97%,
47% 92%,
35% 97%,
23% 91%,
13% 87%,
8% 77%,
10% 65%,
4% 54%,
9% 43%,
4% 36%
) !important;
background:
radial-gradient(
ellipse at 34% 37%,
rgba(4,52,128,.99) 0 21%,
rgba(6,61,140,.96) 22% 39%,
transparent 57%
),
radial-gradient(
ellipse at 67% 30%,
rgba(7,69,153,.98) 0 19%,
rgba(8,67,149,.86) 20% 37%,
transparent 54%
),
radial-gradient(
ellipse at 74% 68%,
rgba(3,50,122,.99) 0 20%,
rgba(5,59,137,.87) 21% 40%,
transparent 57%
),
radial-gradient(
ellipse at 29% 72%,
rgba(6,62,143,.97) 0 21%,
rgba(8,68,149,.84) 22% 40%,
transparent 58%
),
radial-gradient(
ellipse at 51% 51%,
rgba(4,60,140,.99) 0 30%,
rgba(6,67,150,.95) 31% 49%,
rgba(8,72,156,.70) 50% 58%,
transparent 70%
) !important;
filter:
blur(.28px)
saturate(1.18)
contrast(1.04) !important;
opacity: .98 !important;
pointer-events: none !important;
}
/*
* Zahl bleibt über der Tinte.
*/
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today {
position: relative !important;
color: #f4ecdc !important;
font-weight: 800 !important;
text-shadow:
0 1px 2px rgba(0,0,0,.42) !important;
z-index: 5 !important;
}
/*
* Normale Tage bleiben unverändert.
*/
#mhlLogbuchStable .mhl-logbuch-stable__day.is-available:hover,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-available:hover {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* ============================================================
MHL LOGBUCH – NUR DIE AKTUELLE AUSWAHL IST BLAUE TINTE
============================================================ */
/*
* is-today ALLEIN darf niemals einen Klecks erzeugen.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today:not(.is-selected),
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today:not(.is-selected) {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #38200e !important;
}
/*
* Klecks wirklich NUR für die aktuell ausgewählte
* is-selected-Klasse.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today:not(.is-selected)::before,
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today:not(.is-selected)::after,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today:not(.is-selected)::before,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today:not(.is-selected)::after {
content: none !important;
display: none !important;
}
/*
* Alle alten Auswahl-Effekte entfernen.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected {
position: relative !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #f4ecdc !important;
z-index: 5 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::after,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::after {
content: none !important;
display: none !important;
}
/*
* EIN EINZIGER kleckiger blauer Tintenklecks.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::before,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 142% !important;
height: 138% !important;
transform:
translate(-50%, -50%)
rotate(-11deg) !important;
z-index: -1 !important;
clip-path: polygon(
8% 30%,
13% 20%,
24% 14%,
35% 10%,
45% 5%,
57% 9%,
68% 6%,
79% 13%,
89% 22%,
94% 33%,
91% 44%,
98% 55%,
92% 66%,
94% 77%,
83% 87%,
70% 88%,
59% 97%,
48% 91%,
36% 97%,
25% 90%,
15% 88%,
8% 78%,
11% 67%,
4% 57%,
9% 46%,
4% 38%
) !important;
background:
radial-gradient(
ellipse at 35% 35%,
rgba(3,51,125,.98) 0 22%,
rgba(5,61,140,.96) 23% 39%,
transparent 56%
),
radial-gradient(
ellipse at 65% 29%,
rgba(7,68,153,.98) 0 18%,
rgba(8,72,157,.86) 19% 36%,
transparent 53%
),
radial-gradient(
ellipse at 74% 63%,
rgba(3,49,120,.99) 0 21%,
rgba(5,59,137,.87) 22% 39%,
transparent 57%
),
radial-gradient(
ellipse at 31% 73%,
rgba(5,61,140,.97) 0 20%,
rgba(7,67,148,.84) 21% 40%,
transparent 58%
),
radial-gradient(
ellipse at 52% 52%,
rgba(4,59,138,.99) 0 30%,
rgba(6,67,150,.96) 31% 48%,
rgba(8,72,156,.72) 49% 57%,
transparent 70%
) !important;
filter:
blur(.35px)
saturate(1.16)
contrast(1.04) !important;
opacity: .98 !important;
pointer-events: none !important;
}
/*
* Zahl über dem Klecks.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected {
font-weight: 800 !important;
text-shadow:
0 1px 2px rgba(0,0,0,.42) !important;
}
/* ============================================================
MHL LOGBUCH – KLECKS NUR FÜR AKTUELLE AUSWAHL
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected {
position: relative !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #f4ecdc !important;
z-index: 5 !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::after,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::after {
content: none !important;
display: none !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::before,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 142% !important;
height: 138% !important;
transform:
translate(-50%, -50%)
rotate(-11deg) !important;
z-index: -1 !important;
clip-path: polygon(
8% 30%,
13% 20%,
24% 14%,
35% 10%,
45% 5%,
57% 9%,
68% 6%,
79% 13%,
89% 22%,
94% 33%,
91% 44%,
98% 55%,
92% 66%,
94% 77%,
83% 87%,
70% 88%,
59% 97%,
48% 91%,
36% 97%,
25% 90%,
15% 88%,
8% 78%,
11% 67%,
4% 57%,
9% 46%,
4% 38%
) !important;
background:
radial-gradient(
ellipse at 35% 35%,
rgba(3,51,125,.98) 0 22%,
rgba(5,61,140,.96) 23% 39%,
transparent 56%
),
radial-gradient(
ellipse at 65% 29%,
rgba(7,68,153,.98) 0 18%,
rgba(8,72,157,.86) 19% 36%,
transparent 53%
),
radial-gradient(
ellipse at 74% 63%,
rgba(3,49,120,.99) 0 21%,
rgba(5,59,137,.87) 22% 39%,
transparent 57%
),
radial-gradient(
ellipse at 31% 73%,
rgba(5,61,140,.97) 0 20%,
rgba(7,67,148,.84) 21% 40%,
transparent 58%
),
radial-gradient(
ellipse at 52% 52%,
rgba(4,59,138,.99) 0 30%,
rgba(6,67,150,.96) 31% 48%,
rgba(8,72,156,.72) 49% 57%,
transparent 70%
) !important;
filter:
blur(.30px)
saturate(1.18)
contrast(1.04) !important;
opacity: .98 !important;
pointer-events: none !important;
}
/*
* is-today allein bleibt ohne Klecks.
* Nur is-selected darf den Klecks anzeigen.
*/
#mhlLogbuchFinal .mhl-logbuch-final__day.is-today:not(.is-selected),
#mhlLogbuchStable .mhl-logbuch-stable__day.is-today:not(.is-selected) {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* ============================================================
MHL LOGBUCH – AUSWAHL = EINZIGER BLAUER TINTENKLECKS
============================================================ */
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected {
position: relative !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #f5eddf !important;
z-index: 5 !important;
}
/* Keine Punkte */
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::after,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::after {
content: none !important;
display: none !important;
}
/* Der kleckige blaue Tintenklecks */
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected::before,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 142% !important;
height: 138% !important;
transform:
translate(-50%, -50%)
rotate(-11deg) !important;
z-index: -1 !important;
clip-path: polygon(
8% 30%,
13% 20%,
24% 14%,
35% 10%,
45% 5%,
57% 9%,
68% 6%,
79% 13%,
89% 22%,
94% 33%,
91% 44%,
98% 55%,
92% 66%,
94% 77%,
83% 87%,
70% 88%,
59% 97%,
48% 91%,
36% 97%,
25% 90%,
15% 88%,
8% 78%,
11% 67%,
4% 57%,
9% 46%,
4% 38%
) !important;
background:
radial-gradient(
ellipse at 35% 35%,
rgba(3,51,125,.98) 0 22%,
rgba(5,61,140,.96) 23% 39%,
transparent 56%
),
radial-gradient(
ellipse at 65% 29%,
rgba(7,68,153,.98) 0 18%,
rgba(8,72,157,.86) 19% 36%,
transparent 53%
),
radial-gradient(
ellipse at 74% 63%,
rgba(3,49,120,.99) 0 21%,
rgba(5,59,137,.87) 22% 39%,
transparent 57%
),
radial-gradient(
ellipse at 31% 73%,
rgba(5,61,140,.97) 0 20%,
rgba(7,67,148,.84) 21% 40%,
transparent 58%
),
radial-gradient(
ellipse at 52% 52%,
rgba(4,59,138,.99) 0 30%,
rgba(6,67,150,.96) 31% 48%,
rgba(8,72,156,.72) 49% 57%,
transparent 70%
) !important;
filter:
blur(.30px)
saturate(1.18)
contrast(1.04) !important;
opacity: .98 !important;
pointer-events: none !important;
}
#mhlLogbuchFinal .mhl-logbuch-final__day.is-selected,
#mhlLogbuchStable .mhl-logbuch-stable__day.is-selected {
font-weight: 800 !important;
text-shadow:
0 1px 2px rgba(0,0,0,.42) !important;
}
/* ============================================================
MHL LOGBUCH – AUSWAHL = EIN BLAUER TINTENKLECKS
============================================================ */
/* Graue Auswahl entfernen */
button[data-day].is-selected {
position: relative !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #f4ecdc !important;
z-index: 10 !important;
}
/* Keine alten Punkte */
button[data-day].is-selected::after {
content: none !important;
display: none !important;
}
/* Kleckiger blauer Tintenabdruck */
button[data-day].is-selected::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 142% !important;
height: 138% !important;
transform:
translate(-50%, -50%)
rotate(-11deg) !important;
z-index: -1 !important;
clip-path: polygon(
8% 30%,
13% 20%,
24% 14%,
35% 10%,
45% 5%,
57% 9%,
68% 6%,
79% 13%,
89% 22%,
94% 33%,
91% 44%,
98% 55%,
92% 66%,
94% 77%,
83% 87%,
70% 88%,
59% 97%,
48% 91%,
36% 97%,
25% 90%,
15% 88%,
8% 78%,
11% 67%,
4% 57%,
9% 46%,
4% 38%
) !important;
background:
radial-gradient(
ellipse at 35% 35%,
rgba(3,51,125,.98) 0 22%,
rgba(5,61,140,.96) 23% 39%,
transparent 56%
),
radial-gradient(
ellipse at 65% 29%,
rgba(7,68,153,.98) 0 18%,
rgba(8,72,157,.86) 19% 36%,
transparent 53%
),
radial-gradient(
ellipse at 74% 63%,
rgba(3,49,120,.99) 0 21%,
rgba(5,59,137,.87) 22% 39%,
transparent 57%
),
radial-gradient(
ellipse at 31% 73%,
rgba(5,61,140,.97) 0 20%,
rgba(7,67,148,.84) 21% 40%,
transparent 58%
),
radial-gradient(
ellipse at 52% 52%,
rgba(4,59,138,.99) 0 30%,
rgba(6,67,150,.96) 31% 48%,
rgba(8,72,156,.72) 49% 57%,
transparent 70%
) !important;
filter:
blur(.30px)
saturate(1.18)
contrast(1.04) !important;
opacity: .98 !important;
pointer-events: none !important;
}
/* Zahl */
button[data-day].is-selected {
font-weight: 800 !important;
text-shadow:
0 1px 2px rgba(0,0,0,.42) !important;
}
/* MHL REGIONAL R7 CONTENT EXCEPTION BEGIN */
/*
* r7.css setzt im Desktop-Bereich global:
*
* #content {
* position: relative !important;
* top: -25px !important;
* }
*
* Das ist für die übrigen Seiten gewollt.
* Die Regional-Seite soll jedoch exakt die normale
* gemeinsame Site-Shell verwenden.
*
* Deshalb wird NUR dort der globale Offset neutralisiert.
*
* Keine Änderung an:
* - Strand / Hintergrund
* - Footer
* - Wasserzeichen
* - z-index
* - Fullscreen
*/
@media (min-width: 1430px) and (min-height: 754px) {
html.mhl-news-header-spacing
}
/* MHL REGIONAL R7 CONTENT EXCEPTION END */
/* MHL PROSE PAGE FIRST CHILD NORMALIZATION v1 */
main#content .reading-shell.prose-page > :first-child {
margin-top: 0 !important;
}
/* ============================================================
MHL PAGE HEADER — LONG TITLE FIX
Nur /ueber und /regionale-besonderheiten.
/wie-gebaut bleibt unangetastet.
============================================================ */
body:has(.mhl-about-page) header.page-header,
body:has(.mhl-regional-page) header.page-header {
grid-template-columns: minmax(0, 1fr) 86px !important;
}
body:has(.mhl-about-page) header.page-header .page-header__copy,
body:has(.mhl-regional-page) header.page-header .page-header__copy {
min-width: 0 !important;
max-width: 100% !important;
}
body:has(.mhl-about-page) header.page-header .page-header__copy h1,
body:has(.mhl-regional-page) header.page-header .page-header__copy h1 {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
}
body:has(.mhl-about-page) header.page-header .page-header__copy > *,
body:has(.mhl-regional-page) header.page-header .page-header__copy > * {
min-width: 0 !important;
max-width: 100% !important;
}