/*
 * BlogAbstaende: more white space in guide articles (AGCMS pages with category, page type 0 -
 * class "cms-ratgeber" on article.cmsPage, see theme agcms.tpl). Only spacing and line height,
 * no font sizes or colours. The blog overview (/blog/, page type 2) and the start page are not affected.
 *
 * Every AGCMS widget sits in its own .row > .col; the gap is set on the widget element itself
 * (hidden responsive variants live in display:none columns, so their margin disappears with them).
 * Selectors start with .cmsPage.cms-ratgeber and beat the per-page custom CSS of the migrations
 * (e.g. ".ident-blog_… li { margin-bottom: 4px }") by specificity, without !important.
 */

/* ---------- text ---------- */
.cmsPage.cms-ratgeber p {
    margin-bottom: 1.1em;
    line-height: 1.7;
}
.cmsPage.cms-ratgeber ul,
.cmsPage.cms-ratgeber ol {
    margin-top: .6em;
    margin-bottom: 1.4em;
}
.cmsPage.cms-ratgeber li {
    margin-bottom: .6em;
    line-height: 1.7;
}
.cmsPage.cms-ratgeber li > p {
    margin-bottom: .4em;
}

/* headings inside text widgets */
.cmsPage.cms-ratgeber .w-100 h2,
.cmsPage.cms-ratgeber .text-content h2 {
    margin-top: 56px;
    margin-bottom: 16px;
}
.cmsPage.cms-ratgeber .w-100 h3,
.cmsPage.cms-ratgeber .text-content h3 {
    margin-top: 40px;
    margin-bottom: 12px;
}
/* first heading of a widget: the widget gap (24px) is already above it */
.cmsPage.cms-ratgeber .w-100 > h2:first-child,
.cmsPage.cms-ratgeber .text-content > h2:first-child {
    margin-top: 32px;
}
.cmsPage.cms-ratgeber .w-100 > h3:first-child,
.cmsPage.cms-ratgeber .text-content > h3:first-child {
    margin-top: 16px;
}

/* ---------- gap between widgets ---------- */
/* widget element = direct child of the column; banner + H1 stay as they are, spacer widgets
   (inline height) keep their own height, H2 headline widgets get their own values below */
.cmsPage.cms-ratgeber > .row > [class*="col"] > :not(h1):not(h2):not([style*="height"]):not(.cms-widget-blogbanner:not(.clearfix)) {
    margin-bottom: 24px;
}
/* no extra gap from the last element inside a widget */
.cmsPage.cms-ratgeber .w-100 > :last-child,
.cmsPage.cms-ratgeber .text-content > :last-child {
    margin-bottom: 0;
}

/* H2 headline widget (has 8px padding): ~56px above (24 widget gap + 24 + 8), 16px below */
.cmsPage.cms-ratgeber > .row > [class*="col"] > h2.cms-widget-headline {
    margin-top: 24px;
    margin-bottom: 16px;
}

/* ---------- image/text widget ---------- */
.cmsPage.cms-ratgeber .clearfix.cms-widget-blogbanner img.img-pos-topright,
.cmsPage.cms-ratgeber .clearfix.cms-widget-blogbanner img.img-pos-bottomright {
    margin: 0 0 24px 32px;
}
.cmsPage.cms-ratgeber .clearfix.cms-widget-blogbanner img.img-pos-topleft,
.cmsPage.cms-ratgeber .clearfix.cms-widget-blogbanner img.img-pos-bottomleft {
    margin: 0 32px 24px 0;
}
/* optional caption below the image (AgCMSWidgets IMAGE_CAPTION): sits right under the floated
   image instead of next to it in the text column; pulled up into the image bottom gap */
.cms-widget-blogbanner .img-caption {
    clear: both;
    position: relative;
    top: -32px;
    margin: 0 0 -32px;
}
@media (min-width: 768px) {
    .cms-widget-blogbanner .img-caption-topleft,
    .cms-widget-blogbanner .img-caption-bottomleft {
        float: left;
        clear: left;
        top: 0;
        margin: -32px 32px 24px 0;
    }
    .cms-widget-blogbanner .img-caption-topright,
    .cms-widget-blogbanner .img-caption-bottomright {
        float: right;
        clear: right;
        top: 0;
        margin: -32px 0 24px 32px;
    }
}

/* ---------- boxes: infobox, table, CTA, FAQ ---------- */
.cmsPage.cms-ratgeber > .row > [class*="col"] > .cms-widget-infobox,
.cmsPage.cms-ratgeber > .row > [class*="col"] > .cms-widget-faq {
    margin-top: 32px;
    margin-bottom: 32px;
}
/* directly below an H2 headline widget the headline gap is enough (no doubled spacing) */
.cmsPage.cms-ratgeber > .row:has(> [class*="col"] > h2.cms-widget-headline) + .row > [class*="col"] > .cms-widget-infobox,
.cmsPage.cms-ratgeber > .row:has(> [class*="col"] > h2.cms-widget-headline) + .row > [class*="col"] > .cms-widget-faq {
    margin-top: 0;
}
.cmsPage.cms-ratgeber .fd-infobox-right {
    margin-bottom: 32px;
}
.cmsPage.cms-ratgeber .table-responsive {
    margin-top: 32px;
    margin-bottom: 32px;
}
.cmsPage.cms-ratgeber .table-responsive > table {
    margin: 0;
}

/* ---------- desktop ---------- */
@media (min-width: 768px) {
    /* floated next to the text: the widget gap follows below, so only a small bottom margin */
    .cmsPage.cms-ratgeber .fd-infobox-right {
        margin-left: 32px;
        margin-bottom: 16px;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 767.98px) {
    .cmsPage.cms-ratgeber .w-100 h2,
    .cmsPage.cms-ratgeber .text-content h2 {
        margin-top: 40px;
    }
    .cmsPage.cms-ratgeber .w-100 h3,
    .cmsPage.cms-ratgeber .text-content h3 {
        margin-top: 32px;
    }
    .cmsPage.cms-ratgeber .w-100 > h2:first-child,
    .cmsPage.cms-ratgeber .text-content > h2:first-child {
        margin-top: 16px;
    }
    .cmsPage.cms-ratgeber .w-100 > h3:first-child,
    .cmsPage.cms-ratgeber .text-content > h3:first-child {
        margin-top: 8px;
    }
    /* ~40px above (24 widget gap + 8 + 8) */
    .cmsPage.cms-ratgeber > .row > [class*="col"] > h2.cms-widget-headline {
        margin-top: 8px;
    }
    /* image full width above/below the text */
    .cmsPage.cms-ratgeber .clearfix.cms-widget-blogbanner img[class*="img-pos-"] {
        margin: 0 0 24px 0;
    }
}

/* ---------- CTA-Box (BlogUpdate1 8.5, 1:1 aus Tickets/BlogUpdate1/cta.css): nur Shop-Werte (Infobox, Bild/Text-Widget,
   btn btn-primary); gilt für alle AGCMS-Seiten und schlägt über .cmsPage das alte CTA-CSS im customcss ---------- */
/* ---- Blog-CTA (fd-cta): nur Werte aus dem Shop-CSS (Infobox + Bild/Text-Widget + .btn-primary) ---- */
.cmsPage .fd-cta{background:#fff4e5;border-radius:30px;padding:24px;margin:32px 0;overflow:hidden}
.cmsPage .fd-cta .fd-cta__img{float:right;width:315px;max-width:100%;height:auto;margin:0 0 16px 32px;border-radius:20px}
.cmsPage .fd-cta .head{font-family:Rounded-ExtraBold,Arial,Helvetica,sans-serif;font-size:20px;line-height:30px;margin-bottom:8px}
.cmsPage .fd-cta p{margin:0 0 16px}
.cmsPage .fd-cta p:last-child{margin-bottom:0}
.cmsPage .fd-cta .btn{margin:0 8px 8px 0}
.cmsPage .fd-cta .btn,.cmsPage .fd-cta .btn:hover,.cmsPage .fd-cta .btn:focus,.cmsPage .fd-cta .btn:visited{color:#fff;text-decoration:none}
@media (max-width:767px){
 .cmsPage .fd-cta .fd-cta__img{float:none;display:block;width:100%;margin:0 0 16px}
}

/* ---------- CTA-Box: Buttons bündig mit der Bildunterkante (BlogUpdate1 8.5, Chris 05.11.) - nur Anordnung,
   Werte aus cta.css; Reihenfolge im Markup: Bild, .head, Text, Button-Absatz ---------- */
@media (min-width: 768px) {
    .cmsPage .fd-cta { display: grid; grid-template-columns: minmax(0, 1fr) 315px; grid-template-rows: auto auto 1fr; column-gap: 32px; }
    .cmsPage .fd-cta .fd-cta__img { grid-column: 2; grid-row: 1 / 4; float: none; margin: 0; }
    .cmsPage .fd-cta > :not(.fd-cta__img) { grid-column: 1; }
    .cmsPage .fd-cta > .head { grid-row: 1; }
    .cmsPage .fd-cta > p:not(:has(.btn)) { grid-row: 2; }
    .cmsPage .fd-cta > p:has(.btn) { grid-row: 3; align-self: end; margin-bottom: -8px; }
}

/* ---------- Hinweisbox (BlogUpdate1 8.6 A, 1:1 aus Tickets/BlogUpdate1/hint.css) ---------- */
/* ---- Hinweisbox (fd-hint): dezenter Tipp/Warnhinweis im Text, Shop-Werte (Infobox-Farben, Shop-Schrift) ---- */
.cmsPage .fd-hint{position:relative;background:#fff4e5;border-radius:20px;padding:14px 20px 14px 72px;margin:24px 0;min-height:68px}
.cmsPage .fd-hint::before{content:"";position:absolute;left:18px;top:14px;width:40px;height:40px;border-radius:50%;background:#79aab0 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M180%2C232a12%2C12%2C0%2C0%2C1-12%2C12H88a12%2C12%2C0%2C0%2C1%2C0-24h80A12%2C12%2C0%2C0%2C1%2C180%2C232Zm40-128a91.51%2C91.51%2C0%2C0%2C1-35.17%2C72.35A12.26%2C12.26%2C0%2C0%2C0%2C180%2C186v2a20%2C20%2C0%2C0%2C1-20%2C20H96a20%2C20%2C0%2C0%2C1-20-20v-2a12%2C12%2C0%2C0%2C0-4.7-9.51A91.57%2C91.57%2C0%2C0%2C1%2C36%2C104.52C35.73%2C54.69%2C76%2C13.2%2C125.79%2C12A92%2C92%2C0%2C0%2C1%2C220%2C104Zm-24%2C0a68%2C68%2C0%2C0%2C0-69.65-68C89.56%2C36.88%2C59.8%2C67.55%2C60%2C104.38a67.71%2C67.71%2C0%2C0%2C0%2C26.1%2C53.19A35.87%2C35.87%2C0%2C0%2C1%2C100%2C184h56.1A36.13%2C36.13%2C0%2C0%2C1%2C170%2C157.49%2C67.68%2C67.68%2C0%2C0%2C0%2C196%2C104Zm-20.07-5.32a48.5%2C48.5%2C0%2C0%2C0-31.91-40%2C12%2C12%2C0%2C0%2C0-8%2C22.62%2C24.31%2C24.31%2C0%2C0%2C1%2C16.09%2C20%2C12%2C12%2C0%2C0%2C0%2C23.86-2.64Z%22/%3E%3C/svg%3E") center/22px no-repeat}
.cmsPage .fd-hint--warn{background:#fbeee4}
.cmsPage .fd-hint--warn::before{background:#e8a27c url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M240.26%2C186.1%2C152.81%2C34.23h0a28.74%2C28.74%2C0%2C0%2C0-49.62%2C0L15.74%2C186.1a27.45%2C27.45%2C0%2C0%2C0%2C0%2C27.71A28.31%2C28.31%2C0%2C0%2C0%2C40.55%2C228h174.9a28.31%2C28.31%2C0%2C0%2C0%2C24.79-14.19A27.45%2C27.45%2C0%2C0%2C0%2C240.26%2C186.1Zm-20.8%2C15.7a4.46%2C4.46%2C0%2C0%2C1-4%2C2.2H40.55a4.46%2C4.46%2C0%2C0%2C1-4-2.2%2C3.56%2C3.56%2C0%2C0%2C1%2C0-3.73L124%2C46.2a4.77%2C4.77%2C0%2C0%2C1%2C8%2C0l87.44%2C151.87A3.56%2C3.56%2C0%2C0%2C1%2C219.46%2C201.8ZM116%2C136V104a12%2C12%2C0%2C0%2C1%2C24%2C0v32a12%2C12%2C0%2C0%2C1-24%2C0Zm28%2C40a16%2C16%2C0%2C1%2C1-16-16A16%2C16%2C0%2C0%2C1%2C144%2C176Z%22/%3E%3C/svg%3E") center/22px no-repeat}
.cmsPage .fd-hint p{margin:0}
.cmsPage .fd-hint .fd-hint__head{font-family:Rounded-ExtraBold,Arial,Helvetica,sans-serif;font-size:17px;line-height:24px;margin-bottom:2px}
@media (max-width:767px){.cmsPage .fd-hint{padding:12px 16px 12px 64px}.cmsPage .fd-hint::before{left:14px;top:12px;width:36px;height:36px;background-size:20px}}

/* ---------- Infobox-Widget (BlogUpdate1 8.7, aus Tickets/BlogUpdate1/infobox.css; Warn-Klasse kommt vom Widget an die Spalte:
   colclass-fd-infobox--warn statt .cms-widget-infobox.fd-infobox--warn) ---------- */
/* ---- Infobox-Widget (cms-widget-infobox): gleiches Symbol wie .fd-hint, mobil kompakter (BlogUpdate1 8.7) ---- */
.cmsPage.cms-ratgeber .cms-widget-infobox .head{display:flex;align-items:center;gap:12px}
.cmsPage.cms-ratgeber .cms-widget-infobox .head::before{content:"";flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#79aab0 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M180%2C232a12%2C12%2C0%2C0%2C1-12%2C12H88a12%2C12%2C0%2C0%2C1%2C0-24h80A12%2C12%2C0%2C0%2C1%2C180%2C232Zm40-128a91.51%2C91.51%2C0%2C0%2C1-35.17%2C72.35A12.26%2C12.26%2C0%2C0%2C0%2C180%2C186v2a20%2C20%2C0%2C0%2C1-20%2C20H96a20%2C20%2C0%2C0%2C1-20-20v-2a12%2C12%2C0%2C0%2C0-4.7-9.51A91.57%2C91.57%2C0%2C0%2C1%2C36%2C104.52C35.73%2C54.69%2C76%2C13.2%2C125.79%2C12A92%2C92%2C0%2C0%2C1%2C220%2C104Zm-24%2C0a68%2C68%2C0%2C0%2C0-69.65-68C89.56%2C36.88%2C59.8%2C67.55%2C60%2C104.38a67.71%2C67.71%2C0%2C0%2C0%2C26.1%2C53.19A35.87%2C35.87%2C0%2C0%2C1%2C100%2C184h56.1A36.13%2C36.13%2C0%2C0%2C1%2C170%2C157.49%2C67.68%2C67.68%2C0%2C0%2C0%2C196%2C104Zm-20.07-5.32a48.5%2C48.5%2C0%2C0%2C0-31.91-40%2C12%2C12%2C0%2C0%2C0-8%2C22.62%2C24.31%2C24.31%2C0%2C0%2C1%2C16.09%2C20%2C12%2C12%2C0%2C0%2C0%2C23.86-2.64Z%22/%3E%3C/svg%3E") center/20px no-repeat}
.cmsPage.cms-ratgeber .colclass-fd-infobox--warn > .cms-widget-infobox .head::before{background:#e8a27c url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M240.26%2C186.1%2C152.81%2C34.23h0a28.74%2C28.74%2C0%2C0%2C0-49.62%2C0L15.74%2C186.1a27.45%2C27.45%2C0%2C0%2C0%2C0%2C27.71A28.31%2C28.31%2C0%2C0%2C0%2C40.55%2C228h174.9a28.31%2C28.31%2C0%2C0%2C0%2C24.79-14.19A27.45%2C27.45%2C0%2C0%2C0%2C240.26%2C186.1Zm-20.8%2C15.7a4.46%2C4.46%2C0%2C0%2C1-4%2C2.2H40.55a4.46%2C4.46%2C0%2C0%2C1-4-2.2%2C3.56%2C3.56%2C0%2C0%2C1%2C0-3.73L124%2C46.2a4.77%2C4.77%2C0%2C0%2C1%2C8%2C0l87.44%2C151.87A3.56%2C3.56%2C0%2C0%2C1%2C219.46%2C201.8ZM116%2C136V104a12%2C12%2C0%2C0%2C1%2C24%2C0v32a12%2C12%2C0%2C0%2C1-24%2C0Zm28%2C40a16%2C16%2C0%2C1%2C1-16-16A16%2C16%2C0%2C0%2C1%2C144%2C176Z%22/%3E%3C/svg%3E") center/20px no-repeat}
.cmsPage.cms-ratgeber .cms-widget-infobox .text p:empty,.cmsPage.cms-ratgeber .cms-widget-infobox .text p:has(> br:only-child){display:none}
@media (max-width:767px){
 .cmsPage.cms-ratgeber .cms-widget-infobox .head{font-size:18px;line-height:26px}
 .cmsPage.cms-ratgeber .cms-widget-infobox .row{padding:12px 16px}
 .cmsPage.cms-ratgeber .cms-widget-infobox-subtext,.cmsPage.cms-ratgeber .cms-widget-infobox-subtext strong,.cmsPage.cms-ratgeber .cms-widget-infobox-subtext p{font-family:Rounded-Reg,Arial,Helvetica,sans-serif;font-weight:400;font-size:15px;line-height:23px}
 .cmsPage.cms-ratgeber .cms-widget-infobox-subtext p{margin-bottom:10px}
 .cmsPage.cms-ratgeber .cms-widget-infobox-subtext p:last-child{margin-bottom:0}
 .cmsPage.cms-ratgeber .cms-widget-infobox .text li{font-size:15px;line-height:23px;margin-bottom:8px}
}

/* ---------- Infoboxen nebeneinander (BlogUpdate1 8.6 B, Walnüsse): oben bündig, so hoch wie die Zeile ---------- */
.cmsPage.cms-ratgeber > .row:has(> [class*="col"] + [class*="col"]):not(:has(> [class*="col"] > :not(.cms-widget-infobox))) > [class*="col"] > .cms-widget-infobox {
    margin-top: 0;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cmsPage.cms-ratgeber > .row:has(> [class*="col"] + [class*="col"]):not(:has(> [class*="col"] > :not(.cms-widget-infobox))) > [class*="col"] > .cms-widget-infobox > .row:last-child {
    flex: 1 1 auto;
}

/* ---------- Bild + Infobox nebeneinander (BlogUpdate1 8.8, ersetzt 8.6 C): eigene AGCMS-Zeile, Bild 5/12, Infobox 7/12,
   beide Widgets mit der Klasse fd-media-row (Ausgabe an der Spalte: colclass-fd-media-row); oben und unten bündig ---------- */
.cmsPage.cms-ratgeber > .row:has(> .colclass-fd-media-row) { margin-top: 24px; margin-bottom: 24px; }
.cmsPage.cms-ratgeber .colclass-fd-media-row > * { margin: 0 !important; width: 100%; min-width: 0; }
.cmsPage.cms-ratgeber .colclass-fd-media-row img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.cmsPage.cms-ratgeber .colclass-fd-media-row > .cms-widget-infobox { display: flex; flex-direction: column; padding: 0 !important; }
.cmsPage.cms-ratgeber .colclass-fd-media-row > .cms-widget-infobox > .row { margin: 0; }
.cmsPage.cms-ratgeber .colclass-fd-media-row > .cms-widget-infobox > .row:last-child { flex: 1 1 auto; }

/* ---------- lange Listen zweispaltig (BlogUpdate1 8.8) ---------- */
.cmsPage.cms-ratgeber ul.fd-list-2col { columns: 2; column-gap: 48px; }
.cmsPage.cms-ratgeber ul.fd-list-2col li { break-inside: avoid; }

@media (max-width: 767px) {
    .cmsPage.cms-ratgeber .colclass-fd-media-row { flex: 0 0 100%; max-width: 100%; }
    .cmsPage.cms-ratgeber .colclass-fd-media-row + .colclass-fd-media-row { margin-top: 16px; }
    .cmsPage.cms-ratgeber .colclass-fd-media-row img { height: auto; }
    .cmsPage.cms-ratgeber ul.fd-list-2col { columns: 1; }
}