/* ==========================================================
   Siefertshof — Site-CSS (smartline)
   Geladen über mu-plugins/smartline-site-css.php (update-sicher)
   Pflege: hier lokal bearbeiten, per FTP hochladen
   Stand: 2026-11-06
   ========================================================== */

/* --- Farben (zentral) ---------------------------------
   Box-Hintergrund: heller als der Seitengrund #e7f2df, aber nicht weiß */
:root {
    --sl-box: #f5f9f1;
    --sl-box-hover: #ffffff;
}

/* --- H1 Seitentitel ------------------------------------- */
#top h1,
#top .av-special-heading h1.av-special-heading-tag {
    font-size: clamp(28px, 2.2vw + 14px, 38px);
    line-height: 1.2;
    font-weight: 700;
    color: #516c43;
}
#top .av-special-heading h1.av-special-heading-tag::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 12px auto 0;
    background: #dbaa6d;
}

/* --- Abstand Slider → Seitentitel ----------------------- */
/* Neue Seiten: Slider und Überschrift in derselben Spalte.
   (Alte Seiten: grünen Trennstrich beim Überarbeiten manuell entfernen.) */
#top .av-horizontal-gallery + .av-special-heading {
    margin-top: 30px;
}

/* --- Karten (Region: Ausflugstipps) --------------------- */
#top .sl-karte-bild {
    margin: -25px -25px 18px;          /* Bild randlos bis an die Kartenkante */
}
#top .sl-karte-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;               /* einheitliche Bildhöhe in allen Karten */
    object-fit: cover;                 /* abweichende Formate beschneiden statt stauchen */
    border-radius: 6px 6px 0 0;
}
#top .flex_column h3 + p,
#top .flex_column small + h3 {
    margin-top: 0.3em;
}

/* --- Listen (Region: Weitere Ausflugsziele) ------------- */
#top ul.sl-ziele {
    list-style: none;
    margin: 0;
    padding: 0;
}
#top ul.sl-ziele li {
    position: relative;
    margin: 0;
    padding: 0.7em 0 0.7em 1.6em;
    border-bottom: 1px solid #d6e1ce;
    line-height: 1.55;
}
#top ul.sl-ziele li:last-child {
    border-bottom: 0;
}
#top ul.sl-ziele li::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: 1.25em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: #dbaa6d;
}
#top ul.sl-ziele li strong {
    color: #516c43;
}

/* --- Karten sichtbar machen: weiß auf hellgrünem Seitengrund
       (überschreibt die Builder-Hintergrundfarbe #e7f2df) */
/*     Karten-Kennungen: av-sl-reg-k* (Region), av-sl-ueb-k* (Über uns), av-sl-fh-k* (Ferienhäuser), av-sl-pr-k* (Preise), av-sl-st-k* (Start), av-sl-ko-k* (Kontakt) */
#top .flex_column[class*="av-sl-reg-k"],
#top .flex_column[class*="av-sl-ueb-k"],
#top .flex_column[class*="av-sl-fh-k"],
#top .flex_column[class*="av-sl-pr-k"],
#top .flex_column[class*="av-sl-st-k"],
#top .flex_column[class*="av-sl-ko-k"] {
    background-color: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(81, 108, 67, 0.08);
    overflow: hidden;
}

/* --- Karten breiter, Abstände enger ----------------------
       Enfold-Standard: 6 % Leerspalte, 50 px Reihenabstand  */
#top .flex_column_table[class*="av-sl-reg-k"] > .av-flex-placeholder,
#top .flex_column_table[class*="av-sl-ueb-k"] > .av-flex-placeholder,
#top .flex_column_table[class*="av-sl-fh-k"] > .av-flex-placeholder,
#top .flex_column_table[class*="av-sl-st-k"] > .av-flex-placeholder,
#top .flex_column_table[class*="av-sl-ko-k"] > .av-flex-placeholder,
#top .flex_column_table[class*="av-sl-pr-k"] > .av-flex-placeholder {
    width: 3%;
}
#top .flex_column_table[class*="av-sl-reg-k"] > .flex_column,
#top .flex_column_table[class*="av-sl-fh-k"] > .flex_column {
    width: 31.333%;                    /* 3 Spalten: (100 % − 2 × 3 %) / 3 */
}
#top .flex_column_table[class*="av-sl-ueb-k"] > .flex_column,
#top .flex_column_table[class*="av-sl-st-k"] > .flex_column,
#top .flex_column_table[class*="av-sl-ko-k"] > .flex_column,
#top .flex_column_table[class*="av-sl-pr-k"] > .flex_column {
    width: 48.5%;                      /* 2 Spalten: (100 % − 3 %) / 2 */
}
#top .flex_column_table.av-equal-height-column-flextable[class*="av-sl-reg-k"]:not(:first-child),
#top .flex_column_table.av-equal-height-column-flextable[class*="av-sl-ueb-k"]:not(:first-child),
#top .flex_column_table.av-equal-height-column-flextable[class*="av-sl-fh-k"]:not(:first-child),
#top .flex_column_table.av-equal-height-column-flextable[class*="av-sl-st-k"]:not(:first-child) {
    margin-top: 30px;
}
@media only screen and (max-width: 767px) {
    /* Handy: Karten untereinander, volle Breite, kompakter Abstand */
    #top .flex_column_table[class*="av-sl-reg-k"] > .flex_column,
    #top .flex_column_table[class*="av-sl-ueb-k"] > .flex_column,
    #top .flex_column_table[class*="av-sl-fh-k"] > .flex_column,
    #top .flex_column_table[class*="av-sl-st-k"] > .flex_column,
    #top .flex_column_table[class*="av-sl-ko-k"] > .flex_column,
    #top .flex_column_table[class*="av-sl-pr-k"] > .flex_column {
        width: 100%;
        margin-bottom: 20px;
    }
    #top .flex_column_table.av-equal-height-column-flextable[class*="av-sl-reg-k"]:not(:first-child),
    #top .flex_column_table.av-equal-height-column-flextable[class*="av-sl-ueb-k"]:not(:first-child),
    #top .flex_column_table.av-equal-height-column-flextable[class*="av-sl-fh-k"]:not(:first-child),
    #top .flex_column_table.av-equal-height-column-flextable[class*="av-sl-st-k"]:not(:first-child) {
        margin-top: 0;
    }
}

/* --- Fakten-Raster „Auf einen Blick" (Ferienhäuser) ----- */
#top ul.sl-fakten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
#top ul.sl-fakten li {
    margin: 0;
    padding: 16px 18px 16px 52px;
    position: relative;
    background: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-radius: 6px;
    line-height: 1.45;
    font-size: 0.92em;
}
#top ul.sl-fakten li::before {           /* Häkchen im Sandkreis */
    content: "✓";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: #dbaa6d;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}
#top ul.sl-fakten li strong {
    display: block;
    color: #516c43;
    font-size: 1.1em;
}
@media only screen and (max-width: 989px) {
    #top ul.sl-fakten { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 479px) {
    #top ul.sl-fakten { grid-template-columns: 1fr; }
}

/* --- Hinweis-Kasten + Button-Paar ----------------------- */
#top .sl-hinweis {
    max-width: 760px;
    margin: 30px auto 0;
    padding: 16px 22px;
    background: var(--sl-box);
    border-left: 4px solid #dbaa6d;
    border-radius: 0 6px 6px 0;
}
#top .sl-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
#top .sl-buttons .sl-btn {
    display: inline-block;
    padding: 10px 22px;
    border: 2px solid #516c43;
    border-radius: 3px;
    color: #516c43;
    font-weight: 700;
    text-decoration: none;
}
#top .sl-buttons .sl-btn:hover,
#top .sl-buttons .sl-btn:focus-visible {
    background: #516c43;
    color: #ffffff;
}

/* --- Bilder in Text-/Bild-Reihen (Über uns) ------------- */
#top .sl-bild {
    margin: 0;
}
#top .sl-bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(81, 108, 67, 0.12);
}
#top .sl-bildpaar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
#top .sl-bildpaar img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* --- Kater Findus: rundes Bild + Text nebeneinander ----- */
#top .sl-findus {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 640px;
    margin: 30px auto;
    padding: 20px 24px;
    background: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-radius: 6px;
}
#top .sl-findus img {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #dbaa6d;
}
#top .sl-findus p {
    margin: 0;
}

/* --- Zeitleiste (Unsere Geschichte) --------------------- */
#top ul.sl-zeitleiste {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
    border-left: 3px solid #d6e1ce;
}
#top ul.sl-zeitleiste li {
    position: relative;
    margin: 0 0 1.1em;
    padding-left: 1.4em;
    line-height: 1.55;
}
#top ul.sl-zeitleiste li::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 0.45em;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #dbaa6d;
    border: 2px solid #ffffff;
}
#top ul.sl-zeitleiste .sl-jahr {
    display: block;
    font-weight: 700;
    color: #516c43;
}

/* --- Historische Fotos neben der Zeitleiste ------------- */
#top figure.sl-histo {
    margin: 0 0 20px;
}
#top figure.sl-histo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    filter: sepia(0.15);
}
#top figure.sl-histo figcaption {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
    text-align: center;
}

/* --- Akkordeon: als aufklappbare Leisten erkennbar ------ */
#top .togglecontainer .toggler {
    margin-top: 10px;
    padding: 14px 16px 14px 50px;
    background-color: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-radius: 6px;
    color: #516c43;
    font-weight: 700;
    font-size: 1.05em;
}
#top .togglecontainer .toggler:hover {
    background-color: var(--sl-box-hover);
}
#top .togglecontainer .toggler.activeTitle {
    background-color: #516c43;
    border-color: #516c43;
    color: #ffffff;
    border-radius: 6px 6px 0 0;
}
/* Plus/Minus-Symbol: Sandfarben, bei offenem Eintrag weiß */
#top .togglecontainer .toggle_icon {
    left: 16px;
    width: 19px;
    height: 19px;
    margin-top: -10px;
    border-color: #dbaa6d;
    border-radius: 50%;
}
#top .togglecontainer .toggle_icon .vert_icon {
    left: 7px; top: 3px; height: 11px;
    border-left-width: 3px;
    border-color: #dbaa6d;
}
#top .togglecontainer .toggle_icon .hor_icon {
    top: 7px; left: 3px; width: 11px;
    border-top-width: 3px;
    border-color: #dbaa6d;
}
#top .togglecontainer .toggler.activeTitle .toggle_icon,
#top .togglecontainer .toggler.activeTitle .toggle_icon .hor_icon {
    border-color: #ffffff;
}
#top .togglecontainer .toggle_content {
    background-color: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    padding: 8px 24px 12px;
    margin-bottom: 0;
}

/* --- Bildnachweis (klein, dezent) ----------------------- */
#top .sl-bildnachweis {
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    margin-top: 2em;
}
#top .sl-bildnachweis a {
    color: #666;
}

/* --- Preise & Belegung ----------------------------------- */
/* Sprungleiste unter der H1 */
#top .sl-sprungleiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    margin: 10px 0 0;
}
#top .sl-sprungleiste a {
    padding: 8px 18px;
    background: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-radius: 20px;
    color: #516c43;
    font-weight: 700;
    text-decoration: none;
}
#top .sl-sprungleiste a:hover,
#top .sl-sprungleiste a:focus-visible {
    background: #516c43;
    border-color: #516c43;
    color: #ffffff;
}
/* Sprungziele: etwas Luft nach oben, damit die Überschrift nicht am Rand klebt */
#top .sl-anker {
    position: relative;
    top: -30px;
    height: 0;
    visibility: hidden;
}
html {
    scroll-behavior: smooth;
}

/* Preistabelle */
#top .sl-tabelle-wrap {
    max-width: 720px;
    margin: 0 auto;
    overflow-x: auto;
}
#top table.sl-preise {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-radius: 6px;
    overflow: hidden;
}
#top table.sl-preise th,
#top table.sl-preise td {
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid #d6e1ce;
    text-align: center;
    font-size: 1em;
}
#top table.sl-preise thead th {
    background: #516c43;
    color: #ffffff;
    font-weight: 700;
}
#top table.sl-preise tbody th {
    text-align: left;
    color: #516c43;
    font-weight: 700;
    background: transparent;
}
#top table.sl-preise tbody tr:last-child th,
#top table.sl-preise tbody tr:last-child td {
    border-bottom: 0;
}
#top table.sl-preise tbody tr:nth-child(even) {
    background: rgba(214, 225, 206, 0.35);
}
#top .sl-tabelle-hinweis {
    max-width: 720px;
    margin: 10px auto 0;
    font-size: 0.88em;
    color: #666;
    text-align: center;
}
@media only screen and (max-width: 479px) {
    #top table.sl-preise th,
    #top table.sl-preise td { padding: 10px 8px; font-size: 0.9em; }
}

/* --- Startseite ------------------------------------------ */
#top .sl-lead {
    font-size: 1.2em;
    line-height: 1.5;
    color: #516c43;
    font-weight: 600;
}
/* Wegweiser-Karten: Überschrift als Link in Theme-Farbe, "weiter"-Link mit Pfeil */
#top .flex_column[class*="av-sl-st-k"] h3 a {
    color: #516c43;
    text-decoration: none;
}
#top .flex_column[class*="av-sl-st-k"] h3 a:hover {
    color: #dbaa6d;
}
#top .sl-weiter {
    margin: 0;
}
#top .sl-weiter a {
    font-weight: 700;
    color: #516c43;
    text-decoration: none;
}
#top .sl-weiter a::after {
    content: " →";
    color: #dbaa6d;
}
#top .sl-weiter a:hover {
    text-decoration: underline;
}
#top .sl-karte-bild a {
    display: block;
}

/* --- Anfrageformular [sl_anfrage] ------------------------- */
#top .sl-form {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px;
    background: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-radius: 6px;
}
#top .sl-form-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
#top .sl-form p {
    margin: 0 0 16px;
}
#top .sl-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: #516c43;
}
#top .sl-form label span {
    font-weight: 400;
    color: #666;
}
#top .sl-form input[type="text"],
#top .sl-form input[type="email"],
#top .sl-form input[type="tel"],
#top .sl-form input[type="date"],
#top .sl-form select,
#top .sl-form textarea {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    font-size: 16px;                   /* verhindert Zoom auf iOS */
    border: 1px solid #c5d4bb;
    border-radius: 4px;
    background: #ffffff;
    color: #333;
    box-sizing: border-box;
}
#top .sl-form input:focus,
#top .sl-form select:focus,
#top .sl-form textarea:focus {
    outline: 2px solid #dbaa6d;
    outline-offset: 1px;
    border-color: #516c43;
}
#top .sl-form .sl-form-check label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400;
    color: #444;
}
#top .sl-form .sl-form-check input {
    margin-top: 4px;
    flex: 0 0 auto;
}
#top .sl-form button[type="submit"] {
    padding: 14px 34px;
    border: 0;
    border-radius: 3px;
    background: #516c43;
    color: #ffffff;
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
}
#top .sl-form button[type="submit"]:hover,
#top .sl-form button[type="submit"]:focus-visible {
    background: #3f5534;
    outline: 2px solid #dbaa6d;
    outline-offset: 2px;
}
#top .sl-form-absenden {
    text-align: center;
}
#top .sl-form-klein {
    font-size: 0.85em;
    color: #666;
    text-align: center;
}
#top .sl-hp {                          /* Honeypot: für Menschen unsichtbar */
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#top .sl-form-meldung {
    max-width: 760px;
    margin: 0 auto 20px;
    padding: 16px 20px;
    border-radius: 6px;
}
#top .sl-form-meldung ul {
    margin: 0;
    padding-left: 1.2em;
}
#top .sl-form-ok {
    background: #e2efd9;
    border-left: 4px solid #516c43;
}
#top .sl-form-fehler {
    background: #fbeee2;
    border-left: 4px solid #c0602b;
}
@media only screen and (max-width: 600px) {
    #top .sl-form { padding: 18px; }
    #top .sl-form-raster { grid-template-columns: 1fr; }
}

/* --- Kontaktseite ---------------------------------------- */
#top ul.sl-kontaktliste {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}
#top ul.sl-kontaktliste li {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #d6e1ce;
}
#top ul.sl-kontaktliste li:last-child {
    border-bottom: 0;
}
#top ul.sl-kontaktliste li span {
    display: inline-block;
    min-width: 80px;
    font-weight: 700;
    color: #516c43;
}
#top .flex_column[class*="av-sl-ko-k"] .sl-buttons {
    justify-content: flex-start;
}

/* --- Belegungskalender (traumfewo-Widget, iframe mit fester Pixelbreite) --- */
#top .sl-kalender,
#top .sl-kalender .traumfewo-calendar-wrapper {
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: visible;                 /* KEIN overflow:auto – erzeugt sonst Scrollbalken (Spaltenzahl regelt das Skript) */
}
#top .sl-kalender iframe {
    max-width: none;
    border: 0;
}
/* Kalender-Boxen: weniger Innenabstand, damit der Kalender die Box ausfüllt statt darin zu "schwimmen" */
#top .flex_column[class*="av-sl-pr-k"] {
    padding: 12px 10px !important;     /* überschreibt das Builder-Padding 25px */
}
#top .flex_column[class*="av-sl-pr-k"] h3 {
    margin: 4px 0 8px;
}
#top .flex_column[class*="av-sl-pr-k"] .avia_textblock > *:last-child,
#top .sl-kalender {
    margin-bottom: 0;
}
#top .sl-kalender iframe {
    display: block;
}

/* --- Grundriss mit Hotspots nur auf Geräten mit genug Platz (Mouseover) --- */
@media only screen and (max-width: 767px) {
    #top .flex_column[class*="av-sl-fh-s3b"],
    #top .flex_column[class*="av-sl-fh-g1"],
    #top .flex_column[class*="av-sl-fh-g2"] {
        display: none !important;
    }
}

/* --- Rechtstexte (Impressum, Datenschutz) ---------------- */
#top .sl-recht {
    max-width: 820px;
    margin: 0 auto;
    padding: 28px 32px;
    background: var(--sl-box);
    border: 1px solid #d6e1ce;
    border-radius: 6px;
}
#top .sl-recht h2 {
    margin: 1.6em 0 0.5em;
    font-size: 1.25em;
    color: #516c43;
}
#top .sl-recht h2:first-child {
    margin-top: 0;
}
#top .sl-recht p {
    line-height: 1.65;
}
@media only screen and (max-width: 600px) {
    #top .sl-recht { padding: 18px; }
}

/* --- Credit-Box Agentur (Impressum) ---------------------- */
#top .sl-credit {
    max-width: 820px;
    margin: 20px auto 0;
    padding: 12px 18px;
    border: 1px dashed #c5d4bb;
    border-radius: 6px;
    text-align: center;
    font-size: 0.9em;
    color: #666;
}
#top .sl-credit-label {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #516c43;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
#top .sl-credit a {
    color: #516c43;
    text-decoration: none;
}
#top .sl-credit a:hover {
    text-decoration: underline;
}

/* --- Wappen (Startseite) ---------------------------------- */
#top figure.sl-wappen {
    margin: 0 auto;
    text-align: center;
}
#top figure.sl-wappen img {
    display: block;
    width: 150px;                      /* Originalgröße – nicht hochskalieren */
    max-width: 100%;
    height: auto;
    margin: 0 auto 10px;
}
#top figure.sl-wappen figcaption {
    font-size: 0.85em;
    color: #666;
    line-height: 1.4;
}