<!-- Header -->
<!DOCTYPE html>
<html lang="en">

<head>
	<!-- CMS and Theme by IO200 (https://www.io200.com) -->
	<!-- Meta -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
	<meta name="mobile-web-app-capable" content="yes">
	<!-- Meta (SEO) -->
	<title> | Das Leben</title>	<meta name="robots" content="all">
	<!-- CSS -->
	<link rel="preload" href="/res/style/_base.css?v=2.24a" as="style"><link rel="stylesheet" href="/res/style/_base.css?v=2.24a" type="text/css" media="screen"><link rel="preload" href="/res/style/layout-fullwidthframed.css?v=2.24a" as="style"><link rel="stylesheet" href="/res/style/layout-fullwidthframed.css?v=2.24a" type="text/css" media="screen"><link rel="stylesheet" href="/res/style/font-karlabold.css?v=2.24a" type="text/css" media="screen"><link rel="stylesheet" href="/res/style/_flavors.css?v=2.24a" type="text/css" media="screen">			<style>/* =============================================================================
   mein-foto-album — Schmoni monochrome theme
   -----------------------------------------------------------------------------
   THIS FILE IS THE VERSIONED SOURCE FOR SETTINGS['CUSTOM_CSS'].

   It is NOT loaded by the CMS from disk. Paste its contents into the admin field
   "Custom CSS", which OutputRenderer::ThemeCustomCss() (:988-990) emits inline
   after every stylesheet link (templates/_header.php:27). That position is what
   makes these rules win against vendor CSS at equal specificity, and it is why
   they are never stale — unlike res/style/*, which is cache-busted only by
   ?v=SYSTEM_VERSION and therefore frozen for returning visitors for 10 days.

   Deliberately NOT storage/custom/custom.css: that filename is the all-or-nothing
   full-theme route (OutputRenderer :948-955) and would switch off the entire
   vendor cascade, meaning we would own layout, mode, font and flavors forever.

   Design decisions this encodes (Simon, 2026-08-05):
     · monochrome — no accent colour anywhere in the chrome; photos carry all colour
     · warm-neutral ground — CI tokens kept, not desaturated
     · light + dark via prefers-color-scheme
     · Schmoni Display for display sizes only, DM Sans for everything else
     · masonry kept crop-free, subtle motion

   VERIFIED AGAINST SOURCE, NOT RUN. This checkout has no config.php and no
   database (index.php:6), so the rules below were derived by reading
   res/style/_base.css, res/style/font-karlabold.css and res/style/mode-dark.css.
   They still need one pass on the live site.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Vendor dark-mode sheet, loaded only when the visitor prefers dark
   -----------------------------------------------------------------------------
   The CMS treats light/dark as a server-side theme axis, so it cannot react to
   the visitor's OS setting. The site runs on mode-light, which means ~90 hard-
   coded colours in _base.css assume a light ground — flipping only our own
   tokens would leave black text on a black page.

   res/style/mode-dark.css (10 KB, no @imports of its own) is exactly the sheet
   that repairs those hardcoded colours. Pulling it in conditionally gives us the
   vendor's own dark treatment, and our tokens below then override its choices.

   @import is legal here because it is the first rule of this stylesheet.
   NOTE: bump ?v= after a CMS update, or the browser may serve a 10-day-old copy
   (.htaccess sets max-age=864000 for .css).
   -------------------------------------------------------------------------- */
@import url("/res/style/mode-dark.css?v=2.24a") (prefers-color-scheme: dark);


/* -----------------------------------------------------------------------------
   2. Typefaces
   -----------------------------------------------------------------------------
   Served straight from /storage/custom/fonts/ — the .htaccess rewrite only fires
   when the request does not match a real file, and its woff2 rule already sets
   max-age=31536000.

   OFL-1.1 requires the licences to travel with the fonts; they sit next to the
   binaries as OFL-SchmoniDisplay.txt, FONTLOG-SchmoniDisplay.txt and
   OFL-DMSans.txt. Do not remove them.

   Both faces are variable (opsz + wght). Roman only — italics are left to the
   browser to synthesise, which keeps 260 KB off the page for a use case this
   site barely has.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Schmoni Display';
  src: url('/storage/custom/fonts/SchmoniDisplay-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/storage/custom/fonts/DMSans-Variable.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------------------------------------------------------
   3. Tokens
   -----------------------------------------------------------------------------
   Straight from Schmoni-Design-System/tokens/colors.css, minus the accent.
   --website-background is the vendor's own variable with 59 consumers; pointing
   it at --paper propagates the ground into nav dropdowns, the sticky header,
   modals and the action bar without touching any of them individually.
   -------------------------------------------------------------------------- */
:root {
  --paper:  #F8F7F4;
  --raise:  #FFFFFD;
  --ink:    #1F1B18;
  --muted:  #706861;
  --line:   #DCD8CF;

  --website-background: var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #0E0E0D;
    --raise:  #191817;
    --ink:    #F4F1EB;
    --muted:  #A09991;
    --line:   #3A3733;

    /* wins over mode-dark.css :5, which sets #121212 */
    --website-background: var(--paper);
  }
}


/* -----------------------------------------------------------------------------
   4. Base type
   -----------------------------------------------------------------------------
   font-karlabold.css:29 sets body{font-family:'Karla';font-size:16.5px}. Same
   specificity as ours, so source order decides and we win. Size is kept at
   16.5px on purpose — the vendor's em-based scale is calibrated to it.
   -------------------------------------------------------------------------- */
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  font-variation-settings: 'opsz' 14;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* mode-dark.css:6 sets body{color:#9f9f9f} — too dim next to photographs */
@media (prefers-color-scheme: dark) {
  body { color: var(--ink); }
}


/* -----------------------------------------------------------------------------
   5. Display type — Schmoni Display, and only where it belongs
   -----------------------------------------------------------------------------
   The Schmoni-Font project rule is explicit: display face for H1 / hero /
   wordmark, body and UI stay DM Sans. In practice on this site that means the
   wordmark and main h1 only. h2 lands around 20px, which is below the size where
   an optical-size-144 serif earns its keep, so it stays DM Sans.

   !important is used on the wordmark because font-karlabold.css nests its rules
   inside body.templatelayout-standard, giving them a class of specificity we
   would otherwise have to mirror — and mirroring it would silently break if the
   template layout ever changes.
   -------------------------------------------------------------------------- */
header span.website-title a,
header h1.website-title a {
  font-family: 'Schmoni Display', Georgia, serif !important;
  font-size: 1.45em !important;
  font-weight: 400 !important;
  font-variation-settings: 'opsz' 48, 'wght' 460;
  text-transform: none !important;
  letter-spacing: -0.012em !important;
  line-height: 1.05;
}

main h1 {
  font-family: 'Schmoni Display', Georgia, serif;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 400;
  font-variation-settings: 'opsz' 96, 'wght' 430;
  letter-spacing: -0.016em;
  line-height: 1.06;
}

main h2,
main h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.008em;
}


/* -----------------------------------------------------------------------------
   6. Monochrome chrome
   -----------------------------------------------------------------------------
   No hue anywhere. Link affordance, hover and focus are carried by weight,
   underline, opacity and outline instead — which also keeps the focus indicator
   working for anyone who cannot distinguish the colour we are not using.
   -------------------------------------------------------------------------- */
a { color: inherit; }

main a:not(.sitelink):not(.js-lightbox):not(.button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--line);
  transition: text-decoration-color .18s ease;
}
main a:not(.sitelink):not(.js-lightbox):not(.button):hover {
  text-decoration-color: var(--ink);
}

header nav,
footer {
  color: var(--muted);
}
header nav a:hover,
footer a:hover {
  color: var(--ink);
}

.button,
button.button,
a.button,
.button-primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 6px;
  font-weight: 600;
}
.button:hover,
button.button:hover,
a.button:hover,
.button-primary:hover {
  opacity: 0.86;
}

/* _base.css:5 kills the outline globally with :focus{outline:0}.
   Restore it for keyboard users — MyApp.mount.pageEventListener adds
   .keyboard-focus on focusin when the last interaction was a Tab press. */
:focus-visible,
.keyboard-focus {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   7. Gallery
   -----------------------------------------------------------------------------
   Layout, column count and spacing stay CMS settings (PHOTOGALLERY_LAYOUT,
   PHOTOGALLERY_NUMBERCOLS, PHOTOGALLERY_SPACINGFACTOR) — nothing here hardcodes
   them, so you keep changing them in the admin.

   Two invariants this must not break, both verified in _base.css:
     · img.photo ships visibility:hidden with data-src and no src; it is made
       visible by MyApp.utils.mountPhoto. Never style visibility here.
     · download protection injects pointer-events:none !important on img.photo,
       so every hover affordance is attached to the wrapper or the anchor.
   -------------------------------------------------------------------------- */

/* Motion: "dezent". Set the CMS hover effect to none so this is the only one. */
@media (hover: hover) {
  ul.gallery li a.sitelink div.photo-wrapper {
    transition: opacity .32s ease;
  }
  ul.gallery li a.sitelink:hover div.photo-wrapper {
    opacity: 0.88;
  }
}

/* Grid captions. Globally there are none — PHOTOGALLERY_PHOTOTITLE is null, so
   LinkedPhoto (:155-157) emits no span at all. This styles the one album that
   CustomOutputRenderer re-enables EXIF for. */
ul.gallery li span.info.info-title {
  display: block;
  margin-top: 0.55em;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.72em;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.012em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Album and set cards are hand-written inline in albums.php / set.php with
   class gallery-set — they are the one place the gallery renderer does not own. */
ul.gallery.gallery-set span.info.info-title {
  font-size: 0.82em;
  font-weight: 500;
  color: var(--ink);
}


/* -----------------------------------------------------------------------------
   8. Lightbox
   -----------------------------------------------------------------------------
   This is where the EXIF lives now (LIGHTBOX_DESCRIPTION = exif). _base.css:919
   and :920 hardcode #fff and #545454 for the glightbox caption; #545454 on a
   dark overlay is close to unreadable, so both are re-pointed.
   -------------------------------------------------------------------------- */
body:not(.glightbox-mobile) .gslide-description .gdesc-inner .gslide-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.95em;
  font-weight: 600;
  color: #F4F1EB;
  letter-spacing: -0.005em;
}
body:not(.glightbox-mobile) .gslide-description .gdesc-inner .gslide-desc {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.8em;
  color: #A09991;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}


/* -----------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}</style>		<!-- JS -->
	<script src="/res/script/MyApp.js?v=2.24a"></script>
                <script src="/res/lib/glightbox/glightbox.min.js?v=2.24a" defer></script>
                <link href="/res/lib/glightbox/glightbox.min.css?v=2.24a" type="text/css" rel="stylesheet">	<meta name="robots" content="noindex">	<!-- Further -->
			<link rel="sitemap" href="/sitemap.xml" type="application/xml">	<!-- Code Injection -->
	</head>

<body class="language- template-_password templatelayout-standard layout-fullwidthframed mode-light font-karlabold flavors-roundedborders flavors-slideeffect">

	<a href="#top" onclick="document.getElementById('top')?.focus()" class="skip-link">Skip to content</a>

	<div id="container">
			<!-- Header -->
			<header>
				<div class="title-container">
					<span class="website-title"><a href="https://photo.mein-foto-album.ch" title="Das Leben" class="website-title-link">Das Leben</a></span>
									</div>
				<nav>
										<ul class="primary level-0"></ul>				</nav>
			</header>

			<!-- Content -->
			<main id="top" class="template-_password" tabindex="-1">

<h1 class="desktop mobile">Password required</h1>
<form class="form-inline" method="post">
    <input type="password" name="password" placeholder="Enter password" autocomplete="new-password">
    <button type="submit" class="button button-primary" name="path_protection">Submit</button>

    </form>

<!-- Footer -->
</main>

<!-- Footer -->
<footer>
			<p class="footer-info no-nav"><a href="https://www.io200.com?build-your-own" class="footer-link" title="IO200 - Professional Photo Websites for Large Image Collections" target="_blank">Powered by IO200</a></p></footer>

</div>

<!-- CMS and Theme by IO200 (https://www.io200.com) -->
<script>
                    window.MyApp.settings.lightboxZoomable = false
                    window.MyApp.lang.general = { textClose: `Close` }
                    window.MyApp.lang.pathaccess = { textLogout: `Logout` }
                    window.MyApp.settings.mounts.push('downloadProtection')
                    document.addEventListener('DOMContentLoaded', () => { window.MyApp.init() })
        	    </script>
</body>

</html>