::selection {
    color: #000;
    background: #fff;
}

::-moz-selection {
    color: #000;
    background: #fff;
}

html {
    scroll-behavior: smooth;
}

/* Sichtbarer Fokus fuer die Tastaturbedienung. Der Standardring des Browsers
   ist hier rgb(15,15,15) und auf dem schwarzen Grund der Seite nicht zu
   erkennen. Gilt absichtlich global und mit niedriger Spezifitaet, damit
   einzelne Elemente ihn bei Bedarf ueberschreiben koennen. */
:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

body {
    /* Hoehe, die die Fusszeile am unteren Rand belegt (Zeilenhoehe plus ihre
       Abstaende). Als Variable, weil #push_menu sie freihalten muss. */
    --footer-band-height: 50px;

    margin: 0;
    background-color: #000;
    padding-top: 30px;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#push_icon {
    position: fixed;
    left: 20px;
    top: 15px;
    width: 30px;
    height: 30px;
    z-index: 1001;
    cursor: pointer;
    /* Vorgaben des button-Elements zuruecknehmen. Das Element ist ein Button,
       weil es per JavaScript etwas ausloest – als div waere es weder per
       Tabulator erreichbar noch als Schaltflaeche angesagt. */
    padding: 0;
    border: 0;
    background: none;
    appearance: none;
}

/* Nachbau der frueheren hamburger.png: drei weisse Balken, 5px hoch, mit
   3px Abstand und absichtlich unterschiedlichen Breiten (22/28/17px). */
.push_icon__bar {
    position: absolute;
    left: 0;
    height: 5px;
    background: #fff;
    transition:
        transform 300ms cubic-bezier(0.330, 0.645, 0.360, 1.005),
        width 300ms cubic-bezier(0.330, 0.645, 0.360, 1.005),
        opacity 200ms linear;
}

.push_icon__bar:nth-child(1) { top: 0;    width: 22px; }
.push_icon__bar:nth-child(2) { top: 8px;  width: 28px; }
.push_icon__bar:nth-child(3) { top: 16px; width: 17px; }

/* Bei geoeffnetem Textbereich zum X: aeusserer und unterer Balken wandern auf
   die Mitte (y=10.5px) und kreuzen sich, der mittlere schrumpft weg. Beide
   Kreuzbalken bekommen dieselbe Breite, sonst waere das X ungleichschenklig. */
#push_icon.active .push_icon__bar:nth-child(1),
.legal__close .push_icon__bar:nth-child(1) {
    top: 0;
    width: 28px;
    transform: translateY(8px) rotate(45deg);
}

/* Nur der Hamburger hat einen mittleren Balken – er schrumpft weg. */
#push_icon.active .push_icon__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#push_icon.active .push_icon__bar:nth-child(3),
.legal__close .push_icon__bar:nth-child(2) {
    top: 16px;
    width: 28px;
    transform: translateY(-8px) rotate(-45deg);
}

#push_menu {
    width: 380px;
    /* Endet oberhalb der Fusszeile statt am Fensterrand. Sonst laeuft die
       Bildlaufleiste des Bereichs bis ganz nach unten und steht hinter den
       Fusszeilen-Links. */
    height: calc(100vh - var(--footer-band-height));
    position: fixed;
    top: 0;
    left: -500px;
    /* padding-top: 50px; */
    padding-right: 25px;
    padding-left: 20px;
    color: #F5F5F5;
    line-height: 1.45;
    font-size: 0.85em;
    overflow: auto;
}

.textmask {
    position: sticky;
    background: #000000;
    width: 100%;
    z-index: 1;
}

.textmask--top {
    top: 0;
    height: 50px;
}


#push_menu .impressum h2 {
    font-size: 1.17em;
}


/* Auf schmalen Schirmen volle Breite, aber mit Innenabstand rechts, damit der
   Text nicht am Rand klebt. box-sizing sorgt dafuer, dass 100vw inkl. Padding
   gilt und nichts ueberlaeuft. */
@media (max-width: 420px) {
    #push_menu {
        width: 100vw;
        box-sizing: border-box;
        padding-right: 30px;
    }
}

#push_menu a,
#push_menu a:hover,
#push_menu a:active,
#push_menu a:visited {
    text-decoration: none;
    color: #fff;
}

#push_menu a:hover {
    text-decoration: underline;
}

#push_menu p {
    opacity: 0.7;
}

#push_menu p:first-of-type {
    margin-top: 1.3rem;
}

#push_menu img {
    opacity: 0.9;
}

/* Schiebe-Animation des Menues und der Galerie */
#anzeige,
#push_menu {
    transition: all 500ms cubic-bezier(0.330, 0.645, 0.360, 1.005);
}

#push_icon,
#push_menu img {
    opacity: 0.7;
    transition: all 500ms cubic-bezier(0.330, 0.645, 0.360, 1.005);
}

#push_icon:hover,
#push_icon:focus-visible,
#push_menu img:hover {
    opacity: 1;
    transition: all 500ms cubic-bezier(0.330, 0.645, 0.360, 1.005);
}

#anzeige {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    margin: 20px 20px 40px 20px;
    visibility: hidden;
}

/* Ruhezustand der Thumbnails. Der Hover-Schweif (Hell-/Dunkel-Puls) wird in
   size.js via attachHoverPulse() gemacht – originalgetreu wie jQuery fadeTo. */
#anzeige img {
    opacity: 0.5;
    cursor: pointer;
}

.dunkel {
    opacity: 0.5;
}

#info {
    position: fixed;
    z-index: 2;
    /* Wird erst von size.js eingeblendet. Ohne JavaScript laege sonst ein
       schwarzer Vorhang ueber der Seite; pointer-events sorgt zusaetzlich
       dafuer, dass das Overlay waehrend des Ausblendens keine Klicks frisst. */
    display: none;
    pointer-events: none;
    /* Deckt den ganzen Viewport ab. Frueher wurden Breite/Hoehe in size.js
       gesetzt – inset:0 erledigt das rein per CSS (fixed bezieht sich auf den
       Viewport). background-size:contain zentriert die Anleitungsgrafik darin. */
    inset: 0;
    background-image: url('../img_anleitung/kayaalp_com_anleitung.webp');
    background-repeat: no-repeat;
    background-position: center center;
    /* Grafik in die Flaeche einpassen, damit sie auf kleinen Schirmen nicht
       ueberlaeuft. Etwas Innenabstand, damit sie nicht bis an den Rand stoesst. */
    background-size: 30vw;
    padding: 20px;
    box-sizing: border-box;
    background-color: #000;
}

/* Auf Touch-Geraeten die Swipe-Anleitung statt der Tastatur-Grafik zeigen. */
@media (hover: none) and (pointer: coarse) {
    #info {
        background-image: url('../img_anleitung/swipe-hint.svg');
        background-size: 50vw;
    }
}

#picbig1 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 20;
    background-color: #000;
}

#picbig2 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 21;
}

#picbig div {
    cursor: pointer;
}

.wrappa {
    position: absolute;
    z-index: 105;
    top: 0;
    left: 0;
    width: 99%;
    height: 24%;
}

.wrappb {
    position: absolute;
    z-index: 107;
    top: 25%;
    left: 0;
    width: 50%;
    height: 74%;
}

.wrappc {
    position: absolute;
    z-index: 109;
    top: 25%;
    left: 50%;
    width: 49%;
    height: 74%;
}

#a,
#b,
#c {
    position: absolute;
    display: none;
    background-repeat: no-repeat;
}

#a {
    z-index: 200;
    top: 0;
    left: 0;
    width: 99%;
    height: 24%;
    background-position: center 10px;
}

#b {
    z-index: 201;
    top: 25%;
    left: 0;
    width: 50%;
    height: 74%;
    background-position: left 30%;
}

#c {
    z-index: 202;
    top: 25%;
    left: 50%;
    width: 49%;
    height: 74%;
    background-position: right 30%;
}

#currpic {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #FFF;
    display: none;
    z-index: 30;
}

/* Inline-Bilder sitzen auf der Textgrundlinie und reservieren darunter Platz
   fuer Unterlaengen -> ~4px Spalt zwischen Bildunterkante und dem weissen
   Rahmen. display:block entfernt diesen Baseline-Gap. */
#currpic img {
    display: block;
}

#clickebene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 29;
}

#r,
#n {
    display: none;
}

#bildinfo {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: -52px;
    border-right: 2px solid #000;
    left: 0;
    margin-left: -1px;
    color: #FFF;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    padding: 6px 0 6px 0;
    box-sizing: border-box;
}

/* Serien-Navigationspunkte – sitzen unten IM Bild (in #currpic), damit ein
   Klick daneben nicht die Lightbox schliesst, sondern auf der Bildflaeche bleibt. */
#seriesdots {
    display: flex;
    position: absolute;
    bottom: 14px;
    left: 50%;
    text-align: center;
    line-height: 0;
    z-index: 300;
    transform: translateX(-50%);
    width: 100%;
    justify-content: center;
    gap: 1em;
}

#seriesdots .seriesdot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.3s;
    position: relative;
}

#seriesdots .seriesdot:hover {
    background: rgba(255, 255, 255, 0.7);
}

#seriesdots .seriesdot.is-active {
    background: #fff;
}

/* #open_preferences_center {
    position: absolute;
    left: 20px;
    bottom: 0;
    color: #FFF;
    font-family: Verdana, Geneva, sans-serif;
    font-size: .8rem;
} */


/* Ein einziges Chevron-Icon (nach unten); im geoeffneten Zustand per
   transform gedreht. Farbe #F5F5F5 ist ins SVG eingebrannt (%23F5F5F5), weil
   ein CSS-Bild sich nicht per color umfaerben laesst – das Icon sitzt auf dem
   schwarzen #push_menu. Groesse ueber background-size zuverlaessig steuerbar. */



.datenschutz h4,
.datenschutz h5,
.datenschutz li {
    color: #ccc;
    font-size: inherit;
}

.datenschutz ul {
    list-style: none;
}

.icns {
    width: 20px;
    height: 20px;
    float: left;
    overflow: hidden;
    background-repeat: no-repeat;
}

.socialmedia__container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.socialmedia__links {
    display: flex;
    height: auto;
}

.socialmedia__links img {
    opacity: 0.7;
    filter: drop-shadow(0 0 2px rgba(245, 245, 245, 0.7));
    transition: filter 0.25s ease;
}

.socialmedia__links:hover img {
    opacity: 0.9;
    filter: drop-shadow(0 0 2px rgba(245, 245, 245, 0.7));
}

.footermenu__container {
    position: absolute;
    left: 20px;
    bottom: 0;
    color: #FFF;
    font-family: Verdana, Geneva, sans-serif;
    font-size: .8rem;
    display: flex;
    gap: 10px;
    padding-left: 0;
    z-index: 1;
}

.footermenu__item {
    list-style: none;
}

/* Trennstrich zwischen den Eintraegen. Als ::before am jeweils folgenden
   Eintrag, damit hinter dem letzten keiner steht. Rein dekorativ und deshalb
   in der CSS statt im Markup – Screenreader lesen ihn so nicht mit. */
.footermenu__item + .footermenu__item::before {
    content: "|";
    margin-right: 10px;
    color: rgb(255 255 255 / 0.4);
}

/* Kein opacity am Container: das dimmt den deckenden Grund der fixierten
   Leiste auf den Rechtsseiten mit. Die Zuruecknahme steckt deshalb im
   Alphawert der Linkfarbe – .footermenu__link ueberschreibt die geerbte
   Farbe ohnehin, der Wert gehoert also hierher. */
.footermenu__link,
.footermenu__link:active {
    color: rgb(255 255 255 / 0.7);
    text-decoration: none;
}

.footermenu__link:hover,
.footermenu__link:focus {
    color: #fff;
    text-decoration: underline;
}

/* Eigenstaendige Rechtsseiten (Impressum, Datenschutz).
   Wirken wie ein Overlay ueber der Galerie, sind aber echte Seiten – damit die
   Pflichtangaben auch ohne JavaScript erreichbar sind. */
/* Fusszeile am unteren Bildschirmrand halten, solange der Text kuerzer als der
   Viewport ist, und bei langem Text ans Dokumentende ruecken.
   Die Hoehenbegrenzung gehoert an den body und NICHT an .legal: body traegt
   bereits padding-top und die Fusszeile steht ausserhalb von .legal – dort
   wuerden sich die Hoehen addieren und die Seite um genau diesen Betrag
   scrollen lassen. Mit border-box liegt beides innerhalb der 100vh. */
.page--legal {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.page--legal .legal {
    flex: 1 0 auto;
}

.legal {
    /* Hoehe der fixierten Maskierungsleiste. Steht als Variable hier, weil zwei
       Regeln sie brauchen: die Leiste selbst und der Sprungabstand der Anker. */
    --legal-bar-height: 50px;

    padding: 30px 20px 80px;
    color: #F5F5F5;
    line-height: 1.45;
    font-size: 0.85em;
}

/* Linksbuendig am Bildschirmrand, Breite aber begrenzt: auf grossen Schirmen
   soll der Text nicht ueber die volle Fensterbreite laufen. */
.legal__inner {
    width: min(100%, 42rem);

    /* Ankerziel: Ohne diesen Abstand scrollt der Sprung die Ueberschrift auf
       Hoehe 0 – und damit hinter die Leiste. Die zusaetzlichen 60px geben ihr
       Luft nach oben. */
    scroll-margin-top: calc(var(--legal-bar-height) + 60px);
}

.legal__inner.datenschutz {
    margin-top: 5rem;
}

.legal a,
.legal a:hover,
.legal a:active,
.legal a:visited {
    color: #fff;
}

/* Maskierungsleiste hinter dem Schliessen-X: verdeckt den Text, der beim
   Scrollen darunter durchlaeuft. Als Pseudoelement und nicht als Teil des
   Links – sonst waere die gesamte Leiste klickbar und ein Klick irgendwo oben
   wuerde die Seite verlassen. Ohne pointer-events:none, damit die Leiste auch
   Klicks auf den verdeckten Text darunter abfaengt. */
.legal::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--legal-bar-height);
    background: #000;
    z-index: 1;
}

/* Schliessen-X an der Stelle, an der auf der Startseite der Hamburger sitzt.
   Kein opacity: das wuerde den Hintergrund mitdimmen. Die Zuruecknahme steckt
   im Alphawert der Schriftfarbe und betrifft damit nur das Zeichen. */
.legal__close {
    position: fixed;
    top: 15px;
    left: 20px;
    width: 30px;
    height: 30px;
    z-index: 2;
    /* Traegt keinen Hintergrund – die Maskierungsleiste ist .legal::before.
       Deshalb ist opacity hier unbedenklich und wirkt wie beim Hamburger. */
    opacity: 0.7;
    transition: opacity 500ms cubic-bezier(0.330, 0.645, 0.360, 1.005);
}

.legal__close:hover,
.legal__close:focus-visible {
    opacity: 1;
}

/* Gegenstueck zur Leiste oben: Auf den Rechtsseiten steht die Fusszeile fest
   am unteren Rand, mit deckendem Grund, damit der Text darunter durchlaeuft
   statt hindurchzuscheinen. Anders als das Schliessen-X darf sie ueber die
   volle Breite gehen – klickbar sind nur die Links darin, nicht die Flaeche. */
.legal ~ footer .footermenu__container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 15px 20px;
    background: #000;
    z-index: 1;
}

.error_page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    background: #000;
    color: #fff;
    z-index: 50;
}

.error_page h1 {
    font-size: 64px;
    margin: 0 0 10px;
}

.error_page h1 + p {
    margin: 0 0 24px;
}

.error_page p:last-of-type {
    margin-bottom: 0;
}

.error_page a {
    color: #fff;
}