/* ===========================================================================
   Ergaenzungen zum uebernommenen Theme-Stylesheet.
   Ersetzt das, wofuer die Contao-Fassung jQuery gebraucht hat.
   =========================================================================== */

/* --- Masonry ohne isotope -------------------------------------------------
   Das Original ordnete die Galerie mit isotope an (jQuery, ~40 KB, und ohne
   JavaScript liegt alles untereinander). CSS-Spalten koennen dasselbe: Der
   Browser verteilt die Kacheln selbst und passt sich der Fensterbreite an.
   -------------------------------------------------------------------------- */
.masonry-thumbs {
    display: block !important;
    column-gap: 10px;
    /* Kein position:relative/absolute mehr — isotope hat die Kacheln absolut
       positioniert, das wuerde die Spalten zerstoeren. */
}
.masonry-thumbs.grid-4 { column-count: 4; }
.masonry-thumbs.grid-3 { column-count: 3; }
.masonry-thumbs.grid-2 { column-count: 2; }

.masonry-thumbs .grid-item {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    break-inside: avoid;          /* eine Kachel nie ueber zwei Spalten reissen */
    -webkit-column-break-inside: avoid;
    margin: 0 0 10px;
    transform: none !important;   /* isotope setzte translate() */
}
.masonry-thumbs .grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px)  { .masonry-thumbs.grid-4 { column-count: 3; } }
@media (max-width: 767px)  { .masonry-thumbs.grid-4,
                             .masonry-thumbs.grid-3 { column-count: 2; } }
@media (max-width: 479px)  { .masonry-thumbs.grid-4,
                             .masonry-thumbs.grid-3,
                             .masonry-thumbs.grid-2 { column-count: 1; } }

/* --- Lightbox --------------------------------------------------------------
   Ersetzt magnific-popup. Bewusst schlicht: Bild gross, Hintergrund dunkel,
   Schliessen per Klick oder Esc.
   -------------------------------------------------------------------------- */
#lichtkasten {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    padding: 2vh 2vw;
}
#lichtkasten[data-offen] { display: flex; }
#lichtkasten img {
    max-width: 100%;
    max-height: 96vh;
    width: auto;
    height: auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}
#lichtkasten button {
    position: absolute;
    background: none;
    border: 0;
    color: #fff;
    font-size: 2.6rem;
    line-height: 1;
    padding: .4rem 1rem;
    cursor: pointer;
    opacity: .75;
}
#lichtkasten button:hover { opacity: 1; }
#lk-zu   { top: .5rem; right: 1rem; }
#lk-vor  { right: 1rem; top: 50%; transform: translateY(-50%); }
#lk-zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) { #lichtkasten button { font-size: 2rem; } }

/* Ohne JavaScript soll wenigstens nichts kaputt aussehen. */
.no-js #primary-menu-trigger { display: none; }

/* --- Mobilmenue ------------------------------------------------------------
   Das Original klappte es per jQuery auf. Statt 1,1 MB Theme-CSS nach dem
   erwarteten Zustand zu durchsuchen, wird das Verhalten hier selbst
   festgelegt — vorhersehbar und unabhaengig von Theme-Interna.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    #header .primary-menu .menu-container {
        display: none;
        flex-direction: column;
        width: 100%;
        background: rgba(0, 0, 0, .92);
        padding: .5rem 0;
    }
    #header.menu-offen .primary-menu .menu-container { display: flex; }
    #header .primary-menu .menu-item { width: 100%; }
    #header .primary-menu .menu-link { padding: .8rem 1.2rem; display: block; }
    /* Untermenues (Bilder, Kontakt) auf Mobil immer ausklappen — sonst kaeme
       man ohne Hover-Geste nicht an Karpfen und BuchtM1 heran. */
    #header.menu-offen .primary-menu .sub-menu-container {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none;
        background: rgba(255, 255, 255, .06);
    }
    #header.menu-offen .primary-menu .sub-menu-container .menu-link { padding-left: 2.4rem; }
    #primary-menu-trigger { display: block; cursor: pointer; }
}

/* --- Einblend-Animationen --------------------------------------------------
   Das Theme setzt [data-animate]:not(.animated){opacity:0} und liess die
   Elemente per jQuery einblenden. Faellt das Skript aus, bleibt der Text
   dauerhaft UNSICHTBAR — so fehlte im ersten Versuch die Seitenueberschrift.
   Diese Regel ist die Rueckfallebene: ohne JavaScript ist alles sofort da.
   -------------------------------------------------------------------------- */
html.no-js [data-animate]:not(.animated) { opacity: 1 !important; }

/* --- Slider ohne Revolution Slider -----------------------------------------
   Das Original brauchte dafuer jquery.themepunch.revolution samt vier
   Erweiterungen. Fuer zwei Folien mit Ueberblendung reicht CSS.
   -------------------------------------------------------------------------- */
.rev_slider {
    position: relative;
    overflow: hidden;
    /* Als Variable, weil die erste Folie unten denselben Wert braucht. */
    --slider-min-hoehe: 60vh;
    min-height: var(--slider-min-hoehe);
}
.rev_slider > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    min-height: inherit;
}
.rev_slider > ul > li {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.rev_slider > ul > li[data-aktiv] {
    opacity: 1;
    pointer-events: auto;
}
/* ⚠️ Die erste Folie steht im Fluss und bestimmt die Hoehe des Sliders —
   ihr Bild braucht deshalb height:auto. Mit height:100% faellt sie in sich
   zusammen (die li hat keine eigene Hoehe), und vom Slider bleibt nur ein
   schmales Band. Genau das war der Fehler im ersten Versuch. */
.rev_slider > ul > li:first-child { position: relative; }
.rev_slider > ul > li > img {
    width: 100%;
    display: block;
}
/* ⚠️ …aber height:auto allein reicht nicht. Das Bild ist 1500×1000; bei 360 px
   Fensterbreite wird es nur 240 px hoch, waehrend der Slider durch
   min-height 60vh (auf einem Handy ~470 px) deutlich hoeher ist. Ergebnis:
   ein schmaler Bildstreifen oben und darunter eine graue Flaeche — genau das
   war am Handy zu sehen, am Rechner nie, weil das Bild dort breit genug ist.
   Deshalb dieselbe Mindesthoehe auch fuer das Bild, und object-fit:cover
   schneidet den Ueberstand sauber ab statt es zu verzerren. */
.rev_slider > ul > li:first-child > img {
    height: auto;
    min-height: var(--slider-min-hoehe);
    object-fit: cover;
}
.rev_slider > ul > li:not(:first-child) > img {
    height: 100%;
    object-fit: cover;
}

/* Punkte zum Umschalten */
#slider-punkte {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}
#slider-punkte button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    background: transparent;
    padding: 0;
    cursor: pointer;
}
#slider-punkte button[aria-current="true"] { background: rgba(255, 255, 255, .95); }

/* --- Schwebender Kopfbereich über dem Slider --------------------------------
   Im Original legt das Theme-JavaScript (functions.js) Leiste und Kopfbereich
   zur Laufzeit ueber das Sliderbild — im Markup steht davon nichts. Hier
   uebernimmt das CSS. Gilt nur, solange der Kopf nicht klebt; sobald
   .sticky-header gesetzt ist, greift wieder die Regel des Themes.
   -------------------------------------------------------------------------- */
body:has(#slider) #top-bar.transparent-topbar,
body:has(#slider) #header.transparent-header:not(.sticky-header) {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 199;
}
body:has(#slider) #top-bar.transparent-topbar { top: 0; z-index: 200; }
body:has(#slider) #header.transparent-header:not(.sticky-header) { top: 44px; }

/* Der Kopfbereich soll durchscheinen, nur der innere Kasten bleibt dunkel —
   so macht es das Theme auch (.transparent-header.dark .container). */
body:has(#slider) #header.transparent-header:not(.sticky-header) #header-wrap {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Oberste Leiste ueber dem Slider ebenfalls durchscheinend, und der Slider
   beginnt ganz oben — sonst bleibt ein dunkles Band ueber dem Bild. */
body:has(#slider) #top-bar.transparent-topbar,
body:has(#slider) #top-bar.transparent-topbar #top-bar-wrap {
    background: transparent;
    border-bottom: 0;
}
body:has(#slider) #slider.include-header { margin-top: 0; }

/* --- Revolution-Slider sichtbar machen -------------------------------------
   ⚠️ Dieselbe Masche wie bei [data-animate]: Das Theme versteckt Folien UND
   Beschriftungen per CSS (visibility:hidden) und laesst sie vom Skript
   aufdecken. Ohne jQuery blieb vom Slider nur ein 105 px hohes leeres Band —
   der Fehler sah aus wie ein Hoehenproblem, war aber ein Sichtbarkeitsproblem.
   -------------------------------------------------------------------------- */
.rev_slider > ul,
.rev_slider > ul > li,
.tp-simpleresponsive > ul,
.tp-simpleresponsive > ul > li {
    visibility: visible !important;
}

/* Beschriftungen: im Original setzt das Skript sie anhand von data-x/data-y
   absolut. Ohne Skript stehen sie im Fluss — deshalb hier mittig ueber die
   Folie gelegt, statt sie linksbuendig untereinander haengen zu lassen. */
.rev_slider .tp-caption,
.rev_slider .caption {
    visibility: visible !important;
    white-space: normal;
}
.rev_slider > ul > li > .tp-caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
}

/* ⚠️ Der eigentliche Grund, warum der Slider unsichtbar blieb: Das Theme setzt
   .rev_slider auf display:none und laesst das Skript ihn aufbauen. Solange das
   so ist, greifen alle Regeln zu visibility ins Leere — der Fehler sah aus wie
   ein Hoehenproblem, war aber ein display:none zwei Ebenen hoeher.
   Ebenso .slider-inner{position:fixed} — das ist der Parallax-Effekt des
   Themes, den sonst ebenfalls JavaScript steuert. */
.rev_slider { display: block !important; }
#slider .rev_slider > ul > li { visibility: visible !important; }
#slider .slider-inner { position: relative !important; }

/* --- Beschriftungen einblenden ---------------------------------------------
   Im Original animiert das Skript jede Beschriftung einzeln. Dasselbe geht
   mit einem Uebergang, der an der Klasse [data-aktiv] der Folie haengt:
   Sobald eine Folie aktiv wird, fahren ihre Texte gestaffelt herein.
   -------------------------------------------------------------------------- */
/* ⚠️ translateX(-50%) haelt die Beschriftung mittig (siehe Regel weiter oben).
   Ein zweites transform ERSETZT es, statt sich zu ergaenzen — beide Anteile
   muessen deshalb in derselben Angabe stehen, sonst rutscht der Text nach
   rechts aus dem Bild. */
.rev_slider > ul > li .tp-caption {
    opacity: 0;
    transform: translate(-50%, 24px);
    transition: opacity .9s ease, transform .9s ease;
}
.rev_slider > ul > li[data-aktiv] .tp-caption {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* Gestaffelt: Ueberschrift zuerst, dann Unterzeile, dann Schaltflaeche. */
.rev_slider > ul > li[data-aktiv] .tp-caption:nth-of-type(1) { transition-delay: .25s; }
.rev_slider > ul > li[data-aktiv] .tp-caption:nth-of-type(2) { transition-delay: .5s;  }
.rev_slider > ul > li[data-aktiv] .tp-caption:nth-of-type(3) { transition-delay: .75s; }
.rev_slider > ul > li[data-aktiv] .tp-caption:nth-of-type(n+4) { transition-delay: 1s; }

/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt den Text
   sofort — nicht gar nicht. */
@media (prefers-reduced-motion: reduce) {
    .rev_slider > ul > li .tp-caption {
        opacity: 1;
        transform: translate(-50%, 0);
        transition: none;
    }
}

/* --- Senkrechte Lage der Beschriftungen ------------------------------------
   Im Original rechnet das Skript sie aus data-y="top" und data-voffset
   (280 / 360 / 450 px bei 868 px Entwurfshoehe) aus und skaliert sie mit.
   Als Prozentwerte macht das CSS dasselbe — 280/868 = 32 %, 360/868 = 41 %,
   450/868 = 52 % — und es bleibt bei jeder Fenstergroesse richtig.
   ⚠️ Ohne top-Angabe stapeln sich die Texte am unteren Rand UNTERHALB des
   Bildes: absolut positioniert, aber ohne senkrechten Bezugspunkt.
   -------------------------------------------------------------------------- */
.rev_slider > ul > li .tp-caption:nth-of-type(1) { top: 32%; }
.rev_slider > ul > li .tp-caption:nth-of-type(2) { top: 44%; }
.rev_slider > ul > li .tp-caption:nth-of-type(3) { top: 54%; }

/* --- Schriftgroesse der Slider-Ueberschrift ---------------------------------
   Im Markup steht data-fontsize="['110','90','70','64']" und
   data-width="['800','800','560','360']" — vier Werte fuer die vier
   Umbruchpunkte des Themes (1240 / 1024 / 778 / 480). Im Original rechnet
   das Skript sie aus; hier stehen sie als Medienabfragen.
   Ohne das erscheint „Carpfishing" in normaler Textgroesse.
   -------------------------------------------------------------------------- */
.rev_slider > ul > li .tp-caption:nth-of-type(1) {
    font-size: 110px;
    line-height: 1.05;
    max-width: 800px;
}
.rev_slider > ul > li .tp-caption:nth-of-type(2) { max-width: 750px; }

@media (max-width: 1240px) {
    .rev_slider > ul > li .tp-caption:nth-of-type(1) { font-size: 90px; }
}
@media (max-width: 1024px) {
    .rev_slider > ul > li .tp-caption:nth-of-type(1) { font-size: 70px; max-width: 560px; }
    .rev_slider > ul > li .tp-caption:nth-of-type(2) { max-width: 480px; }
}
/* --- Schmale Geraete: Beschriftungen stapeln statt in Prozent setzen --------
   ⚠️ Die Prozentwerte oben stammen aus dem Entwurf des Themes und gehen davon
   aus, dass jede Beschriftung EINE Zeile hoch ist. Am Handy bricht der Text
   auf zwei bis drei Zeilen um — dann ueberlappen die drei Bloecke einander
   und die Ueberschrift verschwindet hinter der Kopfleiste. Prozentwerte
   nachzujustieren hilft nicht dauerhaft, weil die Texthoehe vom Umbruch
   abhaengt, nicht von der Fensterhoehe.
   Deshalb hier: fester Bezugsrahmen fuer den Slider, beide Folien absolut,
   Bild darunter — und die Texte als mittige Spalte im normalen Fluss. Damit
   kann sich nichts mehr ueberlappen, egal wie oft der Text umbricht.
   -------------------------------------------------------------------------- */
@media (max-width: 778px) {
    /* Die Hoehe kommt jetzt vom Slider selbst, nicht mehr von der ersten
       Folie — sonst koennte sie nicht absolut gesetzt werden.
       ⚠️ Untergrenze in Pixeln, nicht nur 60vh: Auf einem niedrigen Fenster
       (Emulation, Landscape) blieben sonst keine 440 px, und Ueberschrift,
       Unterzeile und Schaltflaeche muessen zwischen Kopfleiste und den
       Punkten Platz haben. */
    .rev_slider {
        --slider-min-hoehe: max(60vh, 440px);
        height: var(--slider-min-hoehe);
    }
    .rev_slider > ul { height: 100%; }

    .rev_slider > ul > li,
    .rev_slider > ul > li:first-child {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        /* ⚠️ Oben viel Innenabstand: Die Kopfleiste liegt am Handy ueber dem
           Slider (position:absolute) und ist mit dem grossen Logo rund 140 px
           hoch. Ohne den Abstand steht „Carpfishing" HINTER dem Logo.
           Unten Platz fuer die Umschaltpunkte.
           ⚠️ Das !important ist noetig, nicht bequem: Die Revolution-Slider-CSS
           des Themes setzt auf genau diesen Selektor
           `margin:0!important; padding:0!important`. Ohne Gegenwehr bleibt der
           Abstand wirkungslos — und zwar STILL: die uebrigen Angaben aus
           demselben Block (display, justify-content) greifen ganz normal, es
           sieht also nicht nach einer verworfenen Regel aus.
           Merksatz: Wenn aus einem Regelblock einzelne Angaben nicht ankommen,
           nach !important im Fremd-CSS suchen — nicht am eigenen Selektor. */
        padding: 150px 22px 60px !important;
    }
    .rev_slider > ul > li > img,
    .rev_slider > ul > li:first-child > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }

    /* Im Fluss statt absolut — deshalb ohne translateX(-50%). */
    .rev_slider > ul > li > .tp-caption {
        position: static;
        width: 100%;
        max-width: 100%;
        transform: translate(0, 24px);
    }
    .rev_slider > ul > li[data-aktiv] > .tp-caption {
        transform: translate(0, 0);
    }

    .rev_slider > ul > li .tp-caption:nth-of-type(1) {
        font-size: 52px;
        max-width: 100%;
        margin-bottom: 6px;
    }
    .rev_slider > ul > li .tp-caption:nth-of-type(2) {
        max-width: 100%;
        margin-bottom: 18px;
    }
}

@media (max-width: 480px) {
    /* „Carpfishing" ist bei 52 px auf einem 360-px-Bildschirm breiter als das
       Fenster. */
    .rev_slider > ul > li .tp-caption:nth-of-type(1) { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Auch hier gilt: sofort sichtbar statt gar nicht. Ohne diese Regel wuerde
       die Ausnahme weiter oben greifen, die noch translate(-50%, 0) setzt —
       im Fluss haette das den Text nach links aus dem Bild geschoben. */
    @media (max-width: 778px) {
        .rev_slider > ul > li .tp-caption { transform: translate(0, 0); }
    }
}

/* --- Seitenueberschrift am Handy -------------------------------------------
   ⚠️ Das Theme laesst die Ueberschrift im Kopfbereich auch auf schmalen
   Geraeten bei 40 px. „Teichordnung" ist damit 351 px breit, der Textbereich
   bei 360 px Fensterbreite aber nur 321 px — die Seite bekam dadurch als
   EINZIGE einen waagrechten Bildlauf. „Angelplätze" und „Datenschutz" lagen
   mit exakt 321 px genau auf der Kante.
   Merksatz: Beim Pruefen auf Ueberbreite reicht es nicht, Elemente zu suchen,
   die rechts hinausragen — ein zu breites WORT in einem Block faellt dabei
   durch. Zusaetzlich scrollWidth gegen clientWidth pruefen.
   -------------------------------------------------------------------------- */
/* ⚠️ `#page-title h1` reicht NICHT: Das Theme setzt die 40 px ueber
   `#page-title.page-title-parallax h1` — eine Klasse mehr, also spezifischer.
   Die eigene Regel blieb wirkungslos, obwohl neubau.css spaeter geladen wird.
   Reihenfolge schlaegt Spezifitaet nicht. */
@media (max-width: 480px) {
    #page-title.page-title-parallax h1,
    #page-title h1 { font-size: 32px; letter-spacing: 1px; }
}

/* ===========================================================================
   Rechtstexte (Impressum, Datenschutz)
   ---------------------------------------------------------------------------
   Die gegengelesenen Fassungen kommen aus Word, wo JEDER SATZ ein eigener
   Absatz ist. Mit dem Theme-Abstand (p { margin-bottom: 15px } plus dem
   Aussenabstand der Ueberschriften) stehen dadurch Saetze INNERHALB eines
   Abschnitts genauso weit auseinander wie die Abschnitte selbst — die
   Gliederung verschwindet und die Seite wird unnoetig lang.

   Deshalb hier: Saetze eng, Ueberschriften mit viel Luft DARUEBER und wenig
   darunter. So gehoert sichtbar zusammen, was zusammengehoert.
   =========================================================================== */

.rechtstext p {
    margin-bottom: 9px;
    line-height: 1.7;
    /* Zeilen ueber die volle Fensterbreite sind bei Fliesstext muehsam zu
       lesen — das Auge findet den Zeilenanfang nicht wieder. */
    max-width: 78ch;
}

.rechtstext h2 {
    margin: 44px 0 12px 0;
    font-size: 22px;
    line-height: 1.35;
}

/* Die erste Ueberschrift braucht keinen Abstand nach oben — darueber sitzt
   schon der Seitenkopf. */
.rechtstext > h2:first-child,
.rechtstext > .ce_text > h2:first-child {
    margin-top: 0;
}

/* Anschriften und Kontaktbloecke stehen als ein Absatz mit <br>. Etwas mehr
   Zeilenabstand macht sie als Block lesbar. */
.rechtstext p > br + br { line-height: 2; }

@media (max-width: 778px) {
    .rechtstext h2 { margin-top: 34px; font-size: 20px; }
}