/* ==========================================================================
   Kalrobia Layout für Piwigo (Theme „Modus“, Skin egal)
   Farben, Schriften und Formen wie auf kalrobia.de.
   Alle Regeln beginnen mit „html body“, damit sie die Modus-Regeln schlagen.
   ========================================================================== */

@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter.woff2') format('woff2-variations'); }
@font-face { font-family: 'Oswald Variable'; font-style: normal; font-display: swap; font-weight: 200 700; src: url('../fonts/oswald.woff2') format('woff2-variations'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/caveat.woff2') format('woff2'); }

:root {
  --kr-g9: #04150d; --kr-g8: #072a19; --kr-g7: #0b3d24; --kr-g6: #0f5a35; --kr-g5: #1f8f4e; --kr-g4: #6fd39a;
  --kr-gold: #d2a63c; --kr-gold-l: #ecd28b;
  --kr-papier: #f8efd9; --kr-weiss: #fffaf0; --kr-text: #2a2216; --kr-braun: #3b2a12;
  --kr-body: 'Inter Variable', system-ui, sans-serif;
  --kr-head: 'Oswald Variable', 'Arial Narrow', sans-serif;
  --kr-script: 'Caveat', cursive;
  --kr-max: 1180px;
  --kr-s: clamp(2rem, 4.8vw, 4.75rem); /* wie --s auf kalrobia.de */
}

/* ---------- Grundlagen ---------- */
html body { background: var(--kr-papier); color: var(--kr-text); font-family: var(--kr-body); font-size: 15px; line-height: 1.55; }
/* Modus macht body zur Flex-Spalte mit fester Höhe. Ohne diese Regel werden Kopf, Wimpel und Banner
   auf langen Seiten zusammengestaucht. */
html, html body { height: auto; }
html body { min-height: 100vh; }
html body > .kr-kopf, html body > .kr-wimpel, html body > #theHeader, html body > .kr-fuss, html body > #copyright { flex-shrink: 0; }
html body a { color: var(--kr-g6); }
html body a:hover { color: var(--kr-g5); }
html body h2, html body h3, html body h4 { font-family: var(--kr-head); font-weight: 600; letter-spacing: .02em; }
html body :focus-visible { outline: 3px solid var(--kr-gold); outline-offset: 2px; }

/* ---------- Kopfleiste (aus template/kopf.html) ---------- */
html body .kr-kopf { position: relative; z-index: 60; background: linear-gradient(to bottom, var(--kr-g9), var(--kr-g8)); border-bottom: 3px solid var(--kr-gold); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
html body .kr-kopf-innen { width: min(100% - 2.5rem, var(--kr-max)); margin: 0 auto; padding: 0; height: 4.5rem; display: flex; align-items: center; justify-content: flex-end; }
html body .kr-marke { position: absolute; left: max(1.25rem, calc((100vw - var(--kr-max)) / 2)); top: .6rem; z-index: 2; text-decoration: none; }
html body .kr-badge { display: block; transform: rotate(-4deg); transition: transform .25s; }
html body .kr-marke:hover .kr-badge { transform: rotate(2deg) scale(1.04); }
html body .kr-badge img { display: block; width: 9rem; height: auto; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 10px rgba(255,240,200,.55)) drop-shadow(0 10px 12px rgba(0,0,0,.55)); }
html body .kr-nav { display: flex; gap: 1.5rem; }
html body .kr-nav a { color: #fff; text-decoration: none; font-family: var(--kr-body); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .4rem 0; border-bottom: 2px solid transparent; }
html body .kr-nav a:hover, html body .kr-nav a[aria-current='page'] { color: var(--kr-gold-l); border-color: var(--kr-gold-l); }
html body .kr-menue-schalter { position: absolute; opacity: 0; pointer-events: none; }
html body .kr-burger { display: none; cursor: pointer; width: 2.6rem; height: 2.6rem; place-items: center; color: #fff; }
html body .kr-burger span, html body .kr-burger span::before, html body .kr-burger span::after { content: ''; display: block; width: 1.5rem; height: 2px; background: currentColor; position: relative; }
html body .kr-burger span::before { position: absolute; top: -7px; }
html body .kr-burger span::after { position: absolute; top: 7px; }
html body .kr-wimpel { position: relative; z-index: 55; height: 64px; margin-bottom: -64px; pointer-events: none; background: url('../img/wimpel.svg') repeat-x 0 0 / 320px 64px; filter: drop-shadow(0 4px 3px rgba(0,0,0,.25)); }
/* Piwigos eigene Seiten für Anmeldung, Registrierung und Passwort haben keinen Banner:
   dort hängt die Wimpelkette nicht über den Inhalt */
html body:has(#logo-section) > .kr-wimpel { margin-bottom: 0; }
@media (max-width: 1060px) {
  html body .kr-burger { display: grid; }
  html body .kr-nav { position: absolute; top: 4.5rem; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--kr-g9); padding: .6rem 1.5rem 1.2rem; border-bottom: 3px solid var(--kr-gold); display: none; }
  html body .kr-nav a { padding: .75rem 0; font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  html body .kr-menue-schalter:checked ~ .kr-nav { display: flex; }
  html body .kr-menue-schalter:focus-visible ~ .kr-burger { outline: 3px solid var(--kr-gold-l); }
  html body .kr-badge img { width: 6.4rem; }
}

/* ---------- Banner „Willkommen …“ (Piwigo: Konfiguration › Optionen › Seitenbanner) ---------- */
html body #theHeader { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: calc(64px + 2.1rem) 0 2.4rem; text-align: left; background: var(--kr-g7); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kr-s)), 0 100%); padding-bottom: calc(var(--kr-s) + 3rem); }
html body #theHeader::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .08; background: url('../img/wasserzeichen.webp') no-repeat right max(-6rem, calc((100vw - var(--kr-max)) / 2 - 6rem)) center / auto 130%; }
html body #theHeader > * { width: min(100% - 2.5rem, var(--kr-max)); margin-left: auto; margin-right: auto; box-sizing: border-box; }
html body #theHeader h1, html body #theHeader h2, html body #theHeader h3 { font-family: var(--kr-head); font-weight: 700; text-transform: uppercase; color: #fff; font-size: clamp(2.1rem, 8vw, 6rem); line-height: .95; letter-spacing: 0; text-shadow: 0 4px 0 rgba(0,0,0,.35); overflow-wrap: anywhere; hyphens: auto; margin-top: 0; margin-bottom: .3rem; padding-left: 0; }
html body #theHeader h3::before { content: 'Bitte recht närrisch!'; display: block; font-family: var(--kr-script); font-weight: 700; text-transform: none; font-size: 2rem; line-height: 1; color: var(--kr-gold-l); text-shadow: none; transform: rotate(-2deg); transform-origin: left; margin-bottom: .1rem; }
html body #theHeader p, html body #theHeader div { color: rgba(255,255,255,.92); font-size: 1.12rem; padding-left: 0; }


/* ---------- Menüleiste von Piwigo (Alben, Entdecken, Suche, Anmeldung) ---------- */
html body #menubar { background: var(--kr-weiss); color: var(--kr-text); border: 0; border-bottom: 3px solid var(--kr-g5); box-shadow: 0 8px 22px rgba(59,42,18,.12); max-width: var(--kr-max); margin: -1.2rem auto 1.6rem; border-radius: 0 0 6px 6px; position: relative; z-index: 20; }
html body #menubar dt, html body #menubar dt a { font-family: var(--kr-head); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--kr-g7); }
html body #menubar dt a:hover { color: var(--kr-g5); }
html body #menubar dd { background: var(--kr-weiss); color: var(--kr-text); border: 1px solid rgba(59,42,18,.12); border-top: 3px solid var(--kr-gold); box-shadow: 0 14px 30px rgba(59,42,18,.22); border-radius: 0 0 6px 6px; }
html body #menubar dd a { color: var(--kr-g6); }
html body #menubar dd a:hover { color: var(--kr-g5); text-decoration: underline; }
html body #menubar .menuInfoCat, html body #menubar .badge { background: var(--kr-gold-l); color: var(--kr-braun); border-radius: 999px; font-weight: 700; }
html body #menubar .totalImages { color: var(--kr-braun); font-weight: 600; }
html body #menubar hr { border: 0; border-top: 1px dashed rgba(59,42,18,.2); }
html body #qsearchInput { background: #fff; color: var(--kr-text); border: 1.5px solid rgba(59,42,18,.3); border-radius: 999px; padding: .35rem .9rem; }
html body #qsearchInput:focus { border-color: var(--kr-g5); outline: none; box-shadow: 0 0 0 3px rgba(31,143,78,.2); }
html body ::placeholder { color: #8a7a5a; }
html body #menuSwitcher { color: var(--kr-g7); background: var(--kr-weiss); border-radius: 6px; box-shadow: 0 4px 12px rgba(59,42,18,.18); }
html body #quickconnect fieldset { border: 0; }
html body #quickconnect input[type=text], html body #quickconnect input[type=password] { border: 1.5px solid rgba(59,42,18,.3); background: #fff; color: var(--kr-text); }

/* ---------- Seitentitel und Brotkrumen ---------- */
html body .titrePage { background: transparent; color: var(--kr-text); border: 0; box-shadow: none; max-width: var(--kr-max); margin: 0 auto; padding: .6rem 1.25rem; }
html body .titrePage h2, html body #breadcrumb h2, html body .titrePage h2 a { font-family: var(--kr-head); text-transform: uppercase; font-weight: 700; color: var(--kr-g7); font-size: clamp(1.4rem, 3vw, 2.2rem); }
/* Modus rückt den Titel für seinen eigenen Menüknopf ein, den unser Kopf ersetzt */
html body .contentWithMenu .titrePage h2, html body .contentWithMenu .browsePath, html body .titrePage h2, html body .browsePath { text-indent: 0; }
html body .titrePage a { color: var(--kr-g6); }
html body .titrePage .pwg-button, html body .categoryActions .pwg-button { color: var(--kr-g6); }
html body .titrePage .pwg-button:hover { color: var(--kr-g5); }
html body .switchBox { background: var(--kr-weiss); color: var(--kr-text); border: 1px solid rgba(59,42,18,.15); border-top: 3px solid var(--kr-gold); box-shadow: 0 14px 30px rgba(59,42,18,.22); }
html body .switchBox a, html body .titrePage .switchBox a { color: var(--kr-g6); }
html body .content, html body #content { max-width: none; }
html body .additional_info, html body .content_description { max-width: var(--kr-max); margin: 0 auto 1rem; padding: 0 1.25rem; color: var(--kr-text); }

/* ---------- Album-Kacheln als Polaroids ---------- */
html body .albThumbs { max-width: calc(var(--kr-max) + 2rem); margin: .5rem auto 2rem; padding: 0 .5rem; }
html body .albThumbs > li { overflow: visible; margin: 14px 12px 22px; background: #fff; padding: 8px 8px 3.6rem; box-shadow: 0 12px 26px rgba(59,42,18,.25); transform: rotate(-1.6deg); transition: transform .25s, box-shadow .25s; }
html body .albThumbs > li:nth-child(even) { transform: rotate(1.4deg) translateY(6px); }
html body .albThumbs > li:nth-child(3n) { transform: rotate(-.6deg); }
html body .albThumbs > li:hover, html body .albThumbs > li:focus-within { transform: rotate(0) scale(1.04); box-shadow: 0 18px 34px rgba(59,42,18,.32); z-index: 2; }
/* overflow sichtbar lassen, sonst wird die Beschriftung im weißen Rand abgeschnitten */
html body .albThumbs > li > a { position: relative; display: block; width: 100%; height: 100%; overflow: visible; color: var(--kr-braun); text-decoration: none; }
html body .albThumbs .albImg { display: block; }
/* Beschriftung unter dem Bild im weißen Rand, statt dunklem Verlauf über dem Bild */
html body .albLegend { position: absolute; left: -8px; right: -8px; bottom: calc(-3.6rem - 1px); top: auto; height: 3.6rem; width: auto; padding: .35rem .6rem 0; background: none; text-shadow: none; text-indent: 0; text-align: center; color: var(--kr-braun); filter: none; overflow: visible; }
html body .albLegend h4 { margin: 0; font-family: var(--kr-script); font-weight: 700; font-size: 1.35rem; line-height: 1.05; color: var(--kr-braun); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .albLegend > div { font-size: .75rem; color: #7a6a3a; letter-spacing: .04em; }
html body .albLegendRight { position: absolute; top: -2.2rem; right: .5rem; float: none; margin: 0; }
html body .albLegend .albSymbol, html body .albSymbol { color: var(--kr-gold); }
html body .albLegendRight .albSymbol { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--kr-g6); color: var(--kr-gold-l); font-size: 1rem; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
/* Hinweis „neu“ als Marke */
html body .albThumbs > li:has(.albLegendRight .albSymbol)::after { content: 'Neu'; position: absolute; top: 14px; left: -6px; background: var(--kr-g6); color: #fff; font-family: var(--kr-head); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .7rem .3rem .8rem; clip-path: polygon(0 0, 100% 0, 100% 100%, .6rem 100%, 0 calc(100% - .6rem)); box-shadow: 0 4px 10px rgba(0,0,0,.3); }

/* ---------- Fotoliste im Album ---------- */
/* Breite nicht begrenzen: Modus berechnet die Zeilen per Skript über die volle Breite
   (je 15 px Rand links und rechts). Bilder werden in der Kachel beschnitten, daher overflow:hidden. */
html body #thumbnails > li { overflow: hidden; }
html body #thumbnails > li { border-radius: 3px; box-shadow: 0 6px 14px rgba(59,42,18,.18); transition: transform .2s, box-shadow .2s; }
html body #thumbnails > li:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(59,42,18,.28); z-index: 2; }
html body .overDesc { background: rgba(7,42,25,.82); color: #fff; font-family: var(--kr-body); }
html body .thumbnails .wrap2:hover, html body .thumbnailCategory:hover { border-color: var(--kr-gold); }

/* ---------- Seitennavigation (1 2 3 …) ---------- */
html body .navigationBar { font-family: var(--kr-head); letter-spacing: .04em; margin: 1.5rem auto; text-align: center; }
html body .navigationBar a, html body .navigationBar span.pageNumberSelected { display: inline-block; min-width: 2.2rem; padding: .35rem .6rem; margin: 0 .15rem; border-radius: 4px; text-decoration: none; }
html body .navigationBar a { background: var(--kr-weiss); color: var(--kr-g6); box-shadow: 0 3px 8px rgba(59,42,18,.12); }
html body .navigationBar a:hover { background: var(--kr-g6); color: #fff; }
html body .navigationBar .pageNumberSelected { background: var(--kr-g7); color: var(--kr-gold-l); }

/* ---------- Einzelbild-Seite ---------- */
html body #imageHeaderBar { background: var(--kr-g7); color: #fff; }
html body #imageHeaderBar h2, html body #imageHeaderBar a, html body#thePicturePage .titrePage h2, html body#thePicturePage .titrePage a { color: #fff; }
html body #imageHeaderBar .browsePath a { color: var(--kr-gold-l); }
html body #imageToolBar, html.wide body #imageToolBar { background: var(--kr-weiss); color: var(--kr-text); box-shadow: 0 6px 16px rgba(59,42,18,.12); }
html body #imageToolBar .pwg-button, html body .actionButtons .pwg-button { color: var(--kr-g6); }
html body #imageToolBar .pwg-button:hover { color: var(--kr-g5); }
html body .actionButtonsWrapper .actionButtons { background: var(--kr-weiss); border-top: 3px solid var(--kr-gold); box-shadow: 0 14px 30px rgba(59,42,18,.22); }
html body #theImage { padding: 1rem 0 .5rem; }
/* Modus setzt Breite und Höhe als Inline-Stil. Nur die Höhe freigeben, sonst wird das Foto
   beim Verkleinern auf Handybreite verzerrt. Die Breite bleibt, damit Modus' Größenwahl am PC gilt. */
html body #theImage img { box-sizing: border-box; max-width: calc(100% - 1rem); height: auto !important; background: #fff; padding: 8px; box-shadow: 0 16px 34px rgba(59,42,18,.3); }
html.wide body #imageInfos, html body #imageInfos { background: var(--kr-weiss); color: var(--kr-text); box-shadow: 0 6px 16px rgba(59,42,18,.12); }
html body #imageInfos dt, html body #imageInfos .imageInfo dt { color: #7a6a3a; font-weight: 700; }
html body .imageInfoTable, html.wide body .imageInfoTable, html.wide body #imageInfos { background: var(--kr-weiss); color: var(--kr-text); }
html.wide body #imageInfos { border-top: 3px solid var(--kr-gold); }
html body #imageInfos h3, html.wide body #imageInfos h3 { color: var(--kr-g7); }
html body #imageInfos dd, html body #imageInfos .imageInfo dd, html body .imageInfoTable dd { color: var(--kr-text); }
html body#thePicturePage .titrePage { background: var(--kr-g7); color: #fff; }
html body#thePicturePage .titrePage .browsePath a, html body#thePicturePage .titrePage .imageNumber { color: var(--kr-gold-l); }
html body #comments { max-width: var(--kr-max); margin: 1.5rem auto 0; padding: 0 1.25rem; }
html body #comments h3 { color: var(--kr-g7); text-transform: uppercase; }
html body #comments input[type='text'], html body #comments textarea, html body #comentAdd textarea { background: #fff; color: var(--kr-text); border: 1.5px solid rgba(59,42,18,.3); }
html body #imageInfos dd a, html body .imageInfoTable dd a, html body .imageInfoTable a, html.wide body #imageInfos a { color: var(--kr-g6); }
html body .commentElement, html body #comments .commentElement { background: var(--kr-weiss); color: var(--kr-text); border-left: 4px solid var(--kr-g5); }

/* ---------- Einzelbild: moderne Infokarte ----------
   Besuche, Bewertung und „Foto bewerten“ ausblenden (zusätzlich im Piwigo-Admin abschaltbar).
   Übrig bleiben Autor, Datum, Alben, Schlagwörter usw. als Zeilen mit rundem Symbol. */
html body #imageInfos #Visits, html body #imageInfos #Average, html body #imageInfos #rating { display: none !important; }
/* leere Kommentarbox („Kein Kommentar (0)“) nur zeigen, wenn man kommentieren kann */
html body #comments.noCommentContent:not(:has(form)) { display: none; }

html.wide body #imageInfos { margin-right: 1.25rem; }
html body #imageInfos, html.wide body #imageInfos { border-radius: 10px; border-top: 3px solid var(--kr-gold); box-shadow: 0 10px 26px rgba(59,42,18,.14); overflow: hidden; }
html body #imageInfos dl.imageInfoTable, html.wide body #imageInfos dl.imageInfoTable { display: grid; gap: 1rem; margin: 0; padding: 1.2rem 1.25rem 1.3rem; background: none; }
html body #imageInfos dl.imageInfoTable .imageInfo { display: grid; grid-template-columns: 2.3rem 1fr; column-gap: .8rem; align-items: center; margin: 0; padding: 0; border: 0; background: none; }
html body #imageInfos dl.imageInfoTable .imageInfo::before { content: ''; grid-row: 1 / span 2; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--kr-g6) var(--kr-icon, none) center / 1.15rem no-repeat; box-shadow: 0 3px 8px rgba(15,90,53,.25); }
html body #imageInfos dl.imageInfoTable .imageInfo dt { grid-column: 2; float: none; width: auto; margin: 0; padding: 0; text-align: left; font-family: var(--kr-body); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a7440; line-height: 1.3; }
html body #imageInfos dl.imageInfoTable .imageInfo dd { grid-column: 2; float: none; margin: 0; padding: 0; text-align: left; font-size: .98rem; font-weight: 600; line-height: 1.35; color: var(--kr-text); overflow-wrap: anywhere; }
html body #imageInfos dl.imageInfoTable .imageInfo dd a { color: var(--kr-g6); text-decoration: none; }
html body #imageInfos dl.imageInfoTable .imageInfo dd a:hover { text-decoration: underline; }
/* Alben und Schlagwörter als Etiketten */
html body #imageInfos #Categories dd ul { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 0; padding: 0; }
html body #imageInfos #Categories dd li { margin: 0; padding: 0; list-style: none; }
html body #imageInfos #Categories dd li::marker { content: ''; }
html body #imageInfos #Categories dd a, html body #imageInfos #Tags dd a { display: inline-block; margin: .15rem .3rem 0 0; padding: .25rem .7rem; border-radius: 999px; background: rgba(31,143,78,.12); color: var(--kr-g7); font-size: .85rem; font-weight: 600; text-decoration: none; }
html body #imageInfos #Categories dd a:hover, html body #imageInfos #Tags dd a:hover { background: var(--kr-g6); color: #fff; text-decoration: none; }
/* Symbole (weiße Linien-Icons) */
html body #imageInfos #Author { --kr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
html body #imageInfos #datepost, html body #imageInfos #datecreate { --kr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); }
html body #imageInfos #Categories { --kr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h6l2 2h10v10H3z'/%3E%3C/svg%3E"); }
html body #imageInfos #Tags { --kr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E"); }
html body #imageInfos .imageInfo:not(#Author):not(#datepost):not(#datecreate):not(#Categories):not(#Tags) { --kr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }

/* Vorschaubilder davor/danach: am PC rund, auf Touch-Geräten weg (dort wird gewischt) */
html body #imageInfos .navThumbs { padding: 1rem 1.25rem 0; }
html body #imageInfos .navThumb img { border-radius: 8px; box-shadow: 0 4px 12px rgba(59,42,18,.2); }
@media (hover: none) and (pointer: coarse) { html body #imageInfos .navThumbs { display: none; } }

/* Wischen: Foto folgt dem Finger, senkrechtes Scrollen bleibt */
html body #theImage { position: relative; touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
/* sonst deutet der Browser einen Wisch nach rechts als „Zurück“ im Verlauf */
html:has(body#thePicturePage), html body#thePicturePage { overscroll-behavior-x: none; }
html body #theImage img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
html body .kr-wisch-hinweis { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); padding: .45rem 1rem; border-radius: 999px; background: rgba(7,42,25,.85); color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,.3); transition: opacity .6s; animation: kr-wisch 1.4s ease-in-out 2; }
html body .kr-wisch-hinweis.weg { opacity: 0; }
@keyframes kr-wisch { 0%, 100% { transform: translateX(-50%); } 30% { transform: translateX(calc(-50% - 14px)); } 70% { transform: translateX(calc(-50% + 14px)); } }

/* ---------- Symbol-Knöpfe (Sortieren, Diashow, Kalender, Vor/Zurück, Download …) ----------
   Am PC runde Knöpfe nebeneinander. Am Handy klappt Modus sie hinter „…“ auf, dort als Liste mit Text. */
html body #imageToolBar, html.wide body #imageToolBar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; height: auto; max-width: var(--kr-max); margin: .8rem auto 0; padding: 0 1.25rem; background: none; box-shadow: none; border: 0; box-sizing: border-box; }
html body #imageToolBar .actionButtonsWrapper { order: -1; float: none; }
html body #imageToolBar .navigationButtons, html body #imageToolBar .actionButtons { float: none; }
html body #imageToolBar .navigationButtons { display: flex; gap: .45rem; }
html body .categoryActions li { margin: 0; list-style: none; }

/* gemeinsamer Look der runden Knöpfe */
html body #imageToolBar .navigationButtons .pwg-button,
html body #albumActionsSwitcher, html body #imageActionsSwitch {
  place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; margin: 0; border-radius: 50%; background: #fff; color: var(--kr-g6); text-decoration: none; box-shadow: 0 4px 12px rgba(59,42,18,.16); transition: background .2s, color .2s, transform .2s, box-shadow .2s; cursor: pointer; }
html body #imageToolBar .navigationButtons .pwg-button { display: inline-grid; }
html body #imageToolBar .navigationButtons .pwg-button:hover, html body #albumActionsSwitcher:hover, html body #imageActionsSwitch:hover { background: var(--kr-g6); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,90,53,.3); }
html body .categoryActions .pwg-icon, html body #imageToolBar .pwg-icon, html body #albumActionsSwitcher .pwg-icon, html body #imageActionsSwitch .pwg-icon { font-size: 1.3rem; line-height: 1; color: inherit; margin: 0; }
html body .categoryActions .pwg-button:hover .pwg-icon, html body #imageToolBar .pwg-button:hover .pwg-icon, html body #albumActionsSwitcher:hover .pwg-icon, html body #imageActionsSwitch:hover .pwg-icon { color: inherit; }

@media (min-width: 641px) {
  html body .titrePage .categoryActions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; background: none; border: 0; box-shadow: none; padding: .2rem 0; }
  html body .titrePage .categoryActions .pwg-button { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; margin: 0; border-radius: 50%; background: #fff; color: var(--kr-g6); text-decoration: none; box-shadow: 0 4px 12px rgba(59,42,18,.16); transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
  html body .titrePage .categoryActions .pwg-button:hover, html body .titrePage .categoryActions .pwg-button:focus-visible { background: var(--kr-g6); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,90,53,.3); }
}
@media (min-width: 601px) {
  html body .actionButtonsWrapper .actionButtons { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; background: none; border: 0; box-shadow: none; padding: .2rem 0; }
  html body #imageToolBar .actionButtons .pwg-button { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; margin: 0; border-radius: 50%; background: #fff; color: var(--kr-g6); text-decoration: none; box-shadow: 0 4px 12px rgba(59,42,18,.16); transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
  html body #imageToolBar .actionButtons .pwg-button:hover, html body #imageToolBar .actionButtons .pwg-button:focus-visible { background: var(--kr-g6); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,90,53,.3); }
}
/* Handy: „…“-Knopf rund, aufgeklappte Liste als helle Karte */
@media (max-width: 640px) {
  html body #albumActionsSwitcher { display: grid; float: right; }
  html body #albumActionsSwitcher + .categoryActions { background: var(--kr-weiss); border-top: 3px solid var(--kr-gold); border-radius: 0 0 8px 8px; box-shadow: 0 14px 30px rgba(59,42,18,.25); opacity: 1; padding: .4rem; min-width: 14rem; }
  html body #albumActionsSwitcher + .categoryActions .pwg-button { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 6px; color: var(--kr-g6); text-decoration: none; }
  html body #albumActionsSwitcher + .categoryActions .pwg-button:hover { background: rgba(31,143,78,.1); }
  html body #albumActionsSwitcher + .categoryActions .pwg-button-text { font-weight: 600; color: var(--kr-text); margin: 0; }
}
@media (max-width: 600px) {
  html body #imageActionsSwitch { display: grid; float: none; }
  html body .actionButtonsWrapper .actionButtons { background: var(--kr-weiss); border-top: 3px solid var(--kr-gold); border-radius: 0 0 8px 8px; box-shadow: 0 14px 30px rgba(59,42,18,.25); opacity: 1; padding: .4rem; min-width: 14rem; }
  html body #imageToolBar .actionButtons .pwg-button { display: flex; align-items: center; gap: .7rem; width: auto; height: auto; padding: .65rem .8rem; border-radius: 6px; color: var(--kr-g6); }
  html body #imageToolBar .actionButtons .pwg-button:hover { background: rgba(31,143,78,.1); }
  html body #imageToolBar .actionButtons .pwg-button-text { font-weight: 600; color: var(--kr-text); margin: 0; }
}
/* Zähler neben dem Albumtitel */
html body .titrePage .badge, html body .titrePage .nb_items { background: var(--kr-gold-l); color: var(--kr-braun); border-radius: 999px; padding: .15rem .55rem; font-family: var(--kr-body); font-size: .75rem; font-weight: 700; vertical-align: middle; }

/* ---------- Formulare und Knöpfe ---------- */
html body input[type=text], html body input[type=password], html body input[type=email], html body select, html body textarea { background: #fff; color: var(--kr-text); border: 1.5px solid rgba(59,42,18,.3); border-radius: 4px; }
html body input:focus, html body textarea:focus, html body select:focus { background: #f2faf5; color: var(--kr-text); border-color: var(--kr-g5); outline: none; }
html body input[type=submit], html body input[type=button], html body input[type=reset], html body button { background: var(--kr-g6); background-image: none; color: #fff; border: 0; border-radius: 999px; padding: .55rem 1.2rem; font-family: var(--kr-body); font-weight: 700; letter-spacing: .04em; cursor: pointer; }
html body input[type=submit]:hover, html body input[type=button]:hover, html body button:hover { background: var(--kr-g5); color: #fff; }
html body .header_msgs { background: var(--kr-gold-l); color: var(--kr-braun); }
html body .infos { background-color: var(--kr-g6); color: #fff; }
html body .errors { background-color: #b23a2a; color: #fff; }

/* ---------- Footer (aus template/fuss.html) und Piwigo-Hinweis ---------- */
html body .kr-fuss { position: relative; isolation: isolate; margin-top: 3rem; padding: calc(var(--kr-s) + 2.5rem) 1.25rem 1.6rem; color: rgba(255,255,255,.88); font-size: .92rem; }
html body .kr-fuss::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--kr-g8); clip-path: polygon(0 var(--kr-s), 100% 0, 100% 100%, 0 100%); }
html body .kr-fuss-innen { max-width: var(--kr-max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 2rem; }
html body .kr-fuss h3 { font-family: var(--kr-body); font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--kr-gold-l); margin: 0 0 .8rem; }
html body .kr-fuss ul { list-style: none; margin: 0; padding: 0; }
html body .kr-fuss li { margin-bottom: .35rem; }
html body .kr-fuss a { color: #fff; text-decoration: none; }
html body .kr-fuss a:hover { color: var(--kr-gold-l); text-decoration: underline; }
html body .kr-fuss-marke img { width: 7rem; height: auto; margin-bottom: .8rem; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
html body .kr-fuss-marke p, html body .kr-fuss-text { font-size: .85rem; color: rgba(255,255,255,.78); margin: 0 0 .8rem; }
html body .kr-knopf { display: inline-block; background: var(--kr-gold-l); color: var(--kr-braun) !important; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none !important; }
html body .kr-knopf:hover { background: #fff; }
html body .kr-fuss-copy { max-width: var(--kr-max); margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .78rem; color: rgba(255,255,255,.55); }
/* Modus gibt #copyright width:100% plus Innenabstand, das erzeugte den waagrechten Scrollbalken */
html body #copyright { box-sizing: border-box; width: auto; max-width: 100%; }
html, html body { overflow-x: clip; }
html body #copyright { background: var(--kr-g9); color: rgba(255,255,255,.5); font-size: .72rem; padding: .7rem 1rem; margin: 0; text-align: center; border: 0; }
html body #copyright a { color: rgba(255,255,255,.7); }
@media (max-width: 800px) { html body .kr-fuss-innen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { html body .kr-fuss-innen { grid-template-columns: 1fr; } }

/* ---------- Ruhe für alle, die weniger Bewegung möchten ---------- */
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { transition: none !important; animation: none !important; }
  html body .albThumbs > li, html body .albThumbs > li:nth-child(n) { transform: none; }
}