/* ════════════════════════════════════════════════════════════
   DotalesLandingSection
   Flexibles Landing-Page-Portlet: freies HTML + Bild-Platzhalter
════════════════════════════════════════════════════════════ */

/* ── Body — clearfix für Floats ─────────────────────── */
.dotales-ls-body {
    overflow: hidden;
}

/* ── Typografie ─────────────────────────────────────── */

.dotales-ls-body h1,
.dotales-ls-body h2,
.dotales-ls-body h3,
.dotales-ls-body h4 {
    clear: both;
    font-family: var(--dotales-serif, Georgia, 'Times New Roman', serif);
    color: var(--dotales-dark, #2a1f15);
    line-height: 1.25;
    margin: 1.75em 0 0.55em;
}

.dotales-ls-body h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-top: 0;
}

.dotales-ls-body h2 {
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
}

.dotales-ls-body h3 {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}

.dotales-ls-body h4 {
    font-size: 1rem;
    font-weight: 700;
}

.dotales-ls-body p {
    margin: 0 0 1.1em;
    line-height: 1.8;
    color: #444;
}

.dotales-ls-body a {
    color: #c8753a;
    text-decoration: underline;
}

.dotales-ls-body a:hover {
    color: #a05a28;
}

.dotales-ls-body strong {
    font-weight: 700;
}

.dotales-ls-body em {
    font-style: italic;
}

/* ── Listen ─────────────────────────────────────────── */
.dotales-ls-body ul,
.dotales-ls-body ol {
    padding-left: 1.6em;
    margin: 0 0 1.25em;
    color: #444;
}

.dotales-ls-body li {
    line-height: 1.75;
    margin-bottom: 0.4em;
}

/* ── Tabellen ───────────────────────────────────────── */
.dotales-ls-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9rem;
    clear: both;
}

.dotales-ls-body th,
.dotales-ls-body td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #ede8e2;
    vertical-align: top;
}

.dotales-ls-body th {
    background: #f5f0eb;
    font-weight: 600;
    color: var(--dotales-dark, #2a1f15);
}

.dotales-ls-body tr:last-child td {
    border-bottom: none;
}

/* ── Inhaltsverzeichnis (nav) ───────────────────────── */
.dotales-ls-body nav {
    background: #faf7f4;
    border-left: 3px solid #c8753a;
    border-radius: 0 4px 4px 0;
    padding: 1.25em 1.5em;
    margin: 0 0 2em;
    clear: both;
}

.dotales-ls-body nav h2 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin: 0 0 0.75em;
    font-family: inherit;
    clear: none;
}

.dotales-ls-body nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dotales-ls-body nav li {
    margin-bottom: 0.3em;
}

.dotales-ls-body nav a {
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
}

.dotales-ls-body nav a:hover {
    color: #c8753a;
}

/* ── Trennlinie ─────────────────────────────────────── */
.dotales-ls-body hr {
    border: none;
    border-top: 1px solid #ede8e2;
    margin: 2em 0;
    clear: both;
}

/* ════════════════════════════════════════════════════════════
   Bild-Layouts
════════════════════════════════════════════════════════════ */

.dotales-ls-img {
    margin: 0;
    line-height: 0;
}

.dotales-ls-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.dotales-ls-img figcaption {
    font-size: 0.78rem;
    color: #999;
    text-align: center;
    margin-top: 8px;
    line-height: 1.4;
    font-style: italic;
    line-height: normal;
}

/* ── Breiten-Variablen ──────────────────────────────── */
.dotales-ls-img--ws  { --ls-w: 28%; }
.dotales-ls-img--wm  { --ls-w: 38%; }
.dotales-ls-img--wl  { --ls-w: 48%; }
.dotales-ls-img--wxl { --ls-w: 60%; }

/* ── Position: right ────────────────────────────────── */
.dotales-ls-img--right {
    float: right;
    width: var(--ls-w, 38%);
    margin: 6px 0 28px 36px;
    clear: right;
}

/* ── Position: left ─────────────────────────────────── */
.dotales-ls-img--left {
    float: left;
    width: var(--ls-w, 38%);
    margin: 6px 36px 28px 0;
    clear: left;
}

/* ── Position: full (volle Breite, visueller Break) ── */
.dotales-ls-img--full {
    float: none;
    clear: both;
    width: 100%;
    margin: 44px 0;
}

.dotales-ls-img--full img {
    border-radius: 6px;
}

/* ── Position: center (zentriert, für Diagramme) ───── */
.dotales-ls-img--center {
    float: none;
    clear: both;
    width: var(--ls-w, 50%);
    margin: 40px auto;
    display: block;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 767px) {
    .dotales-ls-img--right,
    .dotales-ls-img--left,
    .dotales-ls-img--center {
        float: none;
        clear: both;
        width: 100% !important;
        margin: 24px 0;
    }

    .dotales-ls-body table {
        font-size: 0.82rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dotales-ls-body th,
    .dotales-ls-body td {
        padding: 8px 10px;
    }
}