:root{
  --bg:#faf8f4;
  --surface:#fff;
  --text:#24211f;
  --muted:#77716b;
  --line:#ddd8d2;
  --max:1360px;
  --content:1220px;
  --heading:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

.site-header{
  height:72px;
  border-bottom:1px solid var(--line);
  background:rgba(250,248,244,.97);
}
.header-inner{
  max-width:var(--max);
  height:100%;
  margin:0 auto;
  padding:0 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-mark{
  width:36px;height:36px;
  border:1px solid #4c4844;
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--heading);
  font-size:13px;
}
.brand-copy strong{
  display:block;
  font-size:11px;
  letter-spacing:.27em;
  font-weight:500;
}
.brand-copy span{
  display:block;
  margin-top:3px;
  font-size:8px;
  letter-spacing:.12em;
  color:#6f6963;
  text-transform:uppercase;
}
.nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nav>a,.dropdown-toggle{
  background:none;
  border:0;
  padding:8px 0;
  color:#3a3632;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}
.nav>a:hover,.dropdown-toggle:hover,.nav .active{
  border-bottom:1px solid #5b554f;
}
.dropdown{position:relative}
.dropdown-menu{
  position:absolute;
  top:100%;
  right:0;
  width:185px;
  padding:10px 0;
  background:#fff;
  border:1px solid var(--line);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:.18s ease;
  z-index:20;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.dropdown-menu a{
  display:block;
  padding:9px 14px;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:none;
}
.dropdown-menu a:hover{background:#f5f2ee}
.menu-button{display:none}

main{min-height:70vh}

/* HERO */
.hero-wrap{
  max-width:var(--content);
  margin:0 auto;
  padding:30px 56px 0;
}
.hero{
  width:100%;
  height:min(60vh,500px);
  min-height:360px;
  overflow:hidden;
  background:#ece9e4;
}
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-caption{display:none}

.hero-title{
  max-width:var(--content);
  margin:0 auto;
  padding:14px 56px 34px;
  display:flex;
  justify-content:flex-end;
}
.hero-title h1{
  margin:0;
  max-width:720px;
  text-align:right;
  font-family:var(--heading);
  font-size:clamp(30px,3.25vw,48px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.045em;
}

/* AUSWAHL HEADER */
.selection{
  max-width:var(--content);
  margin:0 auto;
  padding:0 56px 64px;
}
.selection-head{
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
  margin-bottom:0;
}
.selection-head h2{
  margin:0;
  font-family:var(--heading);
  font-size:30px;
  font-weight:500;
  letter-spacing:-.035em;
}
/* ALTERNATING / VERSETZTE CATEGORY ROWS */
.category-list{
  border-bottom:0;
}

.category-row{
  display:grid;
  grid-template-columns:minmax(0,61%) minmax(210px,1fr);
  column-gap:14%;
  align-items:stretch;
  min-height:245px;
  padding:31px 0 34px;
  border-top:1px solid var(--line);
}

.category-row:first-child{border-top:0}

.category-row.reverse{
  grid-template-columns:minmax(210px,1fr) minmax(0,61%);
}

/* Links/Rechts wirklich abwechseln */
.category-row.reverse .category-copy{grid-column:1}
.category-row.reverse .category-image{grid-column:2}

/* Bild bleibt oben im jeweiligen Block */
.category-image{
  overflow:hidden;
  background:#ece9e4;
  align-self:start;
}
.category-image img{
  width:100%;
  aspect-ratio:1.70/1;
  object-fit:cover;
  transition:transform .35s ease;
}
.category-row:hover .category-image img{transform:scale(1.01)}

/* Schrift wie in der Referenz deutlich tiefer neben dem Bild */
.category-copy{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 4px 0 4px;
}

.category-copy h3{
  margin:0;
  font-family:var(--heading);
  font-size:38px;
  line-height:1.02;
  font-weight:500;
  letter-spacing:-.04em;
}

.category-copy .category-tag{
  margin-top:16px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#56504b;
}

.category-copy p{
  margin:7px 0 0;
  max-width:340px;
  font-size:14px;
  line-height:1.5;
  color:#766f69;
}

/* Wichtig: diese Regel darf display:grid NICHT überschreiben */
.category-link{
  color:inherit;
  text-decoration:none;
}

/* Inner pages */

.page-head{
  max-width:1220px;
  margin:0 auto;
  padding:48px 56px 24px;
}
.page-head .eyebrow{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.page-head h1{
  margin:0;
  font-family:var(--heading);
  font-size:clamp(34px,3.2vw,46px);
  line-height:1.05;
  font-weight:500;
  letter-spacing:-.035em;
}
.page-head p{
  display:none;
}

/* Galerien: zwei ruhige, natürliche Spalten statt erzwungenem Raster */
.gallery{
  max-width:1220px;
  margin:0 auto;
  padding:8px 56px 84px;
  columns:2;
  column-gap:34px;
}
.photo-card{
  break-inside:avoid;
  margin:0 0 38px;
}
.photo-card figure{
  margin:0;
}
.photo-card img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:#ece9e4;
}
.photo-card figcaption{
  padding-top:10px;
}
.photo-title{
  display:block;
  font-family:var(--heading);
  font-size:18px;
  line-height:1.28;
  font-weight:500;
  letter-spacing:-.015em;
}
.photo-place{
  display:block;
  margin-top:4px;
  font-family:var(--body);
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}


.text-page{
  max-width:820px;
  margin:0 auto;
  padding:64px 36px 90px;
}
.text-page h1{
  font-family:var(--heading);
  font-weight:400;
  font-size:48px;
}
.text-page p{
  font-size:14px;
  line-height:1.75;
  color:#57514c;
}
.placeholder-note{
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:12px;
  color:#77716b;
}

.contact-grid{
  max-width:980px;
  margin:0 auto;
  padding:64px 36px 90px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:60px;
}
.contact-copy h1{
  font-family:var(--heading);
  font-size:48px;
  font-weight:400;
}
.contact-copy p{
  font-size:13px;
  line-height:1.7;
  color:#6d665f;
}
.contact-form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{
  font-size:8px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.field input,.field textarea{
  border:1px solid #d8d2cc;
  background:#fff;
  padding:10px 11px;
}
.field textarea{min-height:160px;resize:vertical}
.form-button{
  justify-self:start;
  border:1px solid #4f4943;
  background:transparent;
  padding:9px 14px;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.form-status{font-size:11px;color:#77716b}

.site-footer{
  border-top:0;
  padding:26px 48px 34px;
}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6e6761;
}
.footer-links{display:flex;gap:18px}

@media (max-width:900px){
  .header-inner{padding:0 24px}
  .menu-button{
    display:block;
    background:none;
    border:1px solid var(--line);
    padding:8px 10px;
    font-size:9px;
    text-transform:uppercase;
  }
  .nav{
    position:absolute;
    top:72px;
    left:0;right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#faf8f4;
    border-bottom:1px solid var(--line);
    padding:12px 24px 18px;
    z-index:30;
  }
  .nav.mobile-open{display:flex}
  .dropdown-menu{
    position:static;
    width:100%;
    display:none;
    opacity:1;
    transform:none;
    pointer-events:auto;
    border:0;
    padding-left:10px;
    background:transparent;
  }
  .dropdown.open .dropdown-menu{display:block}
  .hero-wrap,.hero-title,.selection{padding-left:24px;padding-right:24px}
  .hero-wrap{padding-top:34px}
  .hero-title{padding-bottom:40px}
  .category-row,
  .category-row.reverse{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:18px;
    min-height:auto;
    padding:30px 0;
  }
  .category-row.reverse .category-copy,
  .category-row.reverse .category-image{
    grid-column:1;
  }
  .category-row.reverse .category-image{grid-row:1}
  .category-row.reverse .category-copy{grid-row:2}
  .category-copy{
    align-self:auto;
    display:block;
    padding:0;
  }
  .gallery{columns:1;padding-left:24px;padding-right:24px}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:560px){
  .site-header{height:64px}
  .nav{top:64px}
  .brand-copy strong{font-size:10px}
  .brand-copy span{font-size:7px}
  .brand-mark{width:36px;height:36px}
  .hero-wrap{padding-top:20px}
  .hero{aspect-ratio:1.25/1}
  .hero-title{padding-top:13px;padding-bottom:34px}
  .hero-title h1{font-size:36px}
  .selection-head h2{font-size:30px}
  .category-copy h3{font-size:29px}
  .selection{padding-bottom:60px}
}


/* Compact desktop stage: designed especially for typical 15–24 inch monitors */
@media (min-width:901px) and (max-height:900px){
  .hero-wrap{padding-top:24px}
  .hero{height:min(58vh,460px);min-height:330px}
  .hero-title{padding-top:12px;padding-bottom:28px}
  .hero-title h1{font-size:clamp(29px,3vw,44px)}
  .selection-head h2{font-size:29px}
  .category-row{min-height:240px;padding:30px 0}
  .category-copy h3{font-size:36px}
}

@media (min-width:901px) and (max-height:760px){
  .hero{height:min(55vh,400px);min-height:300px}
  .hero-wrap{padding-top:20px}
  .hero-title{padding-bottom:22px}
  .category-row{padding:26px 0}
}


@media (max-width:900px){
  .category-copy h3{font-size:34px}
  .category-copy .category-tag{font-size:10px}
  .category-copy p{font-size:12px;max-width:320px}
}

@media (max-width:560px){
  .category-copy h3{font-size:31px}
}


/* Prepared for final horizontal LICHTMOMENTE logo */
.brand-logo-final{
  display:block;
  width:auto;
  height:53px;
  max-width:285px;
  object-fit:contain;
}
@media (max-width:560px){
  .brand-logo-final{height:40px;max-width:225px}
}

/* The provisional LM circle/text is no longer used; the actual logo image is used in the header. */


/* Feinschliff Startseite: Rubrikbeschriftungen symmetrisch an den Außenkanten */
@media (min-width:901px){
  .category-row:not(.reverse) .category-copy{
    text-align:right;
    align-items:flex-end;
    padding-left:0;
    padding-right:0;
  }

  .category-row:not(.reverse) .category-copy p{
    margin-left:auto;
    margin-right:0;
  }

  .category-row.reverse .category-copy{
    text-align:left;
    align-items:flex-start;
    padding-left:0;
    padding-right:0;
  }

  .category-row.reverse .category-copy p{
    margin-left:0;
    margin-right:auto;
  }
}


/* Entwurf 10: Beschriftungen näher an den Bildern */
@media (min-width:901px){
  .category-row{
    column-gap:34px;
  }

  /* Bild links, Text rechts: Text an die linke Kante seiner Spalte */
  .category-row:not(.reverse) .category-copy{
    text-align:left;
    align-items:flex-start;
    padding-left:0;
    padding-right:0;
  }

  .category-row:not(.reverse) .category-copy p{
    margin-left:0;
    margin-right:auto;
  }

  /* Bild rechts, Text links: Text an die rechte Kante seiner Spalte */
  .category-row.reverse .category-copy{
    text-align:right;
    align-items:flex-end;
    padding-left:0;
    padding-right:0;
  }

  .category-row.reverse .category-copy p{
    margin-left:auto;
    margin-right:0;
  }
}


/* Entwurf 11: Textfeinschliff Rubriken */
@media (min-width:901px){
  .category-copy p{
    max-width:340px;
    line-height:1.45;
  }
}


/* Entwurf 13: echtes Hero-Bild */
@media (min-width:901px){
  .hero{
    height:auto;
    max-height:none;
    min-height:0;
    overflow:hidden;
  }

  .hero img{
    width:100%;
    height:auto;
    max-height:58vh;
    object-fit:contain;
    object-position:center center;
    margin:0 auto;
  }
}

/* Auf flacheren Desktop-Fenstern bleibt der Einstieg kompakt */
@media (min-width:901px) and (max-height:760px){
  .hero img{
    max-height:55vh;
  }
}


/* Entwurf 18: Hero vollflächig + ruhige Küste */
@media (min-width:901px){
  .hero{
    height:min(58vh,460px);
    min-height:330px;
    max-height:460px;
    overflow:hidden;
    background:transparent;
  }

  .hero img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
    object-position:center center;
    margin:0;
  }
}

@media (min-width:901px) and (max-height:760px){
  .hero{
    height:min(55vh,400px);
    min-height:300px;
  }
  .hero img{
    max-height:none;
  }
}


/* Entwurf 20: bessere Lesbarkeit der Rubrik-Untertexte */
@media (min-width:901px){
  .category-copy .category-tag{
    font-size:12px;
  }
  .category-copy p{
    font-size:14px;
    line-height:1.5;
  }
}

@media (max-width:900px){
  .category-copy .category-tag{
    font-size:11px;
  }
  .category-copy p{
    font-size:13px;
    line-height:1.5;
  }
}


/* Entwurf 21: reduzierte Rubrikbeschriftung ohne Zwischenzeile */
.category-copy h3 + p{
  margin-top:12px;
}


/* Entwurf 22: Logo besser lesbar */
@media (min-width:901px){
  .site-header{
    height:72px;
  }
  .brand-logo-final{
    height:53px;
    max-width:285px;
  }
}


/* Entwurf 23: Galerieseiten */
@media (max-width:900px){
  .page-head{
    padding:40px 24px 22px;
  }
  .gallery{
    columns:1;
    padding:8px 24px 64px;
  }
  .photo-card{
    margin-bottom:32px;
  }
}

@media (max-width:560px){
  .page-head{
    padding-top:34px;
  }
  .page-head h1{
    font-size:32px;
  }
  .photo-title{
    font-size:17px;
  }
  .photo-place{
    font-size:12px;
  }
}


/* Entwurf 24: kuratierte Küste-&-Weite-Vorschau */
.curated-gallery{
  columns:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;
  row-gap:40px;
}
.curated-gallery .photo-card{
  margin:0;
  break-inside:auto;
}
.curated-gallery .photo-card img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
}
.curated-gallery .final-card{
  grid-column:1 / -1;
  width:calc(50% - 17px);
  justify-self:center;
}

@media (max-width:900px){
  .curated-gallery{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
  }
  .curated-gallery .final-card{
    grid-column:auto;
    width:100%;
  }
}


/* Entwurf 26: paarweise Unterkante + zweite Reihe getauscht */
@media (min-width:901px){
  .curated-gallery{
    align-items:end;
  }
  .curated-gallery .photo-card{
    align-self:end;
  }
  .curated-gallery .photo-card figcaption{
    box-sizing:border-box;
    height:84px;
  }
}

@media (max-width:900px){
  .curated-gallery .photo-card figcaption{
    height:auto;
  }
}


/* Entwurf 28: kontrolliert unregelmäßige Galerie mit Hover + Lightbox */
.gallery-head{
  padding-bottom:24px;
}

.mosaic-gallery{
  max-width:1220px;
  margin:0 auto;
  padding:0 56px 84px;
}

.mosaic-row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:6px;
  margin-bottom:6px;
  align-items:end;
}

.mosaic-item{
  position:relative;
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
}

.mosaic-item.span-5{grid-column:span 5}
.mosaic-item.span-6{grid-column:span 6}
.mosaic-item.span-7{grid-column:span 7}
.mosaic-item.span-12{grid-column:span 12}

.mosaic-item img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.mosaic-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:28px 18px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,0));
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}

.mosaic-item:hover .mosaic-overlay,
.mosaic-item:focus-visible .mosaic-overlay{
  opacity:1;
  transform:translateY(0);
}

.mosaic-title{
  display:block;
  font-family:var(--heading);
  font-size:16px;
  line-height:1.25;
  font-weight:500;
}

.mosaic-place{
  display:block;
  margin-top:3px;
  font-family:var(--body);
  font-size:12px;
  line-height:1.3;
  opacity:.88;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,15,15,.94);
  padding:42px 72px 34px;
}

.lightbox.is-open{
  display:flex;
}

.lightbox-figure{
  margin:0;
  max-width:min(92vw,1500px);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.lightbox-image{
  max-width:100%;
  max-height:78vh;
  width:auto;
  height:auto;
  object-fit:contain;
}

.lightbox-caption{
  width:100%;
  padding-top:12px;
  color:#fff;
}

.lightbox-title{
  display:block;
  font-family:var(--heading);
  font-size:18px;
  line-height:1.3;
  font-weight:500;
}

.lightbox-place{
  display:block;
  margin-top:4px;
  font-family:var(--body);
  font-size:13px;
  color:rgba(255,255,255,.72);
}

.lightbox-close,
.lightbox-nav{
  position:absolute;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

.lightbox-close{
  top:18px;
  right:24px;
  font-size:34px;
  line-height:1;
}

.lightbox-nav{
  top:50%;
  transform:translateY(-50%);
  font-size:54px;
  line-height:1;
  opacity:.72;
}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-nav:hover,.lightbox-close:hover{opacity:1}

body.lightbox-open{overflow:hidden}

@media (max-width:900px){
  .mosaic-gallery{
    padding:0 24px 64px;
  }
  .mosaic-row{
    grid-template-columns:1fr;
    gap:6px;
    margin-bottom:6px;
  }
  .mosaic-item.span-5,
  .mosaic-item.span-6,
  .mosaic-item.span-7,
  .mosaic-item.span-12{
    grid-column:auto;
  }
  .mosaic-overlay{
    opacity:1;
    transform:none;
    padding:34px 14px 12px;
  }
  .mosaic-title{font-size:15px}
  .mosaic-place{font-size:12px}
  .lightbox{padding:42px 18px 24px}
  .lightbox-nav{font-size:40px}
  .lightbox-prev{left:6px}
  .lightbox-next{right:6px}
}


/* Entwurf 29: Editorial Grid ohne Leerflächen */
.editorial-gallery{
  max-width:1220px;
  margin:0 auto;
  padding:0 56px 84px;
}

.editorial-row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:5px;
  margin-bottom:5px;
  height:var(--row-h);
}

.editorial-item{
  position:relative;
  overflow:hidden;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  background:#ece9e4;
  cursor:pointer;
}

.editorial-full .editorial-item{
  grid-column:1 / -1;
}

.editorial-span-4{grid-column:span 4}
.editorial-span-5{grid-column:span 5}
.editorial-span-6{grid-column:span 6}
.editorial-span-7{grid-column:span 7}

.editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos,center center);
  display:block;
  transition:transform .28s ease;
}

.editorial-item:hover img{
  transform:scale(1.012);
}

.editorial-item .mosaic-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:34px 18px 15px;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));
  color:#fff;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.editorial-item:hover .mosaic-overlay,
.editorial-item:focus-visible .mosaic-overlay{
  opacity:1;
  transform:none;
}

.editorial-item .mosaic-title{
  display:block;
  font-family:var(--heading);
  font-size:16px;
  line-height:1.25;
  font-weight:500;
}

.editorial-item .mosaic-place{
  display:block;
  margin-top:3px;
  font-family:var(--body);
  font-size:12px;
  line-height:1.3;
  opacity:.88;
}

/* vorbereitet für spätere Hochformat-Kompositionen:
   ein Hochformat kann zwei Zeilen hoch stehen, daneben zwei Querformate */
.editorial-portrait-stack{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:5px;
}
.editorial-portrait-stack .portrait-tall{
  grid-row:span 2;
}

@media (max-width:900px){
  .editorial-gallery{
    padding:0 24px 64px;
  }
  .editorial-row{
    display:grid;
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
    margin-bottom:5px;
  }
  .editorial-item,
  .editorial-span-4,
  .editorial-span-5,
  .editorial-span-6,
  .editorial-span-7{
    grid-column:auto;
    height:auto;
    aspect-ratio:16/10;
  }
  .editorial-full .editorial-item{
    grid-column:auto;
  }
  .editorial-item .mosaic-overlay{
    opacity:1;
    transform:none;
    padding:34px 14px 12px;
  }
}


/* Entwurf 48: Header beim Scrollen ausblenden und bei Aufwärtsbewegung wieder zeigen */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  transition:transform .28s ease;
  will-change:transform;
}
.site-header.header-hidden{
  transform:translateY(-100%);
}

@media (prefers-reduced-motion: reduce){
  .site-header{
    transition:none;
  }
}


/* Entwurf 51: formatgerechte Reihen für Hochformat + Querformat.
   Die Spaltenbreiten entsprechen den Original-Seitenverhältnissen,
   dadurch bleibt jedes Bild vollständig sichtbar. */
.editorial-natural-row{
  display:grid;
  gap:5px;
  margin-bottom:5px;
  align-items:start;
}
.editorial-natural-row .editorial-item{
  height:auto;
  aspect-ratio:var(--ratio);
}
.editorial-natural-row .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .editorial-natural-row{
    grid-template-columns:1fr !important;
  }
  .editorial-natural-row .editorial-item{
    aspect-ratio:var(--ratio);
  }
}


/* Entwurf 52: kompakter Stadt-Block aus zwei Hochformaten außen
   und zwei Querformaten übereinander in der Mitte.
   Proportionen sind aus den Originalformaten berechnet, daher bleiben
   alle vier Bilder ohne Beschnitt vollständig sichtbar. */
.city-quad-block{
  display:grid;
  grid-template-columns:394.864fr 373.830fr 329.306fr;
  grid-template-rows:247.289fr 264.111fr;
  column-gap:.451264%;
  row-gap:.451264%;
  aspect-ratio:1108 / 516.4;
  margin-bottom:5px;
}
.city-quad-block .editorial-item{
  width:100%;
  height:100%;
}
.city-quad-block .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.city-quad-sprinkenhof{
  grid-column:1;
  grid-row:1 / span 2;
}
.city-quad-oluf{
  grid-column:2;
  grid-row:1;
}
.city-quad-elphi{
  grid-column:2;
  grid-row:2;
}
.city-quad-ubahn{
  grid-column:3;
  grid-row:1 / span 2;
}

@media (max-width:900px){
  .city-quad-block{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:5px;
    aspect-ratio:auto;
  }
  .city-quad-block .editorial-item{
    grid-column:auto;
    grid-row:auto;
    height:auto;
  }
  .city-quad-sprinkenhof,
  .city-quad-ubahn{
    aspect-ratio:auto;
  }
  .city-quad-sprinkenhof img,
  .city-quad-ubahn img,
  .city-quad-oluf img,
  .city-quad-elphi img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 53: bewusster Höhenbruch nach dem großen Viererblock.
   Nur 280px hoch. Die Reihe ist leicht eingerückt, damit die beiden
   Hochformate nicht unnötig stark beschnitten werden. */
.city-break-row{
  display:grid;
  grid-template-columns:23% 54% 23%;
  gap:5px;
  width:83.333%;
  height:280px;
  margin:5px auto 5px;
}
.city-break-row .editorial-item{
  width:100%;
  height:100%;
}
.city-break-row .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .city-break-row{
    width:100%;
    height:auto;
    grid-template-columns:1fr;
    gap:5px;
  }
  .city-break-row .editorial-item{
    height:auto;
  }
  .city-break-row .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 54: bewusster kompakter Rhythmusbruch.
   Ein Hochformat links, zwei Querformate rechts übereinander.
   Die Desktop-Maße sind aus den Original-Seitenverhältnissen berechnet,
   damit alle drei Bilder vollständig sichtbar bleiben. */
.city-stack-break{
  display:grid;
  grid-template-columns:var(--left-w) var(--right-w);
  gap:5px;
  width:min(var(--stack-w), 100%);
  height:var(--stack-h);
  margin:5px auto;
}
.city-stack-break .editorial-item{
  width:100%;
  height:100%;
}
.city-stack-break .editorial-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  background:#f4f4f2;
}
.city-stack-portrait{
  grid-column:1;
}
.city-stack-right{
  grid-column:2;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:5px;
  min-width:0;
  min-height:0;
}
.city-stack-right .editorial-item{
  min-width:0;
  min-height:0;
}

@media (max-width:900px){
  .city-stack-break{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    height:auto;
    gap:5px;
  }
  .city-stack-portrait,
  .city-stack-right{
    grid-column:auto;
  }
  .city-stack-right{
    grid-template-rows:auto;
  }
  .city-stack-break .editorial-item{
    height:auto;
  }
  .city-stack-break .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
    background:transparent;
  }
}


/* Entwurf 55: Fünferblock über die volle Galeriebreite.
   Zwei Hochformate über volle Höhe, rechts drei Querformate übereinander.
   Raster basiert auf den Original-Seitenverhältnissen. */
.city-five-block{
  display:grid;
  grid-template-columns:var(--col-a) var(--col-b) var(--col-c);
  gap:5px;
  width:100%;
  aspect-ratio:var(--city-five-aspect);
  margin:5px 0;
  min-height:0;
}
.city-five-block .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.city-five-block .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.city-five-flensburg{
  grid-column:1;
  grid-row:1;
}
.city-five-glasfoyer{
  grid-column:2;
  grid-row:1;
}
.city-five-right{
  grid-column:3;
  grid-row:1;
  display:grid;
  grid-template-rows:var(--row-a) var(--row-b) var(--row-c);
  gap:5px;
  min-width:0;
  min-height:0;
}

@media (max-width:900px){
  .city-five-block{
    grid-template-columns:1fr;
    aspect-ratio:auto;
    gap:5px;
  }
  .city-five-flensburg,
  .city-five-glasfoyer,
  .city-five-right{
    grid-column:auto;
    grid-row:auto;
  }
  .city-five-right{
    grid-template-rows:auto;
  }
  .city-five-block .editorial-item{
    height:auto;
  }
  .city-five-block .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 56: klarer Dreierblock als bewusster Höhenbruch.
   Volle Galeriebreite, aber deutlich flacher als der vorausgehende Viererblock. */
.city-three-break{
  display:grid;
  grid-template-columns:21fr 40fr 39fr;
  gap:5px;
  width:100%;
  height:325px;
  margin:5px 0;
}
.city-three-break .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.city-three-break .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}
.city-three-portrait img{
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .city-three-break{
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
  }
  .city-three-break .editorial-item{
    height:auto;
  }
  .city-three-break .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 59: mittlere Dreierreihe nach dem flachen Dreierblock.
   Zwei Querformate außen, Hochformat mittig, volle Galeriebreite. */
.city-three-medium{
  display:grid;
  grid-template-columns:40fr 22fr 38fr;
  gap:5px;
  width:100%;
  height:310px;
  margin:5px 0;
}
.city-three-medium .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.city-three-medium .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .city-three-medium{
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
  }
  .city-three-medium .editorial-item{
    height:auto;
  }
  .city-three-medium .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 60: Portrait – Querformat – Portrait.
   Bewusst andere Gewichtung als die beiden vorherigen Dreierreihen. */
.city-portrait-landscape-portrait{
  display:grid;
  grid-template-columns:24fr 52fr 24fr;
  gap:5px;
  width:100%;
  height:345px;
  margin:5px 0;
}
.city-portrait-landscape-portrait .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.city-portrait-landscape-portrait .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .city-portrait-landscape-portrait{
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
  }
  .city-portrait-landscape-portrait .editorial-item{
    height:auto;
  }
  .city-portrait-landscape-portrait .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 64: Glücksburg – erster Testblock.
   Ruhiger als Stadt & Architektur, aber weiterhin editorial und vollbreit. */
.glueck-start-grid{
  display:grid;
  grid-template-columns:31fr 35fr 34fr;
  grid-template-rows:265px 305px;
  gap:5px;
  width:100%;
  margin-bottom:5px;
}
.glueck-start-grid .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.glueck-start-grid .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}
.glueck-nebel{
  grid-column:1;
  grid-row:1 / span 2;
}
.glueck-blau{
  grid-column:2 / span 2;
  grid-row:1;
}
.glueck-seebruecke{
  grid-column:2;
  grid-row:2;
}
.glueck-masten{
  grid-column:3;
  grid-row:2;
}

@media (max-width:900px){
  .glueck-start-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:5px;
  }
  .glueck-nebel,
  .glueck-blau,
  .glueck-seebruecke,
  .glueck-masten{
    grid-column:auto;
    grid-row:auto;
  }
  .glueck-start-grid .editorial-item{
    height:auto;
  }
  .glueck-start-grid .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 65: Holnis als ruhiger, breiter Übergang nach dem ersten Glücksburg-Block. */
.glueck-wide-break{
  width:100%;
  height:255px;
  margin:5px 0;
}
.glueck-wide-break .editorial-item{
  width:100%;
  height:100%;
}
.glueck-wide-break .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .glueck-wide-break{
    height:auto;
  }
  .glueck-wide-break .editorial-item{
    height:auto;
  }
  .glueck-wide-break .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 68: Glücksburg – zweiter Bildabschnitt.
   Oben Wald/Winter, darunter Küste. Zwei unterschiedliche Höhen
   statt eines zu dichten Viererblocks. */
.glueck-forest-row{
  display:grid;
  grid-template-columns:72fr 28fr;
  gap:5px;
  width:100%;
  height:440px;
  margin:5px 0;
}
.glueck-coast-row{
  display:grid;
  grid-template-columns:48fr 52fr;
  gap:5px;
  width:100%;
  height:290px;
  margin:5px 0;
}
.glueck-forest-row .editorial-item,
.glueck-coast-row .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.glueck-forest-row .editorial-item img,
.glueck-coast-row .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .glueck-forest-row,
  .glueck-coast-row{
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
  }
  .glueck-forest-row .editorial-item,
  .glueck-coast-row .editorial-item{
    height:auto;
  }
  .glueck-forest-row .editorial-item img,
  .glueck-coast-row .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 69: Strandkorbmotiv als breiter Ruhepunkt unter dem zweiten Glücksburg-Abschnitt. */
.glueck-strand-wide{
  width:100%;
  aspect-ratio:2.652850 / 1;
  height:auto;
  margin:5px 0;
}
.glueck-strand-wide .editorial-item{
  width:100%;
  height:100%;
}
.glueck-strand-wide .editorial-item img{
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center center;
}

@media (max-width:900px){
  .glueck-strand-wide{
    height:auto;
  }
  .glueck-strand-wide .editorial-item{
    height:auto;
  }
  .glueck-strand-wide .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 75: drei zusätzliche Glücksburg-Motive als flache Schlussreihe. */
.glueck-final-triple{
  display:grid;
  grid-template-columns:34fr 33fr 33fr;
  gap:5px;
  width:100%;
  height:305px;
  margin:5px 0;
}
.glueck-final-triple .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.glueck-final-triple .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .glueck-final-triple{
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
  }
  .glueck-final-triple .editorial-item{
    height:auto;
  }
  .glueck-final-triple .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 81: Über mich und Kontakt auf einer gemeinsamen Seite */
.about-page{
  padding-bottom:58px;
}
.contact-section{
  border-top:1px solid var(--line);
  padding-top:58px;
  scroll-margin-top:92px;
}
.contact-section .contact-copy h2{
  margin:0 0 18px;
  font-family:var(--heading);
  font-size:48px;
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.03em;
}

@media (max-width:900px){
  .about-page{
    padding-bottom:48px;
  }
  .contact-section{
    padding-top:48px;
    scroll-margin-top:76px;
  }
  .contact-section .contact-copy h2{
    font-size:40px;
  }
}


/* Entwurf 82: Unterwegs – erster Testbereich */
.unterwegs-start-grid{
  display:grid;
  grid-template-columns:31fr 34fr 35fr;
  grid-template-rows:250px 250px;
  gap:5px;
  width:100%;
  margin-bottom:5px;
}
.unterwegs-start-grid .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.unterwegs-start-grid .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}
.unterwegs-gardasee{
  grid-column:1;
  grid-row:1 / span 2;
}
.unterwegs-norwegen{
  grid-column:2 / span 2;
  grid-row:1;
}
.unterwegs-huette{
  grid-column:2;
  grid-row:2;
}
.unterwegs-toskana{
  grid-column:3;
  grid-row:2;
}
.unterwegs-florenz-wide{
  width:100%;
  height:245px;
  margin:5px 0;
}
.unterwegs-florenz-wide .editorial-item{
  width:100%;
  height:100%;
}
.unterwegs-florenz-wide .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .unterwegs-start-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:5px;
  }
  .unterwegs-gardasee,
  .unterwegs-norwegen,
  .unterwegs-huette,
  .unterwegs-toskana{
    grid-column:auto;
    grid-row:auto;
  }
  .unterwegs-start-grid .editorial-item,
  .unterwegs-florenz-wide,
  .unterwegs-florenz-wide .editorial-item{
    height:auto;
  }
  .unterwegs-start-grid .editorial-item img,
  .unterwegs-florenz-wide .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 83: Unterwegs ohne lange Querstreifen.
   Ein Hochformat links, vier kompakte Querformate rechts im 2x2-Raster. */
.unterwegs-mosaic-five{
  display:grid;
  grid-template-columns:31fr 34fr 35fr;
  grid-template-rows:250px 250px;
  gap:5px;
  width:100%;
  margin-bottom:5px;
}
.unterwegs-mosaic-five .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.unterwegs-mosaic-five .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}
.unterwegs-mosaic-five .unterwegs-gardasee{
  grid-column:1;
  grid-row:1 / span 2;
}
.unterwegs-mosaic-five .unterwegs-see{
  grid-column:2;
  grid-row:1;
}
.unterwegs-mosaic-five .unterwegs-huette{
  grid-column:3;
  grid-row:1;
}
.unterwegs-mosaic-five .unterwegs-toskana{
  grid-column:2;
  grid-row:2;
}
.unterwegs-mosaic-five .unterwegs-florenz{
  grid-column:3;
  grid-row:2;
}

@media (max-width:900px){
  .unterwegs-mosaic-five{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:5px;
  }
  .unterwegs-mosaic-five .unterwegs-gardasee,
  .unterwegs-mosaic-five .unterwegs-see,
  .unterwegs-mosaic-five .unterwegs-huette,
  .unterwegs-mosaic-five .unterwegs-toskana,
  .unterwegs-mosaic-five .unterwegs-florenz{
    grid-column:auto;
    grid-row:auto;
  }
  .unterwegs-mosaic-five .editorial-item{
    height:auto;
  }
  .unterwegs-mosaic-five .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 85: warmer Italien-Abschnitt als zwei kompakte Doppelreihen.
   Keine Vollbreitenstreifen, leicht wechselnde Gewichtung. */
.unterwegs-italien-row{
  display:grid;
  gap:5px;
  width:100%;
  height:285px;
  margin:5px 0;
}
.unterwegs-italien-row-a{
  grid-template-columns:46fr 54fr;
}
.unterwegs-italien-row-b{
  grid-template-columns:54fr 46fr;
}
.unterwegs-italien-row .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.unterwegs-italien-row .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .unterwegs-italien-row{
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
  }
  .unterwegs-italien-row .editorial-item{
    height:auto;
  }
  .unterwegs-italien-row .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 86: nordischer Dreierblock.
   Zwei Querformate links, Hochformat rechts über beide Reihen. */
.unterwegs-nordic-grid{
  display:grid;
  grid-template-columns:68fr 32fr;
  grid-template-rows:245px 245px;
  gap:5px;
  width:100%;
  margin:5px 0;
}
.unterwegs-nordic-grid .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.unterwegs-nordic-grid .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}
.unterwegs-smogen{
  grid-column:1;
  grid-row:1;
}
.unterwegs-wildwasser{
  grid-column:1;
  grid-row:2;
}
.unterwegs-huette-hoch{
  grid-column:2;
  grid-row:1 / span 2;
}

@media (max-width:900px){
  .unterwegs-nordic-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:5px;
  }
  .unterwegs-smogen,
  .unterwegs-wildwasser,
  .unterwegs-huette-hoch{
    grid-column:auto;
    grid-row:auto;
  }
  .unterwegs-nordic-grid .editorial-item{
    height:auto;
  }
  .unterwegs-nordic-grid .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 87: Rahmen/Durchblick-Dreierblock.
   Hochformat links, zwei Querformate rechts – gespiegelt zum vorherigen Block. */
.unterwegs-frame-grid{
  display:grid;
  grid-template-columns:32fr 68fr;
  grid-template-rows:245px 245px;
  gap:5px;
  width:100%;
  margin:5px 0;
}
.unterwegs-frame-grid .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.unterwegs-frame-grid .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}
.unterwegs-rahmen-hoch{
  grid-column:1;
  grid-row:1 / span 2;
}
.unterwegs-kapelle{
  grid-column:2;
  grid-row:1;
}
.unterwegs-torbogen{
  grid-column:2;
  grid-row:2;
}

@media (max-width:900px){
  .unterwegs-frame-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:5px;
  }
  .unterwegs-rahmen-hoch,
  .unterwegs-kapelle,
  .unterwegs-torbogen{
    grid-column:auto;
    grid-row:auto;
  }
  .unterwegs-frame-grid .editorial-item{
    height:auto;
  }
  .unterwegs-frame-grid .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 88: Unterwegs – neu geordneter Abschluss.
   Zwei hohe Außenbilder, mittig zwei Querformate übereinander.
   Darunter Torbogen + Kapelle als bündige Zweierreihe. */
.unterwegs-balanced-grid{
  display:grid;
  grid-template-columns:27fr 46fr 27fr;
  gap:5px;
  width:100%;
  height:500px;
  margin:5px 0;
}
.unterwegs-balanced-grid .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.unterwegs-balanced-grid .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}
.unterwegs-balanced-left{
  grid-column:1;
  grid-row:1;
}
.unterwegs-balanced-center{
  grid-column:2;
  grid-row:1;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:5px;
  min-width:0;
  min-height:0;
}
.unterwegs-balanced-right{
  grid-column:3;
  grid-row:1;
}

.unterwegs-tuscany-pair{
  display:grid;
  grid-template-columns:54fr 46fr;
  gap:5px;
  width:100%;
  height:315px;
  margin:5px 0;
}
.unterwegs-tuscany-pair .editorial-item{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.unterwegs-tuscany-pair .editorial-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos, center center);
}

@media (max-width:900px){
  .unterwegs-balanced-grid,
  .unterwegs-tuscany-pair{
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
  }
  .unterwegs-balanced-left,
  .unterwegs-balanced-center,
  .unterwegs-balanced-right{
    grid-column:auto;
    grid-row:auto;
  }
  .unterwegs-balanced-center{
    grid-template-rows:auto;
  }
  .unterwegs-balanced-grid .editorial-item,
  .unterwegs-tuscany-pair .editorial-item{
    height:auto;
  }
  .unterwegs-balanced-grid .editorial-item img,
  .unterwegs-tuscany-pair .editorial-item img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* Entwurf 89: Unterwegs – Feinschliff der Bildbeschnitte.
   Breiten/Höhen an die tatsächlichen Seitenverhältnisse angepasst,
   bei weiterhin bündigem Abschluss. */

/* Desenzano + Lazise */
.unterwegs-italien-row-a{
  grid-template-columns:51.3fr 48.7fr;
  height:302px;
}

/* Toskana/Katze + Florenz */
.unterwegs-italien-row-b{
  grid-template-columns:48.7fr 51.3fr;
  height:365px;
}

/* Torbogen + Kapelle */
.unterwegs-tuscany-pair{
  grid-template-columns:42fr 58fr;
  height:317px;
}

@media (max-width:900px){
  .unterwegs-italien-row-a,
  .unterwegs-italien-row-b,
  .unterwegs-tuscany-pair{
    grid-template-columns:1fr;
    height:auto;
  }
}


/* Entwurf 90: Typografie – bessere Lesbarkeit bei kleinen Texten.
   Große Überschriften bleiben unverändert. */
:root{
  --muted:#625d58;
}

/* Navigation */
.nav{
  font-size:14px;
  font-weight:500;
  letter-spacing:.065em;
}
.nav>a,
.dropdown-toggle{
  font-size:14px;
  font-weight:500;
  color:#34312e;
  letter-spacing:.065em;
}
.dropdown-menu a{
  font-size:13px;
  line-height:1.4;
  color:#494541;
}

/* Startseite: Rubrikbeschreibungen */
.category-copy p{
  font-size:16px;
  line-height:1.55;
  color:#56514c;
  max-width:370px;
}

/* kleine Kennzeichnungen auf Innenseiten */
.page-head .eyebrow{
  font-size:13px;
  line-height:1.4;
  color:#5f5a55;
}

/* ältere klassische Bildunterschriften */
.photo-place{
  font-size:14px;
  line-height:1.45;
  color:#625d58;
}

/* Galerie-Overlays */
.mosaic-title,
.editorial-item .mosaic-title{
  font-size:16px;
  font-weight:500;
}
.mosaic-place,
.editorial-item .mosaic-place{
  font-size:13.5px;
  line-height:1.4;
  opacity:.96;
}

/* Textseiten / Über mich / Kontakt */
.text-page p{
  font-size:16px;
  line-height:1.72;
  color:#504b47;
}
.placeholder-note{
  font-size:13px;
  line-height:1.55;
  color:#625d58;
}
.contact-copy p{
  font-size:16px;
  line-height:1.65;
  color:#504b47;
}
.field label{
  font-size:12px;
  font-weight:500;
  color:#504b47;
}
.form-status{
  font-size:13px;
  line-height:1.5;
  color:#625d58;
}

/* Footer */
.footer-inner{
  font-size:13.5px;
  line-height:1.5;
  font-weight:400;
  letter-spacing:.045em;
  color:#5c5752;
}
.footer-links a{
  font-weight:500;
}

/* mobile: ebenfalls gut lesbar, aber etwas kompakter */
@media (max-width:900px){
  .nav,
  .nav>a,
  .dropdown-toggle{
    font-size:14px;
  }
  .dropdown-menu a{
    font-size:13px;
  }
  .category-copy p{
    font-size:15px;
    line-height:1.55;
  }
  .footer-inner{
    font-size:13px;
  }
  .mosaic-place,
  .editorial-item .mosaic-place{
    font-size:13px;
  }
}


/* Entwurf 91: neutrale Graphitgrautöne statt warmer Grautöne.
   Typografiegrößen aus Entwurf 90 bleiben unverändert. */
:root{
  --muted:#666666;
}

.nav{
  letter-spacing:.04em;
}
.nav>a,
.dropdown-toggle{
  color:#3f3f3f;
  letter-spacing:.04em;
}
.dropdown-menu a{
  color:#4f4f4f;
}

.category-copy p{
  color:#555555;
}

.page-head .eyebrow{
  color:#666666;
}

.photo-place{
  color:#666666;
}

.text-page p,
.contact-copy p{
  color:#4f4f4f;
}

.placeholder-note,
.form-status{
  color:#666666;
}

.field label{
  color:#4f4f4f;
}

.footer-inner{
  color:#5f5f5f;
}


/* Entwurf 92: Startseite – Auswahl wieder stärker gewichten,
   Logo/Unterzeile im Header besser lesbar. */

/* Desktop */
@media (min-width:901px){
  .site-header{
    height:86px;
  }

  .brand-logo-final{
    height:66px;
    max-width:315px;
  }

  .selection-head h2{
    font-size:38px;
    line-height:1.05;
    letter-spacing:-.04em;
  }
}

/* Tablet */
@media (min-width:561px) and (max-width:900px){
  .site-header{
    height:76px;
  }

  .brand-logo-final{
    height:57px;
    max-width:280px;
  }

  .selection-head h2{
    font-size:34px;
  }
}

/* Smartphone */
@media (max-width:560px){
  .brand-logo-final{
    height:43px;
    max-width:235px;
  }

  .selection-head h2{
    font-size:31px;
  }
}


/* Entwurf 94: Über mich + Kontakt neu gestaltet.
   Keine Fotografie der Person, stattdessen ein zurückhaltendes Linienmotiv. */

.about-contact-main{
  max-width:1080px;
  margin:0 auto;
  padding:78px 42px 105px;
}

.about-editorial{
  display:grid;
  grid-template-columns:minmax(220px, .72fr) minmax(0, 1.28fr);
  gap:78px;
  align-items:start;
}

.about-heading-block,
.contact-heading-block{
  min-width:0;
}

.about-editorial .eyebrow,
.contact-editorial .eyebrow{
  margin:0 0 13px;
  font-size:13px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:.085em;
  text-transform:uppercase;
  color:#666;
}

.about-editorial h1,
.contact-editorial h2{
  margin:0;
  font-family:var(--heading);
  font-size:48px;
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.035em;
  color:#202020;
}

.about-text{
  max-width:690px;
  padding-top:4px;
}

.about-text p{
  margin:0 0 22px;
  font-size:16px;
  line-height:1.72;
  color:#4f4f4f;
}

.about-text p:last-child{
  margin-bottom:0;
}

/* Kleines wiederkehrendes Licht-/Linienmotiv */
.lichtlinie{
  position:relative;
  width:138px;
  height:24px;
  margin-top:27px;
}
.lichtlinie::before{
  content:"";
  position:absolute;
  top:11px;
  left:0;
  width:100%;
  height:1px;
  background:#c7c7c7;
}
.lichtlinie::after{
  content:"";
  position:absolute;
  top:5px;
  left:38px;
  width:12px;
  height:12px;
  border:1px solid #8f8f8f;
  border-radius:50%;
  background:#fff;
}
.lichtlinie span::before{
  content:"";
  position:absolute;
  top:8px;
  right:18px;
  width:6px;
  height:6px;
  border:1px solid #b5b5b5;
  border-radius:50%;
  background:#fff;
}

.contact-editorial{
  display:grid;
  grid-template-columns:minmax(250px, .82fr) minmax(0, 1.18fr);
  gap:78px;
  align-items:start;
  margin-top:92px;
  padding-top:70px;
  border-top:1px solid #dedede;
}

.contact-intro{
  max-width:390px;
  margin:25px 0 0;
  font-size:16px;
  line-height:1.62;
  color:#4f4f4f;
}

.lichtlinie-contact{
  margin-top:24px;
}

.contact-form-refined{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 22px;
  padding-top:7px;
}

.contact-form-refined .field{
  gap:8px;
}

.contact-form-refined .field-message{
  grid-column:1 / -1;
}

.contact-form-refined .field label{
  font-size:13px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:.035em;
  text-transform:none;
  color:#4f4f4f;
}

.contact-form-refined .field input,
.contact-form-refined .field textarea{
  width:100%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid #bdbdbd;
  border-radius:0;
  background:transparent;
  padding:9px 2px 10px;
  font:inherit;
  font-size:16px;
  color:#2f2f2f;
  outline:none;
  transition:border-color .18s ease;
}

.contact-form-refined .field textarea{
  min-height:132px;
  border:1px solid #c8c8c8;
  padding:12px 13px;
  resize:vertical;
}

.contact-form-refined .field input:focus{
  border-bottom-color:#4a4a4a;
}

.contact-form-refined .field textarea:focus{
  border-color:#4a4a4a;
}

.form-button-refined{
  grid-column:1 / -1;
  justify-self:start;
  margin-top:1px;
  border:1px solid #4a4a4a;
  background:#fff;
  padding:11px 17px;
  font-size:12.5px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#343434;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}

.form-button-refined:hover{
  background:#303030;
  color:#fff;
}

.contact-form-refined .form-status{
  grid-column:1 / -1;
}

@media (max-width:900px){
  .about-contact-main{
    padding:58px 28px 82px;
  }

  .about-editorial,
  .contact-editorial{
    grid-template-columns:1fr;
    gap:35px;
  }

  .about-editorial h1,
  .contact-editorial h2{
    font-size:40px;
  }

  .about-text{
    max-width:760px;
  }

  .contact-editorial{
    margin-top:66px;
    padding-top:52px;
  }

  .contact-intro{
    max-width:580px;
  }
}

@media (max-width:560px){
  .about-contact-main{
    padding:46px 20px 68px;
  }

  .about-editorial,
  .contact-editorial{
    gap:28px;
  }

  .about-editorial h1,
  .contact-editorial h2{
    font-size:35px;
  }

  .about-text p,
  .contact-intro{
    font-size:15.5px;
    line-height:1.68;
  }

  .contact-form-refined{
    grid-template-columns:1fr;
    gap:20px;
  }

  .contact-form-refined .field-message,
  .form-button-refined,
  .contact-form-refined .form-status{
    grid-column:1;
  }
}


/* Entwurf 95: Über mich/Kontakt – doppelte Eyebrows entfernt,
   neues ruhiges Linienmotiv ohne Punkte/Kreise. */

.about-heading-block,
.contact-heading-block{
  padding-top:2px;
}

.about-editorial h1,
.contact-editorial h2{
  margin-top:0;
}

/* Neue abstrakte Licht-/Horizontlinie */
.lichtlinie{
  position:relative;
  width:156px;
  height:28px;
  margin-top:30px;
}

.lichtlinie::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:156px;
  height:1px;
  background:#b9b9b9;
}

.lichtlinie::after{
  content:"";
  position:absolute;
  left:46px;
  top:18px;
  width:86px;
  height:1px;
  background:#d0d0d0;
}

.lichtlinie span,
.lichtlinie span::before,
.lichtlinie span::after{
  display:none !important;
}

.lichtlinie-contact{
  margin-top:28px;
}


/* Entwurf 97: Rückkehr zur ruhigen Über-mich/Kontakt-Fassung.
   Linienmotiv aus der ersten Version mit zwei kleinen Kreispunkten wiederhergestellt. */

.lichtlinie{
  display:block !important;
  position:relative;
  width:138px;
  height:24px;
  margin-top:27px;
}

.lichtlinie::before{
  content:"";
  position:absolute;
  top:11px;
  left:0;
  width:100%;
  height:1px;
  background:#c7c7c7;
}

.lichtlinie::after{
  content:"";
  position:absolute;
  top:5px;
  left:38px;
  width:12px;
  height:12px;
  border:1px solid #8f8f8f;
  border-radius:50%;
  background:#fff;
}

.lichtlinie span{
  display:block !important;
  position:static;
}

.lichtlinie span::before{
  content:"";
  display:block !important;
  position:absolute;
  top:8px;
  right:18px;
  width:6px;
  height:6px;
  border:1px solid #b5b5b5;
  border-radius:50%;
  background:#fff;
}

.lichtlinie span::after{
  content:none !important;
}

.lichtlinie-contact{
  margin-top:24px;
}


/* Entwurf 100: Kontaktbereich auf eine klare linke Achse gestellt.
   Keine Zweispaltigkeit und keine seitlichen Versätze mehr. */

.contact-editorial-linear{
  display:block;
  margin-top:92px;
  padding-top:70px;
  border-top:1px solid #dedede;
}

.contact-heading-linear{
  max-width:760px;
}

.contact-intro-linear{
  max-width:760px;
  margin:23px 0 0;
  font-size:16px;
  line-height:1.65;
  color:#4f4f4f;
}

.contact-editorial-linear .lichtlinie-contact{
  margin-top:27px;
}

.contact-form-linear{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  width:100%;
  max-width:760px;
  margin-top:28px;
  padding-top:0;
}

.contact-form-linear .field,
.contact-form-linear .field-message,
.contact-form-linear .form-button-refined,
.contact-form-linear .form-status{
  grid-column:1;
}

.contact-form-linear .field textarea{
  min-height:145px;
}

@media (max-width:900px){
  .contact-editorial-linear{
    margin-top:66px;
    padding-top:52px;
  }

  .contact-heading-linear,
  .contact-intro-linear,
  .contact-form-linear{
    max-width:100%;
  }
}

@media (max-width:560px){
  .contact-form-linear{
    gap:20px;
    margin-top:24px;
  }
}


/* Entwurf 101: Kontakt – Linie direkt unter der Überschrift,
   Einleitung darunter. */
.contact-editorial-linear .lichtlinie-contact{
  margin-top:18px;
}

.contact-intro-linear{
  margin-top:20px;
}


/* Entwurf 102: Kontakt – Abstände und Zeilenlauf verfeinert. */

/* exakt derselbe Abstand wie bei der Linie unter „Über mich“ */
.contact-editorial-linear .lichtlinie-contact{
  margin-top:27px;
}

/* Einleitung darf auf Desktop breiter laufen als das Formular */
.contact-heading-linear{
  max-width:900px;
}

.contact-intro-linear{
  max-width:900px;
  margin-top:20px;
}

/* zusätzliche Ruhe vor dem Formular */
.contact-form-linear{
  margin-top:52px;
}

@media (max-width:900px){
  .contact-heading-linear,
  .contact-intro-linear{
    max-width:100%;
  }

  .contact-form-linear{
    margin-top:38px;
  }
}

@media (max-width:560px){
  .contact-form-linear{
    margin-top:32px;
  }
}


/* Entwurf 103: Responsive-Feinschliff nach Mobil-/Tablet-Check. */
@media (min-width:561px) and (max-width:900px){
  /* Header wurde in Entwurf 92 auf 76px erhöht; das mobile Menü folgt exakt. */
  .nav{top:76px;}
}

@media (max-width:900px){
  .menu-button{
    min-width:56px;
    min-height:42px;
    padding:9px 12px;
    font-size:10.5px;
    line-height:1;
    font-weight:500;
    letter-spacing:.045em;
  }
  .nav>a,
  .dropdown-toggle{
    padding:13px 0;
  }
  .dropdown-menu a{
    padding:11px 8px;
  }
}

@media (max-width:560px){
  .brand-logo-final{
    height:45px;
    max-width:245px;
  }

  /* Footer auf kleinen Displays sauber untereinander statt gequetscht nebeneinander. */
  .site-footer{
    padding:28px 20px 30px;
  }
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:12px;
    font-size:12px;
    line-height:1.5;
    letter-spacing:.035em;
  }
  .footer-links{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
  }
}


/* Entwurf 108: Bildschutz ohne Tracking-/Consent-Oberfläche */
.protected-photo{
  -webkit-user-drag:none;
  user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}

/* Unsichtbares Honeypot-Feld gegen einfache Formular-Bots */
.contact-honeypot{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.contact-privacy-note{
  margin:0;
  max-width:760px;
  font-size:13px;
  line-height:1.55;
  color:#666;
}

.contact-privacy-note a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}