/* Villa nel Verde – ein Stylesheet für alle Seiten (ersetzt Divi + Plugins) */

@font-face { font-family: "Amatic SC"; font-weight: 400; font-display: swap; src: url(../fonts/amatic-sc-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Amatic SC"; font-weight: 700; font-display: swap; src: url(../fonts/amatic-sc-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Nixie One"; font-weight: 400; font-display: swap; src: url(../fonts/nixie-one-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "Scope One"; font-weight: 400; font-display: swap; src: url(../fonts/scope-one-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 300; font-display: swap; src: url(../fonts/roboto-300-latin.woff2) format("woff2"); }
@font-face { font-family: "Pitch"; font-weight: 400; font-display: swap; src: url(../fonts/pitch-regular.otf) format("opentype"); }

:root {
  --gruen: #00645f;
  --gruen-hell: #247873;
  --sand: #cfcfb9;
  --sand-knopf: #c5c8b3;
  --text: #333;
  --grau: #666;
  --amatic: "Amatic SC", handwriting, cursive;
  --nixie: "Nixie One", Georgia, serif;
  --open: "Open Sans", Helvetica, Arial, sans-serif;
  --scope: "Scope One", Georgia, serif;
  --pitch: "Pitch", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--grau); font: 500 17px/1.8 var(--open); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--amatic); font-weight: 700; color: var(--gruen); line-height: 1; padding-bottom: 10px; }
p { margin: 0; }
p + p { padding-top: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.huelle { width: 80%; max-width: 1170px; margin: 0 auto; }
.topbar .huelle, .site-header .huelle, .site-footer .huelle { width: 81.25%; }

.dachzeile { font: 700 17px/1.6 var(--scope); color: var(--sand); text-transform: uppercase; }
h2 { font-size: 48px; line-height: 1; }
.welle { margin: 21px 0 21px; }
.welle-klein { margin: 25px 0 25px; }

/* Knöpfe */
.knopf { display: inline-block; font: 700 12px/1.7 var(--open); letter-spacing: 1px; text-transform: uppercase; color: #fff; padding: 17px 48px; border: 1px solid; cursor: pointer; transition: background .3s, color .3s; }
.knopf-gruen { background: var(--gruen); border-color: var(--gruen); }
.knopf-hell { background: var(--sand); border-color: var(--sand); }
.knopf:hover { opacity: .9; }

/* ---------------------------------------------------------------- Kopf */
.topbar { background: var(--gruen); color: #fff; height: 50px; }
.topbar-zeile { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.topbar-kontakt { display: flex; gap: 36px; }
.topbar-kontakt a { display: flex; align-items: center; gap: 21px; color: #fff; font: 300 15px/21px var(--open); }
.topbar-kontakt a:first-child { margin-left: -4px; }
.topbar-rechts { display: flex; align-items: center; }
.topbar-guide { color: #fff; font: 700 12px/1 var(--open); text-transform: uppercase; padding-right: 19px; margin-right: 0; border-right: 1px solid #fff; line-height: 30px; }
.social { list-style: none; margin: 0; padding: 0; display: flex; }
.social a { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.social svg { width: 15px; height: 15px; fill: currentColor; }
.social-hell { margin-left: 30px; gap: 12px; }
.social-hell a { color: #fff; }

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 2px 30px rgba(0, 0, 0, .06); }
.header-zeile { display: flex; align-items: center; height: 150px; padding-top: 12px; transition: height .3s; }
.logo { width: 352px; flex: none; padding-left: 10px; }
.logo-gross { width: 150px; }
.logo-klein { display: none; width: 65px; }
.main-nav { display: flex; gap: 22px; margin-top: 20px; }
.main-nav a { font: 400 16px/14px var(--nixie); color: var(--text); padding-bottom: 8px; }
.main-nav a:hover { opacity: .7; }
.main-nav a[aria-current] { color: var(--sand); }
.knopf-kopf { margin-left: auto; background: var(--sand-knopf); border: 0; padding: 12px 37px; letter-spacing: 0; font-size: 12px; line-height: 20.4px; }
.nav-toggle { display: none; }

.site-header.klein .header-zeile { height: 100px; padding-top: 0; }
.site-header.klein .logo-gross { display: none; }
.site-header.klein .logo { width: 231px; }
.site-header.klein .knopf-kopf { margin-right: 121px; }
.site-header.klein .logo-klein { display: block; margin-top: 18px; }

/* ---------------------------------------------------------------- Fuß */
.site-footer { font-family: var(--nixie); }
.fuss-oben { padding: 35px 0; background: linear-gradient(0deg, rgba(255, 255, 255, .73) 0%, rgba(255, 255, 255, .78) 72%), url(../img/mandala.png) no-repeat 100% 0; }
.fuss-reihe { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 3%; }
.fuss-reihe-1 { padding: 44px 0 29px; border-bottom: 2px dashed rgba(207, 207, 185, .5); }
.fuss-logo img { width: 205px; }
.fuss-label { font: 700 12px/10.8px var(--scope); color: var(--sand); letter-spacing: 1px; text-transform: uppercase; margin-top: 5px; }
.fuss-gross { font: 400 34px/30.6px var(--amatic); color: var(--gruen); margin-top: 21px; }
.fuss-gross a { color: inherit; }
.fuss-bewertungen img { margin-top: 32px; }
.social-fuss { margin: 31px 0 0 -6px; gap: 8px; }
.social-fuss a { color: var(--sand); width: 26px; }
.social-fuss svg { width: 11px; height: 11px; }
.fuss-zeiten { font: 400 15px/30.6px var(--pitch); color: var(--grau); margin-top: 32px; }
.fuss-reihe-2 { padding: 28px 0 15px; }
.fuss-spalte { padding: 28px 0 28px; border-right: 2px dashed rgba(207, 207, 185, .47); padding-right: 30px; }
.fuss-spalte:last-child { border-right: 0; padding-right: 0; }
.fuss-titel { font: 700 14px/12.6px var(--scope); color: var(--sand); text-transform: uppercase; }
.fuss-text { font: 400 14px/1.81 var(--nixie); color: var(--text); margin-top: 25px; padding-right: 5px; }
.fuss-text + .fuss-text { margin-top: 0; padding-top: 14px; }
.fuss-text strong { font-weight: 700; }
.fuss-links { list-style: none; margin: 28px 0 0; padding: 0; }
.fuss-links li { margin-bottom: 14px; line-height: 22.4px; }
.fuss-links a { font: 400 15px/22.4px var(--nixie); color: var(--text); }
.fuss-klein { font: 500 12px/1.9 var(--open); color: rgba(102, 102, 102, .61); margin-top: 25px; }
.newsletter { margin-top: 18px; }
.newsletter input { width: 100%; height: 50px; border: 1px solid #d6d6d6; border-radius: 2px; padding: 15px 20px; font: 300 15px var(--roboto, "Roboto"), sans-serif; color: #919191; }
.newsletter .knopf { width: 100%; margin-top: 18px; padding: 17px 20px; }
.form-message { font-size: 13px; line-height: 1.5; margin-bottom: 8px; color: var(--gruen); }
.fuss-unten { background: var(--gruen); color: #fff; }
.fuss-unten-zeile { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 77px; padding: 19px 0; }
.fuss-unten-zeile p { font: 700 14px/0.9 var(--nixie); }
.fuss-unten-zeile a { color: #fff; font-weight: 600; }
.fuss-herz { text-align: center; font: 800 17px/30.6px var(--scope) !important; text-transform: uppercase; }
.fuss-recht { text-align: right; font-weight: 300 !important; }

/* ---------------------------------------------------------------- Bausteine */
.seitenkopf { margin: 50px 50px 0; padding-bottom: 10px; min-height: 329px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff center/cover no-repeat; }
.seitenkopf h1 { color: #fff; font-size: 50px; text-transform: uppercase; }
.seitenkopf .welle { margin: 20px 0 0; }

.cta { padding: 0 0 15.4px; margin-top: 57.6px; position: relative; }
.cta-bild { min-height: 364px; display: flex; align-items: center; justify-content: center; padding: 150px 50px; background-color: var(--sand); background-size: cover; background-position: 50% 0; background-attachment: fixed; }
.cta-box { padding: 0; margin-top: 0; }
.cta-box::before { display: none; }
.cta-box .cta-bild { width: 81.25%; max-width: 1170px; margin: 0 auto 15px; min-height: 264px; padding: 0; }

.bildband { padding: 138px 0 57px; }
.bildband-bild { height: 423px; background: center/cover no-repeat fixed; }

/* Startseite */
.intro { padding: 58px 0 47px; }
.intro-zeile { display: flex; justify-content: space-between; align-items: flex-start; }
.intro-text { width: 64.833%; }
.intro-titel { font-size: 53px; line-height: 30.6px; color: var(--gruen-hell); padding: 0; }
.intro .welle-klein { margin: 34px 0 34px; }
.intro-text p { font: 400 18px/30.6px var(--nixie); color: var(--text); max-width: 732px; }
.intro-siegel img { width: 150px; }

.slider { position: relative; height: 485px; overflow: hidden; }
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: center/cover no-repeat; opacity: 0; transition: opacity .8s; padding: 0 6%; }
.slide.aktiv { opacity: 1; }
.slide h2 { font-size: 70px; line-height: 1; font-weight: 400; color: #fff; padding-bottom: 10px; text-shadow: 0 0 20px rgba(0,0,0,.15); }
.slide p { font: 700 19px/30.6px var(--nixie); color: #fff; }
.slider-punkte, .karussell-punkte, .bildslider-punkte { position: absolute; left: 0; right: 0; bottom: 44px; display: flex; justify-content: center; gap: 10px; z-index: 2; }
.slider-punkte button, .karussell-punkte button, .bildslider-punkte button { width: 7px; height: 7px; border-radius: 7px; border: 0; padding: 0; background: rgba(255, 255, 255, .5); cursor: pointer; }
.slider-punkte button.aktiv { background: #fff; }

.kacheln { padding: 58px 0; }
.kachel-raster { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(244, 239, 237, .24); }
.kachel { height: 334px; }
.kachel-text { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 51px 20px 0; }
.kachel-text h3 { font-size: 38px; line-height: 38px; padding: 0 0 10px; }
.kachel-text h3 a { color: var(--gruen); }
.kachel-text .welle-klein { margin: 9px 0 25px; }
.kachel-text p { font: 400 16px/30.6px var(--nixie); color: var(--text); padding-bottom: 22px; }
.mehr { font: 700 13px/30.6px var(--open); color: var(--grau); text-transform: uppercase; }
.kachel-bild { background: #f2f2f2 center/cover no-repeat; }

.willkommen { padding: 66px 0 58px; }
.willkommen-zeile { display: flex; justify-content: space-between; }
.willkommen-text { width: 39.3%; }
.willkommen-text h2 { max-width: 440px; }
.willkommen-text p:not(.dachzeile) { font: 400 16px/30.6px var(--nixie); color: var(--text); }
.knopfreihe { display: flex; gap: 10px; margin-top: 34px; }
.knopfreihe .knopf-hell { margin-top: 3px; }
.willkommen-bilder { position: relative; width: 559px; height: 503px; }
.willkommen-bilder img { position: absolute; object-fit: cover; }
.wb1 { left: 53px; top: -1px; width: 210px; height: 210px; }
.wb2 { left: 297px; top: 49px; width: 262px; height: 262px; }
.wb3 { left: 0; top: 240px; width: 262px; height: 262px; }

.ausfluege { padding: 87px 0 8px; }
.ausfluege-zeile { display: flex; align-items: flex-start; }
.ausfluege-titel { width: 297px; flex: none; }
.ausfluege-titel h2 { width: 210px; padding-top: 14px; }
.ausfluege-text { width: 559px; font: 400 16px/30.6px var(--nixie); color: var(--text); margin-top: 9px; }
.ausfluege-siegel { margin-left: auto; }
.ausfluege-siegel img { width: 150px; }

/* Karussell (Ausflüge) */
.ausfluege-karussell { padding: 29px 0 0; }
.karussell { position: relative; padding-bottom: 60px; }
.karussell-fenster { overflow: hidden; }
.karussell-band { display: flex; gap: 56px; transition: transform .5s; }
.karussell-karte { flex: 0 0 calc(50% - 28px); display: flex; align-items: flex-start; gap: 30px; border: 2px dashed #e8e8e8; padding: 0 20px 0 0; height: 194px; }
.karussell-karte-bild { position: relative; flex: 0 0 196px; margin: 34px 0; }
.karussell-karte-text { padding-top: 30px; }
.karussell-karte-bild img { width: 196px; height: 122px; object-fit: contain; }
.badge { position: absolute; top: 16px; right: 6px; background: var(--sand); color: #fff; font: 800 12px/12px var(--open); text-transform: uppercase; padding: 7px 12px; border-radius: 50px; }
.karussell-karte h4 { font-size: 39px; line-height: 39px; padding-bottom: 10px; }
.karussell-karte .mehr { margin-top: 20px; display: inline-block; color: var(--sand); font-size: 14px; line-height: 23.8px; padding: 4px 14px; }
.karussell-pfeil { position: absolute; top: 92px; width: 60px; height: 60px; border: 0; background: none; cursor: pointer; z-index: 2; }
.karussell-pfeil::before { content: ""; position: absolute; left: 24px; top: 22px; width: 12px; height: 12px; border: solid #c7c7b0; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.karussell-zurueck { left: -60px; }
.karussell-weiter { right: -60px; }
.karussell-weiter::before { transform: rotate(-135deg); left: 20px; }
.karussell-punkte { bottom: -8px; }
.karussell-punkte button { background: #e4e4d8; }
.karussell-punkte button.aktiv { background: var(--sand); }

/* Unterseiten: Text + Bildpaar */
.split { padding: 101px 0 58px; }
.split-zeile { display: flex; justify-content: space-between; align-items: flex-start; }
.split-text { width: 39.3%; }
.split-text h2, .willkommen-text h2 { margin-top: 10px; }
#redensart { padding: 59px 0 80px; }
#gastgeber { padding-bottom: 82px; }
#gastgeber h2 { margin-top: 28px; }
.split-text p:not(.dachzeile) { font: 400 16px/30.6px var(--nixie); color: var(--text); padding-bottom: 16px; }
.textlink { font: 700 12px/20.4px var(--open); color: var(--grau); text-transform: uppercase; display: inline-block; margin-top: 10px; }
.bildpaar { position: relative; width: 559px; }
.bildpaar-hinten { width: 559px; }
.bildpaar-vorne { position: absolute; left: 121px; top: 167px; width: 316px; height: 316px; object-fit: cover; border: 8px solid #fff; box-shadow: 0 2px 18px rgba(0, 0, 0, .12); }

/* Galerie */
.galerie { padding: 42px 0 111px; }
.galerie-filter { display: flex; justify-content: center; margin-bottom: 47px; }
.galerie-filter button { font: 700 14px/14px var(--nixie); color: var(--grau); background: #fff; border: 1px solid #e2e2e2; padding: 10px 20px; margin-right: 3px; cursor: pointer; }
.galerie-filter button:first-child { border-radius: 3px 0 0 3px; }
.galerie-filter button:last-child { border-radius: 0 3px 3px 0; margin-right: 0; }
.galerie-filter button.aktiv { background: #f9f9f9; }
.galerie-raster { display: grid; grid-template-columns: repeat(4, 240px); justify-content: space-between; row-gap: 69px; padding-bottom: 50px; border-bottom: 1px solid #e2e2e2; }
.galerie-raster a { display: block; }
.galerie-raster a[hidden] { display: none; }
.galerie-raster img { width: 240px; height: 310px; object-fit: cover; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 92vh; }

/* Mittig gesetzte Textabschnitte (Story, Kontakt) */
.mittig { padding: 92px 0 58px; text-align: center; }
.mittig .welle, .mittig .welle-klein { margin-left: auto; margin-right: auto; }
.mittig-text { max-width: 800px; margin: 0 auto; }
.mittig-text p { font: 400 16px/30.6px var(--nixie); color: var(--text); padding-bottom: 16px; }
.mittig-text.schmal { max-width: 666px; }
.social-rund { justify-content: center; gap: 10px; margin-top: 34px; }
.social-rund a { width: 40px; height: 40px; border-radius: 50%; background: var(--sand); color: #fff; }
.social-rund svg { width: 20px; height: 20px; }

/* Kontakt */
.kontakt-intro { padding: 79px 0 61px; }
.kontakt-intro .welle-klein, .formular .welle-klein { margin: 32px auto; }
.titel-gross { font-size: 38px; line-height: 38px; text-transform: uppercase; max-width: 400px; margin: 0 auto; }
.kontakt-intro .mittig-text p { font-family: var(--pitch); color: var(--grau); }
.kontaktdaten { background: #f9f9f9; padding: 59px 0 0; min-height: 231px; }
.kontaktdaten-zeile { display: grid; grid-template-columns: repeat(3, 1fr); }
.kontaktdatum { padding-left: 34px; }
.kontaktdatum + .kontaktdatum { border-left: 1px solid #ebebeb; }
.kontaktdatum { display: flex; gap: 15px; }
.kontakt-icon { width: 34px; height: 34px; fill: none; stroke: var(--sand); stroke-width: 1.2; stroke-linejoin: round; flex: none; }
.kontaktdatum h4 { font-size: 32px; line-height: 32px; text-transform: uppercase; padding: 5px 0 10px; }
.kontaktdatum p, .kontaktdatum a { font: 400 16px/30.6px var(--pitch); color: var(--grau); }
.formular { padding-top: 88px; padding-bottom: 33px; }
.kontaktformular { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 21px; max-width: 699px; margin: 0 auto; text-align: center; }
.kontaktformular input, .kontaktformular textarea { width: 100%; border: 1px solid rgba(53, 55, 64, .2); padding: 16px; font: 400 14px var(--pitch); color: var(--grau); background: #fff; }
.kontaktformular input { height: 50px; }
.kontaktformular textarea { grid-column: 1 / -1; height: 150px; resize: vertical; }
.kontaktformular .error { border-color: #c00; }
.formular-hinweis { grid-column: 1 / -1; font: 400 12px/20.4px var(--pitch); text-transform: uppercase; margin-top: 8px; }
.formular-hinweis a { color: var(--grau); font-weight: 700; }
.kontaktformular .form-message { grid-column: 1 / -1; }
.knopf-formular { grid-column: 1 / -1; justify-self: center; margin-top: 22px; width: 250px; background: var(--sand); border: 14px solid var(--sand); font-family: "Roboto", var(--open); padding: 3.6px 20px; }

/* Blog */
.blog-intro { padding: 129px 0 58px; }
.blog-intro-zeile { display: flex; align-items: flex-start; width: 75%; max-width: 1080px; padding-left: 4px; }
.seitenkopf-blog h1 { padding-left: 25px; }
.blog-intro-titel { width: 340px; }
.blog-intro-titel .dachzeile { font-weight: 400; line-height: 30px; letter-spacing: .4px; }
.blog-intro-titel h2 { width: 250px; padding-top: 10px; }
.zitat { margin: -20px 0 0 36px; background: rgba(244, 239, 237, .5); padding: 30px 50px 40px; flex: 1; max-width: 651px; }
.zitat blockquote { margin: 0; font: 700 17px/30px var(--nixie); color: var(--grau); letter-spacing: .4px; }
.zitat figcaption { display: grid; grid-template-columns: 60px auto; column-gap: 18px; margin-top: 36px; }
.zitat img { grid-row: 1 / 3; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.zitat-name { font: 700 28px/44.8px var(--amatic); color: var(--grau); }
.zitat-rolle { font: 400 16px/24px var(--pitch); color: #989bac; margin-top: -8px; }

.blog-liste { padding: 68px 0 90px; }
.beitrag-raster { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 33px; row-gap: 58px; width: 80%; max-width: 1152px; }
.beitrag-karte-bild img { width: 363px; height: 227px; object-fit: contain; }
.beitrag-karte h2 { font-size: 36px; line-height: 36px; padding: 25px 45px 0; }
.beitrag-karte h2 a { color: var(--gruen); }
.beitrag-karte .mehr { display: block; padding-left: 45px; margin-top: 12px; font-size: 12px; color: var(--sand); }

.reisefuehrer { padding: 50px 0 0; }
.reisefuehrer-box { display: flex; align-items: flex-start; background: rgba(252, 245, 244, .34); min-height: 557px; padding: 61px 50px 40px; gap: 106px; }
.reisefuehrer-text { width: 420px; }
.reisefuehrer-text .dachzeile { font-weight: 400; }
.reisefuehrer-text h2 { width: 336px; }
.reisefuehrer-text p:not(.dachzeile) { font: 400 16px/30.6px var(--nixie); color: var(--text); padding-bottom: 16px; }
.reisefuehrer-text .knopf { margin-top: 24px; }
.reisefuehrer-bild { margin-top: -27px; }
.reisefuehrer-bild img { width: 263px; box-shadow: 0 2px 18px rgba(0, 0, 0, .12); }

/* Beitrag (Detailseite) */
.beitrag-kopf { padding: 50px 0 50px; text-align: center; }
.beitrag-kopf h1 { font-size: 50px; line-height: 80px; text-transform: uppercase; padding: 17px 0 10px; }
.beitrag-meta { font: 400 17px/30.6px var(--pitch); color: var(--grau); padding-bottom: 16px; }
.beitrag-inhalt { padding: 28px 0 35px; }
.beitrag-zeile { display: flex; justify-content: space-between; align-items: flex-start; }
.beitrag-bilder { position: relative; width: 544px; }
.beitrag-bilder img { width: 544px; height: auto; }
.beitrag-bilder img + img { display: none; }
.beitrag-bilder.slider-an img { display: none; }
.beitrag-bilder.slider-an img.aktiv { display: block; }
.bildslider-punkte { bottom: 30px; }
.bildslider-punkte button { background: rgba(0, 0, 0, .3); }
.bildslider-punkte button.aktiv { background: #333; }
.beitrag-text { width: 544px; align-self: center; }
.beitrag-text h2 { font-size: 36px; line-height: 46px; color: var(--grau); padding: 0; margin-top: -1px; }
.beitrag-text .welle { width: 70px; margin: 20px 0 30px; }
.beitrag-text p { font: 400 16px/30.6px var(--pitch); color: var(--grau); padding-bottom: 16px; }
.beitrag-text .eckdaten { border: 2px dashed var(--sand); padding: 0 0 0 30px; font: 700 14px/30.6px var(--pitch); margin: 18px 0 32px; }

/* Rechtstexte */
.legal { padding: 58px 0 0; }
.legal ul, .legal ol { margin: 0; padding: 0 0 23px 1em; line-height: 26px; }
.legal li { line-height: 26px !important; }

.legal h1 { font-size: 46px; line-height: 46px; font-weight: 400; color: var(--text); }
.legal h2 { font-size: 39px; line-height: 39px; font-weight: 400; color: var(--text); }
.legal h3 { font-size: 33px; line-height: 33px; font-weight: 400; color: var(--text); }
.legal h4 { font-size: 27px; line-height: 27px; font-weight: 400; color: var(--text); }
.legal p, .legal li { font: 500 17px/30.6px var(--open); color: var(--grau); }
.legal p { padding-bottom: 17px; }
.legal p:last-child { padding-bottom: 0; }
.legal h1 + * { margin-top: 20px; }

/* ---------------------------------------------------------------- Tablet und Handy */
@media (max-width: 980px) {
  .topbar { display: none; }
  .header-zeile { flex-direction: column; height: auto; padding: 41px 0 0; }
  .logo { width: auto; padding: 0; }
  .logo-gross { width: 179px; }
  .main-nav, .knopf-kopf { display: none; }
  .nav-toggle { display: block; width: 100vw; height: 52px; margin-top: 28px; background: var(--gruen); border: 0; cursor: pointer; position: relative; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 50%; width: 20px; height: 2px; margin-left: 10px; background: #fff; content: ""; }
  .nav-toggle span { top: 25px; } .nav-toggle span::before { top: -6px; left: 0; margin: 0; } .nav-toggle span::after { top: 6px; left: 0; margin: 0; }
  .main-nav.open { display: flex; flex-direction: column; gap: 0; width: 100vw; background: #fff; padding: 10px 0; text-align: center; }
  .main-nav.open a { padding: 12px 0; font-size: 16px; }
  .site-header.klein .header-zeile { height: auto; padding-top: 41px; }
  .site-header.klein .logo-gross { display: block; }
  .site-header.klein .logo-klein { display: none; }
  .site-header { position: relative; }
  .bildband-bild, .cta-bild { background-attachment: scroll; }
  .huelle { width: 80%; }
  .intro-zeile, .willkommen-zeile, .split-zeile, .ausfluege-zeile, .beitrag-zeile, .blog-intro-zeile, .reisefuehrer-box { flex-direction: column; }
  .intro-text, .willkommen-text, .split-text, .ausfluege-titel, .ausfluege-text, .beitrag-text, .beitrag-bilder, .bildpaar, .reisefuehrer-text, .blog-intro-titel { width: 100%; }
}
@media (max-width: 767px) {
  .intro { padding: 50px 0 32px; text-align: center; }
  .intro-text { width: 100%; }
  .intro .welle-klein, .kachel-text .welle-klein { margin-left: auto; margin-right: auto; }
  .intro-siegel { align-self: flex-end; margin-top: 35px; }
  .slider { height: 369px; }
  .slide h2 { font-size: 64px; line-height: 64px; font-weight: 400; }
  .slide p { font-size: 14px; }
  .kachel-raster { grid-template-columns: 1fr; background: none; }
  .kachel { height: auto; }
  .kacheln { padding-bottom: 50px; }
  .kachel-text { padding: 42px 20px 0; height: 356px; background: #f9f9f9; }
  .k2 { height: 223px; }
  .k1 { height: 365px; }
  .k5 { height: 347px; }
  .willkommen { padding: 36px 0 59px; }
  .ausfluege-karussell { padding-bottom: 50px; }
  .ausfluege { padding: 50px 0 0; }
  .karussell { padding-bottom: 50px; }
  .karussell-karte { height: 455px; padding: 0; gap: 0; }
  .karussell-karte-bild { flex: none; width: 100%; margin: 0; padding-top: 30px; }
  .karussell-karte-bild img { width: 100%; height: 192px; }
  .badge { top: 46px; right: 16px; }
  .karussell-karte-text { align-self: stretch; padding: 20px 30px 0; }
  .karussell-punkte { bottom: 19px; }
  .karussell-pfeil { top: 208px; width: 36px; height: 36px; }
  .karussell-pfeil::before { left: 12px; top: 12px; }
  .karussell-weiter::before { left: 8px; }
  .cta { padding: 0 0 15px; margin-top: 50px; }
  .cta-bild { min-height: 336px; padding: 140px 20px; }
  .kachel-bild { height: 243px; }
  .k1 { order: 1; } .k4 { order: 2; } .k3 { order: 3; } .k6 { order: 4; } .k5 { order: 5; } .k2 { order: 6; }
  .willkommen-bilder { width: 100%; height: auto; display: flex; flex-direction: column; gap: 30px; margin-top: 70px; }
  .willkommen-bilder img { position: static; width: 100% !important; height: auto !important; aspect-ratio: 1; }
  .knopfreihe { flex-direction: column; gap: 30px; }
  .knopfreihe .knopf { text-align: center; }
  .bildband { padding: 50px 0; }
  .bildband-bild { height: 383px; }
  .ausfluege-zeile { text-align: center; align-items: center; }
  .ausfluege-titel h2 { width: auto; }
  .ausfluege-titel .welle { margin-left: auto; margin-right: auto; }
  .ausfluege-siegel { display: none; }
  .karussell-karte { flex: 0 0 100%; flex-direction: column; align-items: center; }
  .karussell-band { gap: 56px; }
  .karussell-zurueck { left: -38px; } .karussell-weiter { right: -38px; }
  .seitenkopf { margin: 0; min-height: 275px; padding: 0 39px 12px; }
  .seitenkopf-blog { margin-top: 7px; padding-bottom: 36px; }
  .split, .mittig, .blog-intro, .reisefuehrer-text { text-align: center; }
  .split .welle, .blog-intro .welle-klein, .reisefuehrer-text .welle { margin-left: auto; margin-right: auto; }
  .split { padding: 68px 0 40px; }
  #redensart { padding: 48px 0 10px; }
  .split-text h2 { padding-left: 6px; padding-right: 6px; }
  .bildpaar { display: none; }
  .split .textlink { margin-top: 21px; }
  .galerie { padding: 94px 0 41px; }
  .galerie-filter { flex-direction: column; margin-bottom: 40px; }
  .galerie-filter button { margin: 0 0 -1px; border-radius: 0 !important; }
  .galerie-raster { grid-template-columns: 1fr; row-gap: 36.5px; }
  .galerie-raster img { width: 100%; height: auto; aspect-ratio: 400 / 516; }
  .mittig { padding-top: 92px; }
  #gastgeber { padding-bottom: 60px; }
  #gastgeber h2 { margin-top: 26px; }
  .kontakt-intro { padding-top: 80px; }
  .kontakt-intro { padding-bottom: 50px; }
  .kontaktdaten { padding: 99px 0 115px; }
  .kontaktdaten-zeile { grid-template-columns: 1fr; row-gap: 30px; width: 80%; }
  .kontaktdatum { padding-left: 34px; border-left: 0 !important; }
  .kontaktformular { grid-template-columns: 1fr; gap: 10px; }
  .formular-hinweis { margin-top: 5px; }
  .knopf-formular { margin-top: 40px; }
  .formular { padding-top: 60px; padding-bottom: 30px; }
  .blog-intro { padding: 23px 0 40px; }
  .blog-intro-zeile { width: 80%; padding: 0; align-items: center; }
  .blog-intro-titel .dachzeile { font-size: 16px; }
  .blog-intro-titel h2 { width: 250px; margin: 0 auto; }
  .zitat { margin: 31px 0 0; padding: 0 11px 20px; background: none; text-align: center; max-width: none; width: 100%; }
  .zitat blockquote { font-size: 16px; }
  .zitat figcaption { display: block; position: relative; margin-top: 36px; }
  .zitat img { position: absolute; left: 0; top: 8px; width: 50px; height: 50px; }
  .zitat-name, .zitat-rolle { display: block; padding-left: 78px; }
  .blog-liste { padding: 94px 0 76px; }
  .beitrag-raster { grid-template-columns: 1fr; width: 100%; row-gap: 70px; }
  .beitrag-karte-bild img { width: 100%; height: auto; aspect-ratio: 400 / 250; }
  .beitrag-karte h2 { padding: 25px 44px 0; }
  .beitrag-karte .mehr { padding-left: 44px; margin-top: 2px; }
  .reisefuehrer { padding-top: 60px; }
  .reisefuehrer-box { padding: 30px 11px 267px; gap: 40px; min-height: 0; }
  .reisefuehrer-text .knopf { margin-top: 33px; }
  .reisefuehrer-text h2 { width: auto; }
  .reisefuehrer-bild { margin-top: 0; }
  .reisefuehrer-bild img { width: 261px; }
  .beitrag-kopf { padding: 90px 0 20px; }
  .beitrag-kopf h1 { padding-top: 12px; }
  .beitrag-meta { padding-bottom: 60px; }
  .beitrag-bilder img { width: 100%; }
  .beitrag-text { margin-top: 4px; }
  .cta-box .cta-bild { width: 100%; min-height: 257px; padding: 0 50px; }
  .cta-box .knopf { text-align: center; }
  .fuss-reihe { grid-template-columns: 1fr; text-align: center; }
  .fuss-bewertungen, .fuss-reihe-2 { display: none; }
  .fuss-reihe-1 { border: 0; padding: 45px 0 0; row-gap: 50px; }
  .fuss-logo img { margin: 0 auto; }
  .social-fuss { justify-content: center; margin-left: 0; }
  .fuss-unten-zeile { grid-template-columns: 1fr; text-align: center; gap: 18px; padding: 32px 0 21px; }
  .fuss-unten-zeile p { line-height: 18.2px; }
  .fuss-herz { line-height: 31px !important; }
  .fuss-label { line-height: 15.6px; margin-top: 0; }
  .fuss-gross { line-height: 44.2px; margin-top: 9px; }
  .fuss-zeiten { margin-top: 21px; line-height: 27px; }
  .fuss-reihe-1 > div:last-child { padding-bottom: 26px; }
  .fuss-recht { text-align: center; }
  .legal h1 { font-size: 36px; }
}